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

.logo {
  $block-name: &;

  display: flex;
  justify-content: space-between;
  align-items: center;
  text-decoration: none;

  @media (min-width: $screen-xxl) {
  }

  @media (min-width: $screen-xl) {
    width: 393px;
  }

  @media (min-width: $screen-lg) {
    width: 377px;
  }

  &:focus {
    outline: 0;
  }

  &__first {
    position: relative;
    font: 400 15px/130% $font-family-2;
    text-transform: uppercase;
    color: $color-d-blue;
    text-align: center;

    @media (min-width: $screen-xxl) {
    }

    @media (min-width: $screen-xl) {
    }

    @media (min-width: $screen-lg) {
      font-size: 21px;
    }

    span {
      display: block;
      margin-top: 4px;
      font-size: 30px;
      letter-spacing: 0.03em;

      @media (min-width: $screen-xxl) {
      }

      @media (min-width: $screen-xl) {
      }

      @media (min-width: $screen-lg) {
        font-size: 41px;
      }
    }

    &::after {
      content: "";
      position: absolute;
      right: -26px;
      top: 3px;
      width: 2px;
      height: 43px;
      background-color: #d6dae5;

      @media (min-width: $screen-xxl) {
      }

      @media (min-width: $screen-xl) {
        right: -35px;
      }

      @media (min-width: $screen-lg) {
        height: 60px;
      }
    }
  }

  &__second {
    width: 122px;
    font: 300 12px/100% $font-family;
    color: $color-d-grey;

    @media (min-width: $screen-xxl) {
    }

    @media (min-width: $screen-xl) {
      font-size: 14px;
    }

    @media (min-width: $screen-lg) {
      width: 170px;
    }
  }

  &--type-1 {
    flex-direction: column;
    align-items: flex-start;
    width: auto !important;

    #{$block-name}__first {
      margin-bottom: 29px;
      font-size: 21px;

      &::after {
        content: none;
      }

      span {
        font-size: 41px;
      }
    }

    #{$block-name}__second {
      @media (max-width: ($screen-xl - 1)) {
        width: auto;
      }
    }
  }
}
