/**
 * @file
 * Account dropdown for the header's profile icon.
 *
 * The eight rules below are the design's own, verbatim from the "TraceLink Main
 * Nav (1)" bundle — the entire delta between that revision and the previous one,
 * which had the icon as a plain link. Every token they use resolves from
 * css/design-system.css.
 *
 * A separate file rather than an addition to site_header.css: that file is
 * derive-component.py output and a regeneration would drop anything added to it.
 * This one is attached alongside it through libraryOverrides, the same way
 * marketo-footer.css sits beside site_footer.css.
 */

.tl-siteheader__acct {
  position: relative;
  display: inline-flex;
}

.tl-acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  background: var(--tl-white);
  box-shadow: 0 12px 32px rgba(0, 61, 76, 0.18);
}

.tl-acct-menu__label {
  padding: 8px 14px 6px;
  font-family: var(--tl-font-sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tl-text-muted);
}

.tl-acct-menu__item {
  position: relative;
  isolation: isolate;
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  font-family: var(--tl-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--tl-deep-ocean);
  text-decoration: none;
  transition: background 140ms ease, color 140ms ease;
}

.tl-acct-menu__item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 10px;
  opacity: 0;
  background: linear-gradient(140deg, rgba(0, 126, 158, 0.1), rgba(0, 135, 85, 0.1));
  transition: opacity 140ms ease;
}

.tl-acct-menu__item:hover::before {
  opacity: 1;
}

.tl-acct-menu__item:hover {
  text-decoration: none;
  color: transparent;
  background-image: linear-gradient(90deg, var(--tl-tidal), var(--tl-emerald));
  -webkit-background-clip: text;
  background-clip: text;
}

/* The trigger keeps its hover wash while the panel is open. */
.tl-icon-btn[aria-expanded="true"] {
  background: linear-gradient(140deg, rgba(0, 126, 158, 0.1), rgba(0, 135, 85, 0.1));
}

/* ── Drupal port ──────────────────────────────────────────────────────────
 * The design is a React component that mounts the panel only while open, so it
 * never needed a closed state. Server-side the panel is always in the DOM and
 * toggled with [hidden] — and `hidden` is a UA `display: none`, which the
 * `display: flex` above overrides. Without this rule the menu renders open on
 * every page load, before any JavaScript runs.
 */
.tl-acct-menu[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .tl-acct-menu__item,
  .tl-acct-menu__item::before {
    transition: none;
  }
}