/* dropdown */
@layer theme {
  :root {
    --ds-dropdown-background: var(--ds-color-background);
    --ds-dropdown-color: var(--ds-color-contrast);
    --ds-dropdown-width: 200px;
    --ds-dropdown-focus: var(--ds-grey-40);
    --ds-dropdown-shadow: var(--ds-shadow-medium);
    --ds-dropdown-radius: var(--ds-box-radius);
    --ds-dropdown-padding: var(--ds-space-d4) var(--ds-space-d2);
  }
  .ds-darkmode, .ds-darkmode-auto {
    --ds-dropdown-background: var(--ds-color-background);
    --ds-dropdown-color: var(--ds-color-contrast);
    --ds-dropdown-shadow: var(--ds-glow-small);    
  }
}
@layer component {
  .ds-dropdown {
    anchor-name: var(--ds-dropdown-anchor);
    position: relative;
  }
  .ds-dropdown-icon {
    padding: 0 0.25em;
    width: 1.5em;
    border-radius: 2px;
  }
  .ds-dropdown-icon:hover {
    background: var(--ds-dropdown-focus);
  }
  .ds-dropdown-state {
    display: none;
  }
  .ds-dropdown-nav {
    position-anchor: var(--ds-dropdown-anchor);
    position-area: bottom span-left;
    width: var(--ds-dropdown-width);
    background: var(--ds-dropdown-background);
    color: var(--ds-dropdown-color);
    box-shadow: var(--ds-dropdown-shadow);
    border-radius: var(--ds-dropdown-radius);
    border: none;
    margin: 0;
    inset: unset;
    overflow: visible;
    --ds-dropdown-marker-position: -0.2rem 0.5rem auto auto;
    --ds-dropdown-marker-transform: rotate(45deg);
  }
  .ds-dropdown-nav::before {
    content: "";
    display: block;
    width: 0.5rem; 
    height: 0.5rem;
    background: var(--ds-dropdown-background);
    position: absolute;
    inset: var(--ds-dropdown-marker-position);
    transform: var(--ds-dropdown-marker-transform);
    filter: drop-shadow(-1px -1px 2px #DDD);
    clip-path: polygon(-2px 0.6rem, -2px -2px, 0.6rem -2px);
  }
  .ds-dropdown-up {
    position-area: top;
  }
  .ds-dropdown-up::before {
    transform: rotate(-135deg);
    top: auto;
    bottom: -0.2rem;
    filter: drop-shadow(1px 1px 2px #000);
  }
  .ds-dropdown-left {
    position-try-fallbacks: --ds-dropdown-left, --ds-dropdown-center, --ds-dropdown-right;
  }
  .ds-dropdown-right {
    position-try-fallbacks: --ds-dropdown-right, --ds-dropdown-center, --ds-dropdown-left;
  }
  .ds-dropdown-center {
    position-try-fallbacks: --ds-dropdown-center, --ds-dropdown-left, --ds-dropdown-right;
  }
  @position-try --ds-dropdown-left {
    --ds-dropdown-marker-position: -0.2rem auto auto 0.75rem;
    left: anchor(left);
  }
  @position-try --ds-dropdown-right {
    right: anchor(right);
    --ds-dropdown-marker-position: -0.2rem 0.5rem auto auto;
  }
  @position-try --ds-dropdown-center {
    justify-self: anchor-center;
    --ds-dropdown-marker-position: -0.2rem auto auto calc(50% - 0.25rem);
  }
  
  .ds-dropdown-nav a:link,
  .ds-dropdown-nav a:visited,
  .ds-dropdown-nav a:hover,
  .ds-dropdown-nav a:active {
    color: var(--ds-dropdown-color);
    text-decoration: none;
  }
  .ds-dropdown-list {
    list-style: none;
    margin: 0;
    padding: var(--ds-dropdown-padding);
  }
  .ds-dropdown-item {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .ds-dropdown-nav:not([popover]) {
    display: none;
    z-index: 101;
    position:absolute;

    &:where(.ds-dropdown-state:checked ~ .ds-dropdown-nav) {
      display: block;
    }
  }
  @supports (not (position-try-fallbacks)) {
    .ds-dropdown-right {
      left: auto;
      right: 0;
    }
    .ds-dropdown-right::before {
      left: auto;
      right: 0.5rem;
      top: -0.15rem;
    }

    .ds-dropdown-up {
      bottom: 1.5em
    }
    .ds-dropdown-up::before {
      transform: rotate(-135deg);
      top: auto;
      bottom: -0.2rem;
      filter: drop-shadow(1px 1px 2px #000);
    }

    .ds-dropdown-center {
      margin-left: calc(-0.5 * var(--ds-dropdown-width) + 50%);
    }
    .ds-dropdown-center::before {
      left: calc(50% - 0.25rem);
    }
  }
}