/*
  use as a supplement for .prs-btn .prs-btn-secondary
  use with .prs-menu for full organism
*/

.prs-dropdown-btn {
  border: 1px solid var(--prs-c-gray-600);
  padding-right: 2.75rem;
  background: transparent;
  color: var(--prs-c-primary);
  font-weight: normal;
  position: relative;

  &.prs-btn-danger {
    border-color: currentColor;
    color: var(--prs-c-danger-600);
  }

  &.prs-btn-ghost {
    border-color: transparent;
    background-color: transparent;
    &:hover, &.prs-btn_hover {
      background-color: transparent;
    }
    &:focus-visible, &.prs-btn_focus,
    &:focus-visible:hover, &.prs-btn_focus:hover {
      border-color: transparent;
      background-color: transparent;
    }
    &:disabled, &.prs-btn_disabled,
    &:disabled:hover, &.prs-btn_disabled:hover {
      border-color: transparent;
      background-color: transparent;
      &::after {
        color: currentColor;
      }
    }
  }

  &:hover, &.prs-btn_hover {
    border-color: currentColor;
    background: var(--prs-c-primary-100);
    color: var(--prs-c-primary);
    &.prs-btn-danger {
      background-color: var(--prs-c-danger-100);
      color: var(--prs-c-danger-600);
    }
  }
  
  &:focus-visible, &.prs-btn_focus,
  &:focus-visible:hover, &.prs-btn_focus:hover {
    border-color: var(--prs-c-gray-600);
    background-color: transparent;
    color: var(--prs-c-primary);
    outline: 2px solid currentColor;
    &.prs-btn-danger {
      outline-color: var(--prs-c-primary);
      color: var(--prs-c-danger-600);
    }
  }

  &::after {
    width: 0.625rem;
    height: 0.333125rem;
    background-color: currentColor;
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    pointer-events: none;
    position: absolute;
    top: 50%;
    right: 1.1875rem;
    translate: 0 -50%;
    content: '';
    transition-property: var(--prs-transition-property);
    transition-timing-function: var(--prs-transition-timing);
    transition-duration: var(--prs-transition-duration);
  }

  &.prs-btn-sm {
    padding-right: 2.25rem;
    &::after {
      right: 0.875rem;
    }
  }

  &.prs-btn-lg {
    padding-right: 2.75rem;
  }

  &:disabled, &.prs-btn_disabled,
  &:disabled:hover, &.prs-btn_disabled:hover {
    border-color: var(--prs-c-gray-300);
    background-color: var(--prs-c-gray-100);
    color: var(--prs-c-gray-500);
    &::after {
      color: var(--prs-c-gray-300);
    }
  }

}

.prs-dropdown {
  &:has(:popover-open,.prs-dropdown-menu_open) {
    & > :where(.prs-dropdown-btn) {
      &::after {
        rotate: 180deg;
      }
    }
  }
}

/* with menu */
.prs-dropdown-menu {
  margin: 0.25rem 0;
  display: inline-block;
  position: relative;
  position-area: var(--anchor-v, bottom) var(--anchor-h, span-right);
  & > *:focus {
    outline: none;
  }

  &[popover] {
    z-index: 999;
    @media (prefers-reduced-motion: no-preference) {
      animation: dropdown 0.2s;
      transition-property: opacity, scale, display;
      transition-behavior: allow-discrete;
      transition-duration: 0.2s;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    }
  }
  @starting-style {
    &[popover] {
      scale: 95%;
      opacity: 0;
    }
  }

  &:not(.prs-dropdown-menu_close) {
    &.prs-dropdown-menu_open,
    &:not(.prs-dropdown-hover):focus,
    &:focus-within {
      > [tabindex]:first-child {
        pointer-events: none;
      }
    }
  }

  /* experimental */
  &[popover] {
    position: fixed;
    color: inherit;
    &.prs-dropdown-menu_close,
    &:not(.prs-dropdown-menu_open, :popover-open) {
      display: none;
      opacity: 0;
      scale: 95%;
      @apply origin-top;
    }
  }
}

.prs-dropdown-menu-start {
  --anchor-h: span-right;
  &.prs-dropdown-menu-left {
    --anchor-h: left;
    --anchor-v: span-bottom;
  }
  &.prs-dropdown-menu-right {
    --anchor-h: right;
    --anchor-v: span-bottom;
  }
}

.prs-dropdown-menu-center {
  --anchor-h: center;
  &.prs-dropdown-menu-left {
    --anchor-h: left;
    --anchor-v: center;
  }
  &.prs-dropdown-menu-right {
    --anchor-h: right;
    --anchor-v: center;
  }
}

.prs-dropdown-menu-end {
  --anchor-h: span-left;
  &.prs-dropdown-menu-left {
    --anchor-h: left;
    --anchor-v: span-top;
  }
  &.prs-dropdown-menu-right {
    --anchor-h: right;
    --anchor-v: span-top;
  }
}

.prs-dropdown-menu-left {
  margin: 0 0.25rem;
  --anchor-h: left;
  --anchor-v: span-bottom;
}

.prs-dropdown-menu-right {
  margin: 0 0.25rem;
  --anchor-h: right;
  --anchor-v: span-bottom;
}

.prs-dropdown-menu-bottom {
  --anchor-v: bottom;
}

.prs-dropdown-menu-top {
  --anchor-v: top;
}

@keyframes dropdown {
  0% { opacity: 0; }
}