// ============================================================================
// :: Button
// ============================================================================
/**
 * Simple component to render a clickeable button. Using modifiers we manipulate
 * its padding, colors, typography, ...
 */

// ============================================================================
// :: Root
// ============================================================================
%__button {
  display: inline-block;

  padding: 0.8rem 2rem;

  border: none;
  border-radius: $border-radius-base;
  background-color: $primary-color-base;
  color: $text-color-white;

  font-family: $font-family-sora;
  text-decoration: none;
  text-align: center;

  cursor: pointer;

  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    border-color 0.2s ease-in-out;

  // Visible keyboard focus ring
  &:focus {
    outline: 0.2rem solid $primary-color-base;
    outline-offset: 0.2rem;
  }

  @include respond-at($breakpoint-tablet-default) {
    padding: 0.8rem 4rem;
  }

  &[class*="icon"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    &::before {
      margin-right: 1rem;

      font-size: 2rem;

      color: inherit;

      transition: color 0.2s ease-in-out;

      @include respond-to($breakpoint-tablet-default) {
        margin-right: 0.5rem;
      }
    }
  }
}

.a-button {
  @extend %__button;
}

// ============================================================================
// :: Elements
// ============================================================================
.a-button__text {
  font-weight: $font-weight-bold;
  font-size: $font-size-base;
  line-height: $line-height-base;
}

// ============================================================================
// :: Modifiers
// ============================================================================
.a-button--icon-after {
  &[class*="icon"]:before {
    order: 2;

    margin-right: 0;
    margin-left: 1rem;

    @include respond-to($breakpoint-tablet-default) {
      margin-left: 0.5rem;
    }
  }
}

.a-button--secondary {
  background: $secondary-color-base;
}

%__button--outline {
  border: $border-width-base solid $border-color-base;
  background-color: transparent;
  color: $primary-color-base;

  &:hover {
    border-color: $primary-color-base;
  }

  &.a-button--secondary {
    color: $secondary-color-base;
    background-image: none;
    border: $border-width-base solid $border-color-base;

    &:hover {
      border-color: $secondary-color-base;
    }
  }
}

.a-button--outline {
  @extend %__button--outline;
}

%__button--ghost {
  padding: 0.6rem;

  border: none;
  background-color: transparent;

  @include respond-at($breakpoint-tablet-default) {
    padding: 0;
  }
}

.a-button--ghost {
  @extend %__button--ghost;
}

.a-button--theme-grey {
  color: $text-color-medium;
}

.a-button--theme-black {
  color: $text-color-base;
}

.a-button--icon {
  &[class*="icon"]:before {
    margin: 0;

    font-size: 2.4rem;
  }
}

.a-button--fill-space {
  width: 100%;
}

.a-button--mobile-wide {
  @include respond-to($breakpoint-mobile-default) {
    width: 100%;
  }
}

.a-button--tablet-wide {
  @include respond-to($breakpoint-tablet-default) {
    width: 100%;
  }
}

// ============================================================================
// :: States
// ============================================================================
.a-button {

  &:disabled,
  &.is-disabled {
    color: $text-color-disabled;
    background-color: $background-color-disabled;
    background-image: none;
    border: none;

    pointer-events: none;
  }
}

.a-button--outline {

  &:disabled,
  &.is-disabled {
    border: $border-width-base solid $border-color-base;
    background-color: transparent;
  }
}