// Copyright (C) 2018 The Trustees of Indiana University
// SPDX-License-Identifier: BSD-3-Clause

@use '../core' as *;
@use 'sass:map';
@use 'sass:math';

.#{$prefix}-dropdown {
  position: relative;
  display: inline-block;

  .button__text {
    margin-right: $spacing-xs;
  }

  /**
   * This is only used to style the header dropdowns.
   */

  &__toggle {
    display: flex;
    align-items: center;
    border: none;
    background-color: transparent;
    cursor: pointer;
    padding: 0;

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: math.div($spacing-xxs, 2) solid $color-blue-600;
      outline-offset: math.div($spacing-xxs, 2);
    }

    &:hover {
      text-decoration: underline;
    }

    &[aria-expanded='true'] > svg {
      transform: rotate(180deg);
    }
  }

  &__menu[aria-hidden='true'] {
    display: none;
  }

  &__menu {
    position: absolute;
    margin-top: $spacing-xs;
    background-color: $color-white-base;
    border-radius: $spacing-xxs;
    box-shadow: $shadow-standard;
    min-width: 12.5rem;
    padding-top: $spacing-xs;
    padding-bottom: $spacing-xs;
    z-index: map.get($z-index, '1000');

    /**
     * Align the dropdown menu to the right edge of the button.
     */

    &--right {
      right: 0;
    }

    ul {
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        margin: 0;
      }
    }

    a,
    button {
      display: block;
      text-decoration: none;
      color: $color-black-500;

      /**
       * This padding-top and bottom value is a magic number. Sorry,
       * it just looks better. :)
       */
      padding: .375rem $spacing-sm;
      background-color: transparent;
      border: none;
      width: 100%;
      text-align: left;

      &:hover {
        background-color: $color-blue-000;
        color: $color-blue-500;
        text-decoration: none;
      }

      &:focus {
        outline: none;
      }

      &:focus-visible {
        outline: none;
        box-shadow: inset 0 0 0 math.div($spacing-xxs, 2) $color-blue-500;
      }

      &.#{$prefix}-is-selected,
      &[aria-current]:not([aria-current='false']),
      &[aria-checked='true'] {
        box-shadow: inset $spacing-xxs 0 0 $color-crimson-500;
        background-color: $color-orange-000;
        color: $color-crimson-500;

        &:hover {
          color: $color-crimson-500;
        }

        &:focus {
          outline: none;
        }

        &:focus-visible {
          /* stylelint-disable */
          box-shadow:
            inset $spacing-xxs 0 0 $color-blue-500,
            inset 0 0 0 math.div($spacing-xxs, 2) $color-blue-500 !important;
          /* stylelint-enable */
        }
      }
    }

    button:disabled {
      color: $color-black-400;
      background-color: $color-black-000;
    }
  }

  &__menu-heading {
    color: $color-black-400;
    padding: $spacing-sm $spacing-sm $spacing-xxs;
    font-weight: $font-weight-bold;
    font-size: $ts-14;

    &:first-child {
      padding-top: 0;
    }
  }

  &__menu-divider,
  &__menu-separator {
    border-top: 1px solid $color-black-100;
    margin-top: $spacing-xs;
    margin-bottom: $spacing-xs;
  }

  [role='group'] {
    border-top: 1px solid $color-black-100;
    margin-top: $spacing-xs;
    padding-top: $spacing-xs;

    &:first-child {
      border-top: none;
      margin-top: 0;
      padding: 0;
    }
  }
}