$frost-color-button-primary: $frost-color-white !global;
$frost-color-button-primary-bg: linear-gradient(lighten($frost-color-blue-1, 14), $frost-color-blue-1) !global;
$frost-color-button-primary-hover-bg: $frost-color-blue-3 !global;
$frost-color-button-primary-active: $frost-color-blue-4 !global;
$frost-color-button-primary-active-bg: #1e9de5 !global;

$frost-color-button-secondary: $frost-color-blue-1 !global;
$frost-color-button-secondary-bg: $frost-color-white !global;
$frost-color-button-secondary-border: $frost-color-blue-1 !global;
$frost-color-button-secondary-active: $frost-color-blue-3 !global;
$frost-color-button-secondary-active-bg: #e7eef3 !global;
$frost-color-button-secondary-hover-bg: rgba($frost-color-blue-1, .1) !global;

$frost-color-button-tertiary: $frost-color-blue-1 !global;
$frost-color-button-tertiary-bg: inherit !global;
$frost-color-button-tertiary-hover-bg: rgba($frost-color-blue-1, .05) !global;
$frost-color-button-tertiary-active: $frost-color-blue-3 !global;
$frost-color-button-tertiary-active-bg: #e7eef3 !global;
$frost-button-small-padding: 10px;
$frost-button-medium-padding: 20px;
$frost-button-large-padding: 20px;

// info-bar style
$frost-color-button-info-bar-bg: $frost-color-white;
$frost-color-button-info-bar-bg-hover: rgba($frost-color-blue-1, .05);
$frost-color-button-info-bar-focus: 0 1px 6px rgba($frost-color-blue-1, .75);
$frost-color-button-info-bar-active:  rgba($frost-color-blue-1, .1);

// in-line style
$frost-color-button-in-line-darken-1: darken($frost-color-blue-1, 8);
$frost-color-button-in-line-darken-2: darken($frost-color-blue-1, 15);

$frost-color-button-info-content-subtext-color: rgba($frost-color-white, .8);

.frost-button {
  padding: 0;
  border: 0;
  border-radius: 2px;
  background-color: transparent;
  color: $frost-color-white;
  font-family: $frost-font-family;
  cursor: pointer;

  &:focus,
  &:active {
    outline: none;
  }

  &:focus {
    box-shadow: 0 1px 6px transparentize($frost-color-blue-1, .25);
  }

  &.disabled {
    opacity: .25;
    // In Firefox, the click on the app bar was not detected - added this to enable it.
    // From https://developer.mozilla.org/en/docs/Web/CSS/pointer-events
    //     The CSS property pointer-events allows authors to control under what circumstances (if any)
    //     a particular graphic element can become the target of mouse events.
    //     none: The element is never the target of mouse events; however, mouse events may target
    //            its descendant elements if those descendants have pointer-events set to some other value.
    //            In these circumstances, mouse events will trigger event listeners on this parent element
    //            as appropriate on their way to/from the descendant during the event capture/bubble phases.
    pointer-events: none;
  }

  &.hidden {
    visibility: hidden;
  }

  // ----------------------
  // Priority based coloring
  // ----------------------

  // priority = 'primary'
  &.primary {
    background: $frost-color-button-primary-bg;
    color: $frost-color-button-primary;

    &:hover {
      &:not(.disabled) {
        background: $frost-color-button-primary-hover-bg;
      }
    }

    &:focus {
      &:not(.disabled) {
        border: solid 2px $frost-color-blue-4;
      }

      &.small {
        padding: 0 $frost-button-small-padding - 2px;
      }

      &.medium {
        padding: 0 $frost-button-medium-padding - 2px;
      }

      &.large {
        padding: 0 $frost-button-large-padding - 2px;
      }
    }

    &:active {
      &:not(.disabled) {
        background: $frost-color-button-primary-active-bg;
        color: $frost-color-button-primary-active;

        .text {
          opacity: .5;
        }
      }
    }

    svg {
      fill: $frost-color-button-primary;
    }
  }

  // priority = 'secondary'
  &.secondary {
    border: 2px solid $frost-color-button-secondary-border;
    background-color: $frost-color-button-secondary-bg;
    color: $frost-color-button-secondary;

    &:hover {
      &:not(.disabled) {
        background-color: transparentize($frost-color-blue-1, .9);
      }
    }

    &:active {
      &:not(.disabled) {
        background: $frost-color-button-secondary-active-bg;
        color: $frost-color-button-secondary-active;

        .text {
          opacity: .5;
        }
      }
    }

    svg {
      fill: $frost-color-button-secondary;
    }
  }

  // priority = 'tertiary'
  &.tertiary {
    background-color: $frost-color-button-tertiary-bg;
    color: $frost-color-button-tertiary;

    &:hover {
      &:not(.disabled) {
        background-color: $frost-color-button-tertiary-hover-bg;
      }
    }

    &:focus {
      &:not(.disabled) {
        outline: 0;
        box-shadow: 1px solid $frost-color-blue-4;
      }
    }

    &:active {
      &:not(.disabled) {
        background: $frost-color-button-tertiary-active-bg;
        color: $frost-color-button-tertiary-active;

        .text {
          opacity: .5;
        }
      }
    }

    svg {
      fill: $frost-color-button-tertiary;
    }
  }

  // ----------------------
  // Sizes
  // ----------------------

  // size = 'large'
  &.large {
    height: 50px;
    padding: 0 $frost-button-large-padding;
    font-size: $frost-font-l;

    .frost-icon {
      width: 35px;
      height: 35px;
    }
  }

  // size = 'medium'
  &.medium {
    height: 40px;
    padding: 0 $frost-button-medium-padding;
    font-size: $frost-font-m;

    .frost-icon {
      width: 30px;
      height: 30px;
    }
  }

  // size = 'small'
  &.small {
    height: 30px;
    padding: 0 $frost-button-small-padding;
    font-size: $frost-font-s;

    .frost-icon {
      width: 20px;
      height: 20px;
    }
  }

  // ----------------------
  // Design based coloring
  // ----------------------

  // design = 'tab'
  &.tab {
    height: 35px;
    padding: 0 15px;
    box-shadow: none;
    cursor: default;

    .text {
      color: $frost-color-grey-5;
      font-family: $frost-font-family;
      font-size: $frost-font-m;
    }

    &:hover {
      background-color: $frost-color-button-tertiary-hover-bg;
    }
  }

  // design = 'info-bar'
  &.info-bar {
    display: inline;
    flex-direction: column;
    align-items: center;
    width: 75px;
    height: 60px;
    margin-right: 5px;
    padding: 0 5px;
    background-color: $frost-color-button-info-bar-bg;
    color: $frost-color-blue-1;

    .frost-icon  {
      width: 30px;
      height: 30px;
      margin-left: -10px;
      padding-bottom: 0;
    }

    .text {
      display: inline-block;
      margin-top: -5px;
      padding: 5px 1px 2px;
      color: $frost-color-blue-1;
      font-size: $frost-font-s;
      line-height: 1;
    }

    > .content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      box-sizing: border-box;

      .text {
        text-align: center;
        vertical-align: middle;
      }

      .svg {
        margin-bottom: 5px;
        margin-left: 10px;

        .frost-icon {
          vertical-align: middle;
        }
      }
    }

    &:hover {
      &:not(.disabled) {
        background-color: $frost-color-button-info-bar-bg-hover;
        box-shadow: none;
      }
    }

    &:focus {
      &:not(.disabled) {
        outline: 0;
        box-shadow: $frost-color-button-info-bar-focus;
      }
    }

    &:active {
      &:not(.disabled) {
        background-color: $frost-color-button-info-bar-active;
        color: $frost-color-blue-1;
        box-shadow: none;
        opacity: .7;
      }
    }
  }

  // design = 'in-line'
  &.in-line {
    .text {
      color: $frost-color-blue-1;
    }

    &:hover {
      &:not(.disabled) {
        .text {
          color: $frost-color-button-in-line-darken-1;
        }
      }
    }

    &:focus {
      &:not(.disabled) {
        outline: 0;
        box-shadow: none;

        .text {
          color: $frost-color-button-in-line-darken-1;
        }
      }
    }

    &:active {
      &:not(.disabled) {
        .text {
          color: $frost-color-button-in-line-darken-2;
          box-shadow: none;
        }
      }
    }

    &.disabled {
      background: none;
      box-shadow: none;
      opacity: .3;
    }
  }

  // design = 'app-bar'
  &.app-bar {
    display: inline;
    flex-direction: row;
    align-items: center;
    height: 50px;
    padding: 0 20px;
    background: $frost-color-night-2;

    > .icon-text {
      display: flex;
      flex-direction: row;
      align-items: center;

      .text {
        margin-left: 20px;
      }
    }

    .frost-icon  {
      width: 35px;
      height: 35px;
      padding-bottom: 0;
    }

    .text {
      display: flex;
      color: $frost-color-white;
    }

    .svg {
      order: 2;
      margin-bottom: 10px;
      margin-left: 10px;
      color: inherit;

      .frost-icon {
        vertical-align: middle;
      }
    }

    &:focus {
      outline: 0;
      box-shadow: none;
    }
  }

  // Content - text
  &.text {
    // Deprecated format
    vertical-align: middle;
  }

  > .text {
    vertical-align: middle;
  }

  // Content - icon
  &.icon {
    // Deprecated format
    display: inline-flex;
  }

  > .icon {
    display: flex;
    align-items: center;
    height: 100%;
  }

  // Content - text-info
  > .icon-text {
    display: flex;
    flex-direction: row;
    align-items: center;

    .text {
      margin-left: 10px;
    }
  }

  &:active {
    > .info {
      background-color: $frost-color-button-primary-bg;
      color: $frost-color-button-primary-active;

      .content {
        .text,
        .subtext {
          color: $frost-color-button-primary-active;
        }
      }
    }
  }

  // Content - info
  > .info {
    display: flex;
    align-items: center;

    .content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding-left: 10px;

      .text {
        color: $frost-color-button-primary;
        font-size: $frost-font-m;
      }

      .subtext {
        color: $frost-color-button-info-content-subtext-color;
        font-size: $frost-font-xs;
      }
    }
  }

  &.vertical {
    height: auto;

    &.extra-large {
      padding: 19px 15px;

      .icon {
        height: 22px;
      }
    }

    &.large {
      padding: 16px 20px;

      .icon {
        height: 18px;
      }
    }

    &.medium {
      padding: 13px 20px;

      .icon {
        height: 14px;
      }
    }

    &.small {
      padding: 9px 10px;

      .icon {
        height: 12px;
      }
    }

    .frost-icon + .content,
    .frost-icon + .text {
      margin-top: 8px;
    }

    .icon-text {
      flex-direction: column;

      .text {
        margin-left: 0;
      }
    }
  }
}