// В этом файле должны быть стили для БЭМ-блока tabs, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.tabs {
  $block-name: &;

  margin-top: 32px;
  margin-bottom: 32px;

  @media (min-width: $screen-xl) {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  &__links {
    display: flex;
    gap: 15px 0;
    margin: 0;
    padding-left: 16px;
    list-style: none;

    @media (min-width: $screen-xl) {
      gap: 20px 40px;
      padding-left: 32px;
    }

    @media (min-width: $screen-lg) {
      flex-wrap: wrap;
      align-items: flex-end;
      gap: 15px 32px;
    }

    @media (max-width: ($screen-lg - 1)) {
      flex-direction: column;
    }

    .no-js & {
      display: none;
    }
  }

  &__link-wrap {
    &--active {
      #{$block-name}__link {
        border-color: $color-cyan;
        color: $color-cyan;
        cursor: default;
      }
    }
  }

  &__link {
    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 2px solid transparent;
    font: 400 15px/110% $font-family-2;
    letter-spacing: 0.05em;
    color: currentColor;
    text-decoration: none;
    transition: color $transition-time, border-color $transition-time;

    @media (min-width: $screen-xl) {
      padding-bottom: 16px;
      font-size: 18px;
    }

    &:focus {
      outline: 0;
      color: $color-cyan;
    }
  }

  &__content-wrapper {
    display: block;
    margin-top: 40px;
  }

  &__content-item {
    .js & {
      display: none;
    }

    & > *:last-child {
      // stylelint-disable-line  selector-combinator-blacklist
      margin-bottom: 0;
    }

    &--active {
      .js & {
        display: block;
      }
    }
  }

  &--type-1 {
    #{$block-name}__links {
      @media (max-width: ($screen-lg - 1)) {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 32px;
      }
    }
  }
}
