// Lightning Design System 2.8.0
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';

/**
 * Container that fixes the global header to the top of the viewport,
 * contains global header element
 *
 * @name base
 * @selector .slds-global-header_container
 * @restrict header
 * @support dev-ready
 * @variant
 */
.slds-global-header_container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: $z-index-sticky;

  // Position for when assistive text becomes into focus
  .slds-assistive-text_focus,
  .slds-assistive-text--focus {
    top: 0;
    color: $brand-header-contrast;
    background: $brand-header;
  }
}

/**
 * @selector .slds-global-header
 * @restrict .slds-global-header_container div
 */
.slds-global-header {
  background: $brand-header;
  box-shadow: $shadow-header;
  padding: $spacing-x-small 0;
  height: $height-header;
  align-items: center;

  /**
   * A region within the global header
   *
   * @selector .slds-global-header__item
   * @restrict .slds-global-header div, .slds-global-header ul
   */
  &__item {
    padding: 0 $spacing-medium;
  }

  /**
   * Region that contains the search input, handles sizing
   *
   * @selector .slds-global-header__item_search
   * @restrict .slds-global-header__item:nth-child(2)
   */
  &__item_search,
  &__item--search {
    flex: 0 1 rem(536px);
    min-width: rem(440px);
    padding: 0;
  }

  /**
   * Primary combobox that contains the search input, handles sizing
   *
   * @selector .slds-global-search__form-element div
   * @restrict .slds-global-header__item_search
   */
  .slds-global-search__form-element {

    .slds-input {
      padding-left: ($spacing-large * 2);
    }

    .slds-input__icon_left,
    .slds-input__icon--left {
      left: ($spacing-medium + $spacing-xx-small);
    }

    .slds-icon {
      fill: $color-text-input-icon;
    }
  }

  /**
   * Container of the global header logo
   *
   * @selector .slds-global-header__logo
   * @restrict .slds-global-header__item div
   * @required
   */
  &__logo {
    width: rem(200px);
    height: rem(40px);
    background-image: url($brand-logo-image);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
  }
}