// Name:            Alphindex
// Description:     Alphabetic letter list
//
// Component:       `c-alphindex`
//
//
// Dependencies:    `settings/v7/colors.tokens`
//                  `settings/v7/spacing.tokens`
// ========================================================================

@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

.c-alphindex {

  // Custom properties
  // ======================================================================

  --alphindex-bg: var(--background-color-gray);
  --alphindex-color: var(--link-color-dark);
  --alphindex-width: auto;
  --alphindex-px: #{$padding-base};

  // ======================================================================

  width: var(--alphindex-width);
  padding-right: var(--alphindex-px);
  padding-left: var(--alphindex-px);
  background-color: var(--alphindex-bg);
  color: var(--alphindex-color);
  transition: $global-interactive-transition;
  @include bp(lg) {
    --alphindex-px: #{$padding-small};
  }
  @include bp(lg) {
    --alphindex-width: 100%;
  }

  #{$global-background-dark} &,
  #{$global-background-primary-dark} & {
    --alphindex-color: $link-01;
  }

  &:hover:not(.disabled) {
    --alphindex-color: $hover-04;
    --alphindex-bg: var(--nav-active-bg-hover);
  }

  &.current {
    --alphindex-bg: var(--theme-color);
    --alphindex-color: #{$inverse-01};
  }

  &.disabled {
    --alphindex-color: #{$disabled-02};
  }

}