//
// Copyright IBM Corp. 2019, 2021
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

$css--plex: true !default;

@import 'carbon-components/scss/components/ui-shell/header';

:host(#{$prefix}-header) {
  @extend .#{$prefix}--header;
}

:host(#{$prefix}-header-nav) {
  @extend .#{$prefix}--header__nav;

  .#{$prefix}-ce--header__divider {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: rem(24px);
    width: rem(1px);
    background-color: $shell-header-border-01;
  }
}

:host(#{$prefix}-header-nav-item) {
  outline: none;
}

:host(#{$prefix}-header-menu) {
  @extend .#{$prefix}--header__submenu;

  outline: none;
}

:host(#{$prefix}-header-menu-item) {
  outline: none;

  a.#{$prefix}--header__menu-item {
    height: mini-units(6);

    &:hover {
      background-color: $shell-header-bg-04;
      color: $shell-header-text-01;
    }

    &:active {
      background-color: $shell-header-bg-03;
    }
  }
}

:host(#{$prefix}-header-menu-button) {
  display: inline-block;
  display: content;
  outline: none;

  @include carbon--breakpoint('lg') {
    display: none;
  }
}

:host(#{$prefix}-header-menu-button[collapse-mode='fixed']) {
  display: none;
}

:host(#{$prefix}-header-menu-button[collapse-mode='rail']) {
  @include carbon--breakpoint('lg') {
    display: block;
  }
}

:host(#{$prefix}-header-name) {
  display: inline;
  display: content;
  height: 100%;
}