@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(header) {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: var(#{getCssVarName('header-height')}, 56px);
  padding: 0 24px;
  position: relative;
  z-index: 1;

  background-color: getCssVar('color-white');

  @include when(shadow) {
    box-shadow: getCssVar('box-shadow-lv1');
  }

  @include when(border) {
    border-bottom: 1px solid getCssVar('color-neutral-3');
  }

  @include when(fixed) {
    position: fixed;
    z-index: 1999;
    top: 0;
    width: 100%;
  }

  @media #{map.get($breakpoints-spec, 'sm-and-down')} {
    padding: 0 12px;
  }
}

@include b(header-wrapper) {
  height: var(#{getCssVarName('header-height')}, 56px);
}