@use 'globals';

.basic-dropdown {
  &__button {
    anchor-name: --anchor-button;
  }

  &__popover {
    &:popover-open {
      @include globals.popover;

      padding: 0;
      position: absolute;
      position-anchor: --anchor-button;
      top: anchor(bottom);
    }
  }

  &__menu {
    list-style-type: none;
    margin: 0;
    padding: 8px 0;

    & > li {
      padding: 0;

      &:hover {
        background: #0001;
      }

      & > button, & > [role="button"] {
        @include globals.reset-button;
        @include globals.reset-anchor;

        display: block;
        padding: 8px 16px;
      }
    }
  }
}