.btn {
  display: inline-block;
  padding: rem(8px 14px) !important;
  font-weight: $font-medium !important;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: rem(.5px);
  background-color: $color-primary;
  border: solid rem(1px) $color-primary !important;
  border-radius: rem(6px);
  transition: color .05s cubic-bezier(.18, .89, .32, 1.28);

  &:hover,
  &:focus {
    color: #fff;
    background-color: darken($color-primary, 5%);
  }

  &--secondary {
    color: #fff;
    background-color: $color-secondary;
    border: 1px solid $color-secondary !important;

    &:hover,
    &:focus {
      color: #fff;
      background-color: darken($color-secondary, 5%);
    }
  }

  &--tertiary {
    color: $color-font;
    background-color: #fff;
    border: 1px solid #ebebeb !important;

    &:hover,
    &:focus {
      color: $color-font;
      background-color: #f4f5f8;
    }
  }

  &--white {
    background: none;
    border: 1px solid #fff !important;

    &:hover,
    &:focus {
      color: $color-font;
      background-color: #f4f5f8;
    }
  }
}

.big-buttons {
  .btn {
    width: rem(310px);
    max-width: 100%;
  }
}