.period-options {
  position: relative;
}

.period-options > summary {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  list-style: none;
  cursor: pointer;
}

.period-options > summary::-webkit-details-marker { display: none; }
.period-options > summary::after { content: none; }
.period-options > summary i { font-size: 1.25rem; }

.period-options-panel {
  position: absolute;
  z-index: 1060;
  top: calc(100% + .5rem);
  right: 0;
  width: min(21rem, calc(100vw - 1.5rem));
  display: grid;
  gap: .875rem;
  padding: 1rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  background: var(--tblr-bg-surface);
  box-shadow: var(--tblr-box-shadow-dropdown);
}

.period-options-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.period-options-head > div { display: grid; gap: .15rem; }
.period-options-head strong { font-size: .9375rem; }
.period-options-head small { color: var(--tblr-secondary-color); font-size: .75rem; }

.period-options-group { display: grid; gap: .5rem; }
.period-options-group > span { color: var(--tblr-secondary-color); font-size: .6875rem; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; }
.period-options-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.period-options-month-choices { grid-template-columns: 1fr; }
.period-options-week-choices { grid-template-columns: 1fr; }
.period-options-choices button,
.period-options-link {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem .75rem;
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  color: var(--tblr-body-color);
  font-size: .8125rem;
  font-weight: 600;
  text-align: left;
}

.period-options-choices button i,
.period-options-link i { flex: none; font-size: 1.125rem; }
.period-options-choices button:hover,
.period-options-link:hover { background: var(--tblr-secondary-bg); }
.period-options-choices button.active { border-color: var(--tblr-body-color); background: var(--tblr-secondary-bg); box-shadow: inset 0 0 0 1px var(--tblr-body-color); }
.period-options-link { width: 100%; border: 0; }
.period-options-link .ti-chevron-right { margin-left: auto; color: var(--tblr-secondary-color); }
.period-options-panel .dropdown-divider { margin: 0; }

@media (max-width: 767.98px) {
  .period-options > summary {
    width: 2.75rem;
    min-width: 2.75rem;
    height: 2.75rem;
    min-height: 2.75rem;
    padding: 0;
  }
  .period-options > summary span { display: none; }
  .period-options-panel {
    position: fixed;
    top: calc(var(--dyn-header-height) + 4.75rem);
    left: .75rem;
    right: .75rem;
    width: auto;
    max-height: calc(100dvh - var(--dyn-header-height) - 5.5rem);
    overflow-y: auto;
  }
}