/* ==========================================================
   TFK Account Disclosure
   ========================================================== */

.tfk-account {
  position: relative;
  display: flex;
  justify-content: center;
}

.tfk-account__toggle[aria-expanded="true"] {
  color: var(--tfk-color-text);
  background: var(--tfk-color-surface-muted);
}

.tfk-account__panel {
  position: absolute;
  z-index: 1100;
  top: calc(100% + 0.5rem);
  inset-inline-end: 0;
  min-width: 11rem;
  max-width: calc(100vw - 2rem);
  padding: 0.25rem 0;
  color: var(--tfk-color-text);
  background: var(--tfk-color-surface-raised);
  border: 1px solid var(--tfk-color-border);
  border-radius: var(--tfk-radius-sm);
  box-shadow: var(--tfk-shadow-overlay);
}

.tfk-account__panel[hidden] {
  display: none;
}

.tfk-account__panel ul.menu {
  min-width: 11rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tfk-account__panel ul.menu ul.menu {
  min-width: 0;
  border-top: 1px solid var(--tfk-color-divider);
}

.tfk-account__panel li {
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.tfk-account__panel a {
  display: block;
  padding: 0.55rem 1rem;
  color: var(--tfk-color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--tfk-color-divider);
  transition:
    color var(--tfk-duration-fast) var(--tfk-ease-standard),
    background-color var(--tfk-duration-fast) var(--tfk-ease-standard);
}

.tfk-account__panel li:last-child > a {
  border-bottom: 0;
}

.tfk-account__panel a:hover {
  color: var(--tfk-color-heading);
  background: var(--tfk-color-surface-muted);
}

@media (max-width: 575.98px) {
  .tfk-account__panel {
    min-width: 10rem;
  }
}