// Lightning Design System 2.24.3
// 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;

  /**
   * 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: var(--slds-g-color-neutral-base-50, #{$color-text-input-icon});
    }
  }
}

/**
  * A region within the global header
  *
  * @selector .slds-global-header__item
  * @restrict .slds-global-header div, .slds-global-header ul
  */
.slds-global-header__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)
  */
.slds-global-header__item_search,
.slds-global-header__item--search {
  flex: 0 1 rem(536px);
  min-width: rem(440px);
  padding: 0;
}

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