@use "sass:math";

@import '~styles/config';

.toggleItem {
  @include reset-anchor;
  margin-right: 30px;

  border-bottom-width: 2px;
  border-bottom-style: solid;
  border-bottom-color: $color-grey100;

  transition: border-color 300ms ease-in-out;

  @media (min-width: $min-tablet) {
    margin-right: -15px;
    padding-right: 15px;

    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: $color-grey100;
    border-bottom: 0;
  }

  &.selected,
  &:hover,
  &:focus {
    @include colorify('border-bottom-color');
    @media (min-width: $min-tablet) {
      @include colorify('border-right-color');
    }
  }

  &.selected {
    cursor: default;
  }

  &:last-child {
    @media (max-width: $max-tablet) {
      margin: 0;
    }
  }

  &__title {
    @include reset-heading;
    @include responsive-font(15, 17);

    display: block;
    padding: $gutter * 0.5 0;

    text-decoration: none;
    font-family: $font-heading;
    font-weight: 500;
    line-height: math.div(60, 46);
    white-space: normal;
    color: $color-dark;

    transition: color 300ms ease-in-out;

    &.selected,
    &:hover,
    &:focus {
      @include colorify('color');
    }

    @media (min-width: $min-tablet) {
      padding: 20px 0;
    }
  }
}