/* Dropdown: details.dropdown */

/* The summary is a field, so it gets the soft field ring. Nav keeps the solid one. */
details.dropdown summary:not([role="button"]) {
  --pico-outline-width: 0.1875rem;
}

nav details.dropdown summary:focus-visible {
  --pico-outline-width: 0.125rem;
}

details.dropdown {
  position: relative;
  border-bottom: none;

  > summary::after,
  > button::after,
  > a::after {
    display: block;
    width: 1rem;
    height: calc(1rem * var(--pico-line-height, 1.5));
    margin-inline-start: 0.25rem;
    float: right;
    /* 0.2rem lines the chevron up with a native select */
    transform: rotate(0deg) translateX(0.2rem);
    background-image: var(--pico-icon-chevron);
    background-position: right center;
    background-size: 1rem auto;
    background-repeat: no-repeat;
    content: "";
  }

  > summary:not([role]) {
    height: calc(
      1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
        var(--pico-border-width) * 2
    );
    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
    border: var(--pico-border-width) solid var(--pico-form-element-border-color);
    border-radius: var(--pico-border-radius);
    background-color: var(--pico-form-element-background-color);
    color: var(--pico-form-element-placeholder-color);
    line-height: inherit;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--pico-transition),
      border-color var(--pico-transition),
      color var(--pico-transition),
      box-shadow var(--pico-transition);

    &:active,
    &:focus {
      border-color: var(--pico-form-element-active-border-color);
      background-color: var(--pico-form-element-active-background-color);
    }

    &:focus {
      box-shadow: 0 0 0 var(--pico-outline-width)
        color-mix(in oklab, var(--pico-form-element-focus-color) 25%, transparent);
    }

    &:focus-visible {
      outline: none;
    }

    &[aria-invalid="false"] {
      --pico-form-element-border-color: var(--pico-form-element-valid-border-color);
      --pico-form-element-active-border-color: var(--pico-form-element-valid-focus-color);
      --pico-form-element-focus-color: var(--pico-form-element-valid-focus-color);
    }

    &[aria-invalid="true"] {
      --pico-form-element-border-color: var(--pico-form-element-invalid-border-color);
      --pico-form-element-active-border-color: var(--pico-form-element-invalid-focus-color);
      --pico-form-element-focus-color: var(--pico-form-element-invalid-focus-color);
    }
  }
}

/* In nav the dropdown sits inline with the links */
nav details.dropdown {
  display: inline;
  margin: calc(var(--pico-nav-element-spacing-vertical) * -1) 0;

  /* The floated chevron would wrap under the label on a narrow screen */
  > summary {
    white-space: nowrap;
  }

  > summary::after {
    transform: rotate(0deg) translateX(0rem);
  }

  > summary:not([role]) {
    height: calc(
      1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 +
        var(--pico-border-width) * 2
    );
    padding: var(--pico-form-element-spacing-vertical) var(--pico-nav-link-spacing-horizontal);

    &:focus-visible {
      box-shadow: none;
      outline: var(--pico-outline-width) solid var(--pico-primary-focus);
      outline-offset: 0;
    }
  }
}

/* The menu */
details.dropdown > summary + ul {
  display: flex;
  z-index: 99;
  position: absolute;
  left: 0;
  flex-direction: column;
  width: 100%;
  min-width: max-content;
  margin: 0;
  margin-top: 0.25rem;
  padding: 0.25rem;
  border: var(--pico-border-width) solid var(--pico-dropdown-border-color);
  border-radius: var(--pico-card-border-radius);
  background-color: var(--pico-dropdown-background-color);
  box-shadow: var(--pico-dropdown-box-shadow);
  color: var(--pico-dropdown-color);
  text-align: start;
  white-space: nowrap;
  opacity: 0;
  transition:
    opacity var(--pico-transition),
    transform 0s ease-in-out 1s;

  /* The ul itself needs dir="rtl", an ancestor is not enough */
  &[dir="rtl"] {
    right: 0;
    left: auto;
  }

  li {
    width: 100%;
    margin: 0;
    padding: 0.375rem 0.625rem;
    border-radius: calc(var(--pico-border-radius) * 0.75);
    list-style: none;

    /* Negative margins stretch the hover background to the item edges */
    a {
      display: block;
      margin: -0.375rem -0.625rem;
      padding: 0.375rem 0.625rem;
      overflow: hidden;
      border-radius: inherit;
      color: var(--pico-dropdown-color);
      text-decoration: none;
      text-overflow: ellipsis;

      &:hover,
      &:focus,
      &:active,
      &:focus-visible,
      &[aria-current]:not([aria-current="false"]) {
        background-color: var(--pico-dropdown-hover-background-color);
      }
    }

    label {
      width: 100%;
    }

    &:has(label):hover {
      background-color: var(--pico-dropdown-hover-background-color);
    }
  }
}

details.dropdown[open] {
  > summary {
    margin-bottom: 0;
  }

  > summary + ul {
    transform: translateY(0);
    opacity: 1;
    transition:
      opacity var(--pico-transition),
      transform var(--pico-transition);
  }

  /* Invisible layer that closes the menu on an outside click */
  > summary::before {
    display: block;
    z-index: 1;
    position: fixed;
    width: 100vw;
    height: 100vh;
    inset: 0;
    background: none;
    content: "";
    cursor: default;
  }
}

/* The open menu fades in and slides down a little */
@media (prefers-reduced-motion: no-preference) {
  @starting-style {
    details.dropdown[open] > summary + ul {
      transform: translateY(-0.25rem);
      opacity: 0;
    }
  }
}

label > details.dropdown {
  margin-top: calc(var(--pico-spacing) * 0.25);
}