@use "sass:map";
@import "../../../foundations/sass/all";

.header {
  box-shadow: 0 5px 5px 0 $header-shadow-color;

  &__top {
    background-color: $header-top-bg-color;

    @include padding-horizontal(sm);

    &__container {
      align-items: center;
      display: flex;
      height: px-to-rem(35);
      justify-content: space-between;
      min-width: px-to-rem(480);

      &__info-box {
        display: flex;
        gap: map.get($spacing, "xxl");
        min-width: fit-content;
      }

      &__link:link,
      &__link:visited {
        color: $header-bottom-bg-color;
        font-size: $fs-xs;
        text-decoration: none;
        text-transform: uppercase;

        &:hover,
        &:active {
          text-decoration: underline;
        }
      }
    }
  }

  &__bottom {
    background-color: $header-bottom-bg-color;

    @include padding-horizontal(sm);

    &__container {
      align-items: center;
      display: flex;
      height: px-to-rem(100);
      justify-content: space-between;

      &__info-box {
        align-items: center;
        display: flex;
        gap: map.get($spacing, "xl");

        &__link:link,
        &__link:visited {
          background-color: $header-top-bg-color;
          border-radius: $br-sm;
          color: $header-bottom-bg-color;
          font-size: $fs-md;
          font-weight: $fw-bold;
          text-decoration: none;
          text-transform: uppercase;

          @include padding-horizontal(sm);
          @include padding-vertical(xxs);

          &:hover,
          &:active {
            background-color: $header-bottom-link-shade-color;
          }
        }
      }
    }
  }

  @media (width <= 768px) {
    display: none;
  }
}
