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

@use '../core' as *;

.#{$prefix}-subnav {
  overflow-x: auto;
  border-bottom: 1px solid $color-black-100;
  -webkit-overflow-scrolling: auto;

  &__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding-top: $spacing-xxs;
    padding-right: $spacing-xxs;
    padding-left: $spacing-xxs;
  }

  &__item {
    margin: 0;
    flex-shrink: 0;
  }

  &__item a,
  &__item button {
    align-items: center;
    border: none;
    color: $color-black-500;
    display: flex;
    font-size: $ts-14;
    padding: $spacing-sm $spacing-sm;
    position: relative;
    text-decoration: none;
    appearance: none;

    > svg {
      color: $color-black-300;
    }
  }

  &__item a[aria-current='page'] {
    background-color: $color-orange-000;
    color: $color-crimson-500;

    > svg {
      color: $color-crimson-500;
    }
  }

  &__item a[aria-current='page']::after,
  &__item a:hover::after {
    content: '';
    display: block;
    width: 100%;
    height: $spacing-xxs;
    bottom: 0;
    left: 0;
    background-color: $color-crimson-500;
    position: absolute;
  }

  &__item a:hover:not([aria-current='page']),
  &__item button:hover {
    background-color: $color-blue-000;
    color: $color-blue-500;

    > svg {
      color: $color-blue-500;
    }

    &::after {
      background-color: $color-blue-500;
    }
  }
}