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

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

.#{$prefix}-sidenav {
  &__label {
    color: $color-crimson-500;
    font-size: $ts-14;
    font-weight: $font-weight-bold;
    display: block;
    letter-spacing: $spacing-sm * .04;
    text-transform: uppercase;
  }

  &__list {
    flex-basis: 100%;
    list-style-type: none;
    padding-left: 0;
  }

  &__label + &__list {
    margin-top: $spacing-sm;
  }

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

  &__item {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0; // resets Rivet default margin-top
  }

  &__item &__item {
    border-left: $spacing-xxs solid $color-black-100;
  }

  &__item &__list {
    margin-left: $spacing-sm;
    margin-top: $spacing-sm;
    margin-bottom: $spacing-sm;
  }

  &__item-wrapper {
    display: flex;
    flex-basis: 100%;
  }

  &__link {
    font-size: $ts-14;
    color: $color-black-base;
    flex-grow: 1;
    padding-top: $spacing-xs;
    padding-right: $spacing-xs;
    padding-bottom: $spacing-xs;
    padding-left: $spacing-sm;
    position: relative;
    text-decoration: none;

    &[aria-current='page'] {
      background-color: $color-orange-000;
    }

    &[aria-current='page']::before {
      content: '';
      display: block;
      width: .25rem;
      height: 100%;
      background-color: $color-crimson-500;
      position: absolute;
      top: 0;
      left: 0;
    }

    &:focus,
    &:hover {
      color: $color-blue-500;
      text-decoration: underline;
    }
  }

  &__item &__item &__link {
    padding-top: $spacing-xxs * 1.2;
    padding-bottom: $spacing-xxs * 1.2;
  }

  &__item > &__list &__link[aria-current='page']::before {
    margin-left: -$spacing-xxs;
  }

  &__link[aria-current='page'] + &__toggle {
    background-color: $color-orange-000;

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

  &__link[aria-current='page'] + &__toggle:hover,
  &__link[aria-current='page'] + &__toggle:focus {
    color: $color-blue-500;
    background-color: $color-blue-000;

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

  &__toggle {
    color: $color-black-200;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    display: none; // Hide by default if JS doesn't load
    justify-content: center;
    padding: 0 $spacing-xs;

    svg {
      vertical-align: middle;
    }

    &[aria-expanded] {
      display: block;
    }

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

    &:focus {
      background-color: $color-blue-000;
      color: $color-blue-500;
    }

    &:hover {
      background-color: $color-blue-000;
      color: $color-blue-600;
    }

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

  &__link,
  &__toggle {
    &:focus {
      z-index: $z-index-100;
    }
  }
}