/*
 *
 *  IN LOCO
 *  www.inlocomedia.com
 *
 *  Copyright 2016 - All Rights Reserved.
 *
 *  -------- SUPERNOVA ---------
 *       layout sass file
 *  ----------- *** ------------
 *
 */

 @import "sn-layout_variables";
 @import "sn-layout_mixins";

.sn-header {
  position: relative;
  padding: 0 32px;
  height: $layout-header-height;
  @include flexbox();
  align-items: center;
  @media screen and (max-width: $layout-responsive-breakpoint) {
    padding: 0 8px;
  }
  &__title {
    @include flexitem(1,1,auto);
    @include flexbox();
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 0 16px;
    padding: 0;
    height: auto;
    font-size: 20px;
    &__item {
      @include flexitem(0,0,auto);
      padding-right: 8px;
      font-weight: 300;
      font-size: 12px;
      min-height: 16px;
      $layout-header-title-color: #757575;
      $layout-header-breadcrumb-color: #BDBDBD;
      $layout-header-link-color: $product-accent-color;

      a {
        color: $layout-header-breadcrumb-color;
        text-decoration: none;
        &:hover {
          text-decoration: underline;
          cursor: pointer;
          color: $layout-header-link-color;
        }
      }
      &:after {
        margin-left: 8px;
        content: "/";
        color:   $layout-header-breadcrumb-color;
        opacity: .6;
      }
      &:last-child {
        color: $layout-header-title-color;
        font-size: 24px;
        width: 99%;
        a {
          color: $layout-header-title-color;
          text-decoration: none;
          cursor: default;
          pointer-events: none;
        }
        &:after {
          margin-left: 0;
          content: "";
        }
      }
    }
  }
  .sn-nav {
    @extend %nav-light-theme;
    @include flexitem(1, 0, auto);
   }

  .sn-drawer-button + .sn-header__title {
    margin: 8px;
  }

  .sn-drawer__label {
    font-size: 0;
    flex: 0;
    padding: 0;
    width: 0;
    margin: 12px 8px;
    border-right: 1px solid $layout-drawer-divisor-color;
    &:before {
      display: none;
    }
    &:after {
      display: none;
    }
  }

  hr {
    height: 24px;
    width: 0;
    margin: 12px 8px;
    padding: 0;
    border-bottom: 0;
    border-right: 1px solid $layout-drawer-divisor-color;
  }
} // ./sn-header