Button: Icon

$btn__size: rem(24);

// Default Button
// ----------------------------------------
.btn {
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin: 0 0 rem(18);
  padding: rem(8) rem(12);
  background-color: $color__bright;
  border: rem(1) solid $color__bright;
  text-decoration: none;
  text-align: center;
  font-size: rem(16);
  font-weight: $font-weight--medium;
  line-height: 1.375;
  text-transform: uppercase;
  color: $color__cta;
  user-select: none;
  appearance: none;
  transition: all 0.1s ease-in-out;

  > * {
    pointer-events: none;
  }

  .icon {
    width: $btn__size;
    height: $btn__size;
    vertical-align: top;
    pointer-events: none;
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 rem(4) 0 rgba($color__brand--one, 1);
  }

  &:hover {
    color: $color__cta;
    background-color: $color__grey--6;
    border-color: $color__grey--6;
    box-shadow: 0 rem(1) rem(2) 0 rgba($color__dark, 0.25);
  }

  &:active,
  &.btn--active {
    transition: none;
    color: $color__grey--54;
    background-color: $color__grey--6;
    border-color: $color__grey--6;
    box-shadow: none;
  }

  &:disabled {
    color: $color__grey--38;
    cursor: not-allowed;

    &:hover {
      color: $color__grey--38;
      background-color: $color__bright;
      border-color: $color__bright;
      box-shadow: none;
    }
  }
}

// Primary Button
// ----------------------------------------
.btn--primary {
  color: $color__bright;
  background-color: $color__brand--one;
  border-color: $color__brand--one;

  &:focus {
    border-color: $color__bright;
  }

  &:hover {
    color: $color__bright;
    background-color: $color__cta-hover;
    border-color: transparent;
  }

  &:active,
  &.btn--active {
    color: $color__grey--54;
    background-color: $color__bright;
    border-color: $color__bright;
  }

  &:disabled {
    background-color: $color__grey--6;
    border-color: $color__grey--6;

    &:hover {
      background-color: $color__grey--6;
      border-color: $color__grey--6;
      box-shadow: none;
    }
  }
}

// Secondary Button
// ----------------------------------------
.btn--secondary {
  color: $color__grey--54;

  &:hover {
    color: $color__grey--54;
  }

  &:active,
  &.btn--active {
    color: $color__brand--one;
    background-color: $color__grey--6;
    border-color: $color__grey--6;
  }
}

// Only Icon Style
// ----------------------------------------
.btn--icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.btn--icon-left {
  margin-left: rem(-4);
  margin-right: rem(4);
}

.btn--icon-right {
  margin-left: rem(4);
  margin-right: rem(-4);
}

// Small Style
// ----------------------------------------
.btn--small {
  padding-top: rem(4);
  padding-bottom: rem(4);
}

// Expanded Style
// ----------------------------------------
.btn--expanded {
  width: 100%;
}