$bsi-header_height: 12.5rem;
$bsi-header-mobile_height: $bsi-header_height;

:root {
  --bsi-header_height: #{$bsi-header_height};
  --bsi-header-mobile_height: #{$bsi-header-mobile_height};
}

.#{$ns}header {
  $root: &;

  background-color: $white;

  & {
    font-family: $font-family-sans-serif;
    width: 100%;
    height: var(--bsi-header-mobile_height);
    background-color: $bsi-color_white;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      @include media-breakpoint-down(lg) {
        width: rem(40);
      }
    }

    &:before {
      content: '';
      width: 100%;
      height: 3px;
      position: absolute;
      bottom: 0;
      pointer-events: none;
    }

    &--contact {
      font-size: rem(13);

      @include media-breakpoint-up(lg) {
        font-size: rem(18);
      }
    }

    @include media-breakpoint-up(lg) {
      height: var(--bsi-header_height);
    }
  }

  &__container {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    @include media-breakpoint-between(lg, xxl) {
      width: calc(100vw - 100px);
    }
  }
}