@use '../utils/constants.scss';
@use '../utils/mixins.scss' as mixins;
@use '../utils/tokens.scss' as tokens;

@import '@viasat/beam-tokens/components/Header';

$headerBaseClass: '#{constants.$prefix}header';
$headerHeight: tokens.$bm-comp-header-size-height;
// $desktopBreakpoint: tokens.$bm-sem-size-breakpoint-xl;
$desktopBreakpoint: 1200px; // TODO: Replace by token when it is available

.#{$headerBaseClass} {
  display: flex;
  z-index: 2;

  border-bottom: tokens.$bm-sem-border-width-md solid
    tokens.$bm-comp-header-color-border;
  background: tokens.$bm-comp-header-color-bg;
  padding-inline: tokens.$bm-comp-header-space-x;
  height: $headerHeight;

  &__menu-button-container {
    display: flex;
    align-items: center;
    padding-inline-start: tokens.$bm-sem-space-25;

    .#{$headerBaseClass}__menu-button {
      margin-inline-end: tokens.$bm-comp-header-space-gap;
      height: fit-content;

      [dir='rtl'] & {
        transform: unset;
      }

      @media screen and (min-width: $desktopBreakpoint) {
        [dir='rtl'] & {
          transform: rotateX(180deg) rotateY(180deg);
        }
      }
    }
  }

  &__content {
    display: flex;
    flex: 1;
    justify-content: space-between;
    gap: tokens.$bm-comp-header-space-gap;
    align-items: center;
  }

  &__nav-container {
    display: flex;
    flex: 1;

    &--mobile-enabled {
      @media screen and (max-width: calc(#{$desktopBreakpoint} - 1px)) {
        display: none;
      }
    }
  }

  &__masthead {
    display: flex;
    gap: tokens.$bm-sem-space-25;
    text-decoration: none;
    margin: #{tokens.$bm-sem-space-50} 0;
    width: fit-content;

    &:focus-visible {
      @include mixins.simulated-inset-outline();
      border-radius: tokens.$bm-sem-radius-focus-md;
    }

    &--content {
      display: flex;
      align-items: center;
      gap: tokens.$bm-sem-space-25;
    }

    &--content:has(&--signal) {
      gap: tokens.$bm-sem-space-75;
    }

    &--logo {
      padding-bottom: tokens.$bm-sem-space-75;
    }

    @media screen and (max-width: $desktopBreakpoint) {
      padding-inline-start: unset;
    }
  }

  &__actions {
    display: flex;
    align-items: center;
    gap: tokens.$bm-comp-header-space-actions-gap;
  }

  &__menu-button-icon__mobile,
  &__menu-button-icon__desktop {
    display: block;
  }
}

.#{constants.$prefix}button__icon-wrap svg {
  &.#{$headerBaseClass} {
    &__menu-button-icon {
      &__mobile {
        display: block;
        @media screen and (min-width: $desktopBreakpoint) {
          display: none;
        }
      }

      &__desktop {
        display: none;
        @media screen and (min-width: $desktopBreakpoint) {
          display: block;
        }
      }
    }
  }
}