//
// Button
//

$default-btn-margin: $spacer-sm;

.btn {
  @extend %base-button;
  @extend %heading-font-bold;
  @include hover-fill($brand-interaction, $button-color, $button-color);

  margin-bottom: $default-btn-margin;
  border: 3px solid $button-border-color;
  border-radius: 0;
  background-color: $button-background;
  padding: $spacer-md $spacer-base;
  font-size: $font-size-sm;

  &--cta {
    border-color: $button-cta-border-color;
    background-color: $button-cta-background;
    color: $button-cta-color;

    &::before {
      position: absolute;
      z-index: 1;
      content: attr(data-label);
    }

    &::after {
      z-index: 0;
      background-color: $button-cta-hover-background;
    }

    &:hover,
    &:focus {
      border-color: $button-cta-hover-border-color;
      color: $button-cta-hover-color;

      &::after {
        width: 100%;
      }
    }
  }

  &--light {
    border-width: 0 0 3px;
    background-color: transparent;
    padding: $spacer-xs 0;
  }

  &--small {
    padding: $spacer-sm $spacer-md;
    font-size: $font-size-base;
  }

  &--condensed {
    padding: $spacer-xs $spacer-sm;
    font-size: $font-size-base;
  }

  &--large {
    padding: $spacer-md $spacer-lg;
    font-size: $font-size-md;
  }

  &--inverted {
    @include hover-fill($brand-interaction, $button-inverted-hover-color, $button-inverted-hover-color);
    border-color: $button-inverted-border-color;
    color: $button-inverted-color;
  }

  &--icon {
    border: 0;
    background-color: transparent;
    padding: $spacer-xxs;
  }

  & + .btn {
    margin-left: $default-btn-margin;
  }
}