/*
  dropdownRow — one case study link in the Work menu (component.json dropdownRow, 11 tokens).
  States: default (no fill), hover, current (the page you are on: aria-current="page"),
  focus (ring only). Hovering the current row changes nothing. No icons, ever.
  MOTION (BUILD 19): the fill fades at dropdownRow.transition (feedback). A tap shows the
  hover fill at once while the finger is down and fades out on release.
*/

.dropdown-row {
  display: flex;
  align-items: center;
  height: var(--dropdown-row-height-all);
  padding-inline: var(--dropdown-row-padding-horizontal-all);
  border-radius: var(--dropdown-row-radius-all);
  background-color: var(--dropdown-row-fill-default);
  color: var(--dropdown-row-content-all);
  font-family: var(--dropdown-row-text-style-all-font-family);
  font-size: var(--dropdown-row-text-style-all-font-size);
  font-weight: var(--dropdown-row-text-style-all-font-weight);
  line-height: var(--dropdown-row-text-style-all-line-height);
  text-decoration: none;
  transition: background-color var(--dropdown-row-transition-all-duration) var(--dropdown-row-transition-all-easing);
}

/* One line only; a title too long for the row ends in "…". Screen readers get the full title. */
.dropdown-row__text {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown-row[aria-current="page"] {
  background-color: var(--dropdown-row-fill-current);
}

@media (hover: hover) {
  .dropdown-row:not([aria-current]):hover {
    background-color: var(--dropdown-row-fill-hover);
  }
}

/* tap (and mouse press): the hover fill, at once; it fades out on release */
.dropdown-row:not([aria-current]):active {
  background-color: var(--dropdown-row-fill-hover);
  transition-duration: 0s;
}

.dropdown-row:focus-visible {
  outline: var(--dropdown-row-focus-ring-width-focus) solid var(--dropdown-row-focus-ring-color-focus);
  outline-offset: var(--dropdown-row-focus-ring-offset-focus);
}