@import '~@kaizen/design-tokens/sass/shadow';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/layout';

@layer kz-components {
  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-sm $spacing-md;
  }

  .headerLeft {
    flex: 0 0 50%;
  }

  .headerRight {
    flex: 0 0 50%;
    display: flex;
    justify-content: flex-end;
    gap: $spacing-8;
  }

  .logoLink {
    display: flex;
    align-items: center;
    padding: calc(#{$spacing-sm} - #{$border-solid-border-width}) 0;
    max-inline-size: 133px;

    > img {
      inline-size: 100%;
    }
  }

  .logoContainer {
    background: $color-white;
    box-sizing: border-box;
    inline-size: 48px;
    block-size: 48px;
    padding: $spacing-xs;
    border-radius: $border-solid-border-radius;
    box-shadow: $shadow-small-box-shadow;

    > img {
      inline-size: 100%;
      border-radius: 4px;
    }
  }

  .headerCustomerFocused {
    display: grid;
    justify-items: center;
    grid-template-columns: auto auto;
    padding: $spacing-lg $spacing-md;
  }

  .headerCustomerFocused .logoContainer {
    inline-size: 48px;
    block-size: 48px;
    padding: $spacing-xs;
    margin-inline-end: auto;
  }

  .headerCustomerFocused .rightAlign {
    margin-inline-start: auto;
  }

  @media (min-width: $layout-breakpoints-large) {
    .headerCustomerFocused {
      align-items: flex-start;
      grid-template-columns: 1fr auto 1fr;
    }

    .headerCustomerFocused .logoContainer {
      grid-column-start: 2;
      inline-size: 84px;
      block-size: 84px;
      padding: $spacing-sm;
    }
  }

  .fakeNav {
    background: $color-purple-600;
    padding: $spacing-md;
    display: flex;
    align-items: center;
  }
}