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

.page-header {
  $block-name: &;

  background-color: #fff;

  &__inner {
  }

  &__first {
    padding: 7px 0;
    border-bottom: 1px solid #d6dae6;
    background-color: #eef0f7;

    @media (min-width: $screen-xl) {
      padding: 16px 0;
    }
  }

  &__first-inner {
  }

  &__second {
    padding: 29px 0 24px;
    border-bottom: 1px solid #d6dae6;

    @media (min-width: $screen-xl) {
      padding-top: 38px;
      padding-bottom: 24px;
    }
  }

  &__second-inner {
  }

  &__s-first {
    @media (min-width: $screen-lg) {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .search {
      display: none;

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

  &__s-first-right {
    display: flex;
    align-items: center;

    @media (max-width: ($screen-lg - 1)) {
      margin-top: 24px;
      justify-content: space-between;
    }
  }

  &__s-first-r-left {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    .link {
      margin-top: 4px;
    }
  }

  &__s-first-r-right {
    display: flex;
    gap: 15px;

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

    @media (min-width: $screen-lg) {
      margin-left: 30px;
    }
  }

  &__s-second {
    margin-top: 24px;

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

    @media (min-width: $screen-lg) {
      margin-top: 28px;
    }

    @media (max-width: ($screen-xl - 1)) {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .burger-btn {
      display: inline-flex;
      padding-left: 16px;
      padding-right: 16px;

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

    .search {
      display: flex;

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

      .field-text {
        width: 168px;

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