@use "system/breakpoints";
@use "system/colors";
@use "system/icon-map";
@use "system/typography";
@use "system/spacing";
@use "components/links/link/mixins";

.ods-toc {
  @extend %ods-padding-left-0;
  @extend %ods-text--size-kilo, %ods-text--size-juliett-breakpoint-large;
  @include typography.weight("medium");

  &__item {
    @extend %ods-padding-vertical-4;
    @extend %ods-padding-horizontal-3;

    border-top: 2px solid colors.$gray;
  }

  &__item:last-of-type {
    border-bottom: 2px solid colors.$gray;
  }

  &__link {
    @include mixins.states;

    text-decoration: none;

    &:hover,
    &:focus,
    &:active {
      text-decoration: underline;
    }

    &:focus-visible {
      box-shadow: 0 0 0 0.125rem colors.$blue-state;
      outline-offset: 0.125rem;
      outline: 0.25rem solid colors.$purple-light;
    }
  }

  &__icon {
    @extend %ods-text--size-hotel, %ods-text--size-golf-breakpoint-large;

    line-height: 1.5rem;
    margin-right: 0.25rem;
    display: inline-block;
    vertical-align: top;

    @include breakpoints.large {
      line-height: 1.75rem;
    }
  }
}