@import "variables";

// buttons

.btn {
  @include appearance(none);

  background: transparent;
  border-radius: $radius;
  border: $border-width solid $gray;
  box-shadow: none;
  color: $gray;
  cursor: pointer;
  display: inline-block;
  font-size: 1.05em;
  height: auto;
  line-height: 1;
  margin: 0;
  outline: none;
  padding: 0.76em 1.5em;
  text-align: center;
  text-decoration: none;
  user-select: none;
  white-space: nowrap;

  &:hover {
    border-color: $gray;
  }

  &.solid, &:hover {
    color: $white;
    background: $gray;
  }

  // colors

  &.white {
    color: $white;
    border-color: $white;

    &.solid, &:hover {
      color: $black;
      background: $white;
    }
  }

  &.gray-light {
    color: $gray-light;
    border-color: $gray-light;

    &.solid, &:hover {
      color: $gray;
      background: $gray-light;
    }
  }

  &.gray-dark {
    color: $gray-dark;
    border-color: $gray-dark;

    &.solid, &:hover {
      color: $white;
      background: $gray-dark;
    }
  }

  &.black {
    color: $black;
    border-color: $black;

    &.solid, &:hover {
      color: $white;
      background: $black;
    }
  }

  &.red {
    color: $red;
    border-color: $red;

    &.solid, &:hover {
      color: $white;
      background: $red;
    }
  }

  &.orange {
    color: $orange;
    border-color: $orange;

    &.solid, &:hover {
      color: $white;
      background: $orange;
    }
  }

  &.yellow {
    color: $yellow;
    border-color: $yellow;

    &.solid, &:hover {
      color: $white;
      background: $yellow;
    }
  }

  &.blue {
    color: $blue;
    border-color: $blue;

    &.solid, &:hover {
      color: $white;
      background: $blue;
    }
  }

  &.green {
    color: $green;
    border-color: $green;

    &.solid, &:hover {
      color: $white;
      background: $green;
    }
  }

  // solids

  &.solid {
    &:hover, &:active {
      opacity: 0.8;
    }
  }

  // no outline

  &.no-outline {
    border-color: transparent;
  }

  // sizes

  &.large {
    font-size: 1.2em;
    padding: 0.8em 1.7em;
    word-wrap: normal;
  }

  &.small {
    padding: 0.5em 0.9em;
    font-size: 0.9em;
  }

  &.tiny {
    padding: 0.3em 0.8em;
    font-size: 0.8em;
  }

  // shapes

  &.round {
    border-radius: $round;
  }

  // states

  &:hover {
    transition: $all;
    opacity: 0.8;
  }

  &:disabled, &.disabled, &:disabled:hover, &.disabled:hover {
    cursor: default;
    background-color: $gray-light !important;
    border-color: $gray-light !important;
    color: $gray !important;
    opacity: 0.2;
  }
}

// Adjustments for Firefox

@-moz-document url-prefix() {
  .btn {
    padding: 0.78em 1.5em;
  }
}