/* Button Module */

%button_base {
  cursor: pointer;
  text-decoration: none;
  background-color: transparent;
  padding: 0;
  border: 0;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  white-space: nowrap;
}

%button_brand {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
}

button {
  @extend %button_base;
  background-image: none;
  &:focus, &:active {
    outline: none;
    box-shadow: none;
    border: none;
  }
  &.button-disabled, &[disabled] {
    background-color: #cecece;
    cursor: not-allowed;
    opacity: 0.65;
  }
}

.lato-button {
  @extend %button_base;
  @extend %button_brand;
  background-color: $button-bg;
  border-radius: 100px;
  padding: 12px 40px;
  color: $button-color;
  font-size: 0.875em;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  transform: translateY(0);
  transition: all 0.3s;
  + .lato-button {
    margin-left: 5px;
  }
  &:hover {
    background-color: darken($button-bg, 5%);
  }
  &:active, &:focus {
    outline: none;
  }
  &:active {
    transform: translateY(2px);
    box-shadow: 0 3px 13px rgba($button-bg, 0.30);
  }
  &:focus {
    box-shadow: 0 5px 18px rgba($button-bg, 0.35);
  }
  &[disabled] {
    background-color: #cecece;
    cursor: not-allowed;
    opacity: 0.65;
  }
}

.button-icon {
  display: inline-block;
  margin-right: 12px;
  svg {
    position: relative;
    top: 3px;
    @include size(20px);
    path {
      fill: white;
    }
  }
  + span {
    position: relative;
    top: -2px;
  }
  .button-small & {
    margin-right: 7px;
    svg {
      @include size(15px);
    }
    + span {
      top: 0;
    }
  }
}

.button-green {
  background-color: $success-color;
  &:hover {
    background-color: darken($success-color, 5%);
  }
  &:active {
    box-shadow: 0 3px 13px rgba($button-bg, 0.30);
  }
  &:focus {
    box-shadow: 0 5px 18px rgba($button-bg, 0.35);
  }
}

.button-yellow {
  background-color: $warning-color;
  &:hover {
    background-color: darken($warning-color, 5%);
  }
  &:active {
    box-shadow: 0 3px 13px rgba($yellow-sea, 0.30);
  }
  &:focus {
    box-shadow: 0 5px 18px rgba($yellow-sea, 0.35);
  }
}

.button-red {
  background-color: darken($error-color, 10%);
  &:hover {
    background-color: darken($error-color, 15%);
  }
  &:active {
    box-shadow: 0 3px 13px rgba($scarlet, 0.30);
  }
  &:focus {
    box-shadow: 0 5px 18px rgba($scarlet, 0.35);
  }
}

.button-line {
  background-color: white;
  color: $ship-cove;
  border: 2px solid $ship-cove;
  &:hover {
    background-color: $ship-cove;
    color: white;
  }
  &:active {
    box-shadow: 0 3px 13px rgba($ship-cove, 0.30);
  }
  &:focus {
    box-shadow: 0 5px 18px rgba($ship-cove, 0.35);
  }
}

// In the action bar component
.action-button {
  font-size: em(12px);
  padding: 8px 20px;
  margin-right: 10px;
}

.button-no-radius {
  border-radius: 0;
}

// Sizing

.button-xsmall {
  font-size: em(9px);
  padding: 5px 10px;
}

.button-small {
  font-size: em(12px);
  padding: 8px 20px;
}

.button-medium {
  font-size: em(14px);
  padding: 10px 25px;
}

.button-full {
  display: block;
  width: 100%;
}