/**
 * Office UI Fabric JS 1.5.0
 * The JavaScript front-end framework for building experiences for Office 365.
 **/
// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.

//
// Office UI Fabric
// --------------------------------------------------
// Command Bar styles

$CommandBar-height: 40px;
$CommandBar-md-height: 44px;
$CommandBar-iconSize: 18px;
$CommandBar-sideAreaWidthsm: 128px;
$SearchBox-width: 220px;
$CommandBarItem-height: $CommandBar-height;
$red: #FF0000;

@mixin highContrastBorder($color) {
    border-left: 1px solid $color;
    border-right: 1px solid $color;
}

.ms-CommandBar {
  @include ms-baseFont;
  background-color: $ms-color-neutralLighter;
  height: $CommandBar-height;
  white-space: nowrap;
  padding-left: 0;
  border: 0;
  position: relative;

  &:focus {
    outline: none;
  }

  .ms-CommandButton--actionButton {
    border-right: 1px solid $ms-color-neutralLight;
  }

  //== CommandBar -> ms-Button specific changes
  //
  .ms-Button {
    height: 100%;

    &.ms-Button--noLabel {
      .ms-Button-icon {
        padding-right: 0;
      }
    }

    &.is-hidden {
      display: none;
    }
  }

  .ms-SearchBox,
  .ms-SearchBox-field,
  .ms-SearchBox-label {
    height: 100%;
  }

  .ms-SearchBox {
    display: inline-block;
    vertical-align: top;
    transition: margin-right $ms-duration2;
  }

  .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed.is-active {
    width: $SearchBox-width;

    @media only screen and (max-width: $ms-screen-md-max) {
      width: 100%;
      position: absolute;
      left: 0;
      right: 0;
      z-index: $ms-zIndex-front;
    }
  }

  .ms-CommandBar-overflowButton {
    .ms-CommandButton-button {
      font-size: 18px;
      padding: 0 11px;
    }
  }

  // Search is collapsed unless activated and its only
  // collapsed < L break points

  @media only screen and (min-width: $ms-screen-xl-min) {
    .ms-SearchBox {
      margin-right: 24px;
    }
  }

  @media only screen and (max-width: $ms-screen-md-max) {
    height: $CommandBar-md-height;
  }

  @media only screen and (min-width: $ms-screen-lg-min) {

    &.search-expanded {
      .ms-SearchBox {
        margin-right: 8px;
      }
    }

    .ms-SearchBox.ms-SearchBox--commandBar.is-collapsed {
      transition: none;
    }
  }
}

.ms-CommandBar-mainArea {
  overflow-x: hidden;
  display: block;
  height: 100%;
  overflow: hidden;
}

.ms-CommandBar-sideCommands {
  float: right;
  text-align: right;
  width: auto;
  padding-right: 4px;
  height: 100%;

  .ms-Button:last-child {
    margin-right: 0;
  }

  @media only screen and (min-width: $ms-screen-lg-min) {
    min-width: $CommandBar-sideAreaWidthsm;
  }

  @media only screen and (min-width: $ms-screen-xl-min) {
    padding-right: 20px;
  }
}