/**
 * 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
// --------------------------------------------------
// Button styles


.ms-Button {
  @include ms-u-normalize;
  @include ms-baseFont;
  color: $ms-color-neutralPrimary;
  font-size: $ms-font-size-m;
  font-weight: $ms-font-weight-regular;
  background-color: $ms-color-neutralLighter;
  border: 1px solid $ms-color-neutralLighter;
  cursor: pointer;
  display: inline-block;
  height: 32px;
  min-width: 80px;
  padding: 4px 20px 6px;

  &.is-hidden {
    display: none;
  }

  &:hover {
    background-color: $ms-color-neutralLight;
    border-color: $ms-color-neutralLight;

    .ms-Button-label {
      color: $ms-color-black;
    }

    @media screen and (-ms-high-contrast: active) {
      color: $ms-color-contrastBlackSelected;
      border-color: $ms-color-contrastBlackSelected;
    }

    @media screen and (-ms-high-contrast: black-on-white) {
      color: $ms-color-contrastWhiteSelected;
      border-color: $ms-color-contrastWhiteSelected;
    }
  }

  &:focus {
    background-color: $ms-color-neutralLight;
    border-color: $ms-color-themePrimary;
    outline: 1px solid transparent;

    .ms-Button-label {
      color: $ms-color-black;
    }
  }

  &:active {
    background-color: $ms-color-themePrimary;
    border-color: $ms-color-themePrimary;

    .ms-Button-label {
      color: $ms-color-white;
    }
  }

  &:disabled,
  &.is-disabled {
    background-color: $ms-color-neutralLighter;
    border-color: $ms-color-neutralLighter;
    cursor: default;

    .ms-Button-label {
      color: $ms-color-neutralTertiary;
    }

    &:hover,
    &:focus {
      outline: 0;
    }
  }
}

.ms-Button-label {
  color: $ms-color-neutralPrimary;
  font-weight: $ms-font-weight-semibold;
  font-size: $ms-font-size-m;
}

.ms-Button-icon,
.ms-Button-description {
  display: none;
}

//== Modifier: Primary action button
//
.ms-Button.ms-Button--primary {
  background-color: $ms-color-themePrimary;
  border-color: $ms-color-themePrimary;

  .ms-Button-label {
    color: $ms-color-white;
  }

  &:hover {
    background-color: $ms-color-themeDark;
    border-color: $ms-color-themeDark;
  }

  &:focus {
    background-color: $ms-color-themeDark;
    border-color: $ms-color-themeDarker;
  }

  &:active {
    background-color: $ms-color-themePrimary;
    border-color: $ms-color-themePrimary;
  }

  &:disabled,
  &.is-disabled {
    background-color: $ms-color-neutralLighter;
    border-color: $ms-color-neutralLighter;

    .ms-Button-label {
      color: $ms-color-neutralTertiary;
    }
  }
}

//== Modifier: Small button
//
.ms-Button.ms-Button--small {
  min-width: 60px;
  min-height: 24px;
  height: auto;
  padding-top: 0;
  padding-bottom: 4px;

  .ms-Button-label {
    font-weight: $ms-font-weight-regular;
    font-size: $ms-font-size-s;
  }
}

//== Modifier: Hero button
//
.ms-Button.ms-Button--hero {
  align-items: center;
  background-color: transparent;
  border: 0;
  padding: 0;
  position: relative;

  .ms-Button-icon {
    color: $ms-color-themePrimary;
    display: inline-block;
    font-size: $ms-font-size-s;
    margin-right: 4px;
    padding-top: 5px;
    text-align: center;

    .ms-Icon {
      border-radius: 18px;
      border: 1px solid $ms-color-themePrimary;
      font-size: $ms-font-size-s;
      height: 18px;
      line-height: 18px;
      width: 18px;
    }
  }

  .ms-Button-label {
    color: $ms-color-themePrimary;
    font-size: $ms-font-size-xl;
    font-weight: $ms-font-weight-light;
    position: relative;
    text-decoration: none;
    vertical-align: top;
  }

  &:hover,
  &:focus {
    .ms-Button-icon {
      color: $ms-color-themeDark;

      .ms-Icon {
        border: 1px solid $ms-color-themeDark;
      }
    }

    .ms-Button-label {
      color: $ms-color-themeDarker;
    }
  }

  &:active {
    .ms-Button-icon {
      color: $ms-color-themePrimary;

      .ms-Icon {
        border: 1px solid $ms-color-themePrimary;
      }
    }

    .ms-Button-label {
      color: $ms-color-themePrimary;
    }
  }

  &:disabled,
  &.is-disabled {
    .ms-Button-icon {
      color: $ms-color-neutralTertiaryAlt;

      .ms-Icon {
        border: 1px solid $ms-color-neutralTertiaryAlt;
      }
    }

    .ms-Button-label {
      color: $ms-color-neutralTertiary;
    }
  }
}


//== Modifier: Compound button
//
.ms-Button.ms-Button--compound {
  display: block;
  height: auto;
  max-width: 280px;
  min-height: 72px;
  padding: 20px;

  .ms-Button-label {
    display: block;
    font-weight: $ms-font-weight-semibold;
    position: relative;
    text-align: left;
    margin-top: -5px;
  }

  .ms-Button-description {
    color: $ms-color-neutralSecondary;
    display: block;
    font-weight: $ms-font-weight-regular;
    font-size: $ms-font-size-s;
    position: relative;
    text-align: left;
    top: 3px;
  }

  &:hover {
    .ms-Button-description {
      color: $ms-color-neutralDark;
    }
  }

  &:focus {
    border-color: $ms-color-themePrimary;
    background-color: $ms-color-neutralLighter;

    .ms-Button-label {
      color: $ms-color-neutralPrimary;
    }

    .ms-Button-description {
      color: $ms-color-neutralSecondary;
    }
  }

  &:active {
    background-color: $ms-color-themePrimary;

    .ms-Button-description,
    .ms-Button-label {
      color: $ms-color-white;
    }
  }

  &:disabled,
  &.is-disabled {
    .ms-Button-label,
    .ms-Button-description {
      color: $ms-color-neutralTertiary;
    }

    &:focus,
    &:active {
      border-color: $ms-color-neutralLighter;
      background-color: $ms-color-neutralLighter;

      .ms-Button-label,
      .ms-Button-description {
        color: $ms-color-neutralTertiary;
      }
    }
  }
}