/// DO NOT change this ///
$include-core-layout-header: true;

@mixin header-height($height) {
  #{$header} {
    &.#{$header-fixed} {
      + * {
        margin-top: $height;
        @if $include-core-component-table == true {
          .#{$table-header-sticky} {
            thead, .#{$thead} {
              th, .#{$th} {
                top: $height;
              }
            }
          }
        }
      }
    }
  }
}

@mixin header-position($left: false, $right: false, $top: false, $bottom: false) {
  #{$header}, &#{$header} {
    &.#{$header-fixed} {
      @if $left != false {
        margin-left: 0;
        left: $left;
        .#{$menu-mobile} {
          left: $left;
        }
      }
      @if $right != false {
        margin-right: 0;
        right: $right;
        .#{$menu-mobile} {
          right: $right;
        }
      }
      @if $top != false {
        margin-top: 0;
        top: $top;
      }
      @if $bottom != false {
        margin-bottom: 0;
        bottom: $bottom;
      }
    }
  }
}

#{$header} {
  @include display-flex;
  height: $header-height;
  z-index: $header-zindex;
  position: relative;
  &.#{$header-fixed} {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    + * {
      border-top: $header-height solid transparent;
    }
  }
  .#{$header-content} {
    background: $header-background;
    color: $header-color;
    @include display-flex;
    @include justify-content(space-between);
    @include align-items(center);
    @include flex(1 1 auto);
    min-width: 0;
    padding: $header-horizontal-padding $header-vertical-padding;
    .#{$content-holder} {
      max-width: 100%;
    }
    nav {
      #{$menu-item-anchor} {
        vertical-align: middle;
        &:not(.button) {
          color: inherit;
        }
      }
      &.#{$items} {
        margin-top: 0;
        display: block;
        > * {
          margin-top: 0;
        }
      }
    }
  }
  @if $include-core-component-menu == true {
    @media (max-width: $mobile-menu-max-width) {
      .#{$menu-mobile} {
        display: none;
        position: fixed;
        top: $header-height;
        left: 0;
        right: 0;
        max-height: calc(100vh - #{$header-height});
        overflow-y: auto;
        overflow-x: hidden;
      }
      input {
        &.#{$toggle} {
          display: none;
        }
        &:checked {
          + .#{$menu-mobile} {
            display: block;
          }
        }
      }
    }
  }
}