.header {
align-items: center; background: $scooter; display: flex; height: 96px; overflow: hidden; width: 100%; @media screen and (max-width: $tablet) { background: $white; height: 56px; } .container { width: 1200px; align-items: center; display: flex; justify-content: space-between; } &__brand { height: 40px; @media screen and (max-width: $tablet) { height: 24px; } } &__menu-item { display: none; padding: 12px; &--close { display: none; } @media screen and (max-width: $tablet) { display: initial; } } &__list { margin: 0 45px; display: flex; align-items: center; justify-content: space-around; width: 100%; list-style: none; padding: 0; @media screen and (max-width: $tablet) { background: $white; display: none; flex-direction: column; left: 0; position: absolute; top: 56px; width: 100vw; margin: 0; &--show { box-shadow: 0 2px 2px 0 rgba(42, 34, 100, 0.24); display: flex; overflow: hidden; } } } &__action-container { display: flex; @media screen and (max-width: $tablet) { display: block; } } &__item { height: 32px; margin: 0 20px; position: relative; &::after { border-radius: 2px; bottom: 0; content: ""; display: inline-block; height: 4px; left: 0; position: absolute; width: 90%; @media screen and (max-width: $tablet) { display: none; } } &--active .header__link, &--active .header__link:visited { color: $veloe; } &--active::after { background: $white; } &--with-border { background: $scooter; border-radius: 6px; border: 2px solid $veloe; height: 48px; line-height: 48px; margin: 0 8px; min-width: 104px; text-align: center; .header__link, .header__link:visited { color: $veloe; } @media screen and (max-width: $tablet) { background: none; border-radius: 0; border: 0; line-height: 1; text-align: left; .header__link, .header__link:visited { color: $cadetBlue; } } } &--btn { background: $veloe; border-radius: 6px; height: 53px; line-height: 54px; margin: 0 8px; min-width: 104px; text-align: center; .header__link, .header__link:visited { color: $white; } @media screen and (max-width: $tablet) { background: none; border-radius: 0; border: 0; line-height: 1; text-align: left; .header__link, .header__link:visited { color: $cadetBlue; } } } @media screen and (max-width: $tablet) { height: auto; margin: 0 auto; width: 94vw; &:not(:last-child) { box-shadow: 0 1px 0 0 $athensGray; } } @media screen and (max-width: $mobile) { width: 87vw; } } &__link, &__link:visited { color: $white; font-family: $ft-open-sans; font-size: 14px; font-weight: bold; line-height: 1.57; text-decoration: none; @media screen and (max-width: $tablet) { color: $cadetBlue; display: inline-block; padding: 20px; width: 100%; } }
}