.btn {
  font-size: rem-calc(16);
  font-weight: $font-weight-bolder;
  line-height: 1.5;
  text-transform: uppercase;
  padding: $padding-padding-xs $padding-padding-lg;
  border-radius: $cards-border-radius-radius-xxs;
  border: 0;

  i {
    margin-top: rem-calc(-8);
    margin-right: rem-calc(8);
  }
}

.btn.btn-primary {
  background-image: url('../images/arrow-right-long.svg');
  background-repeat: no-repeat;
  background-position: right 24px center;
  padding-right: rem-calc(48);
}

.btn.btn-secondary {
  &:hover {
    background-color: rgba(255, 255, 255, 0.90);
    box-shadow: none;
  }

  &:active {
    color: $button-secondary-text-hover;
    background-color: $button-secondary-background;
    box-shadow: none;
  }

  &:focus {
    background-color: rgba(255, 255, 255, 0.90);
    box-shadow: 0 0 0 3px transparentize($color: $button-primary-background-hover, $amount: 0.5);
  }
}

.btn.btn-outlined {
  text-decoration: none;
  box-shadow: 0 0 0 1px $button-outline-border;

  &:hover {
    background-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 0 0 1px $button-outline-border-hover;
    border: 0;
  }

  &:focus {
    background-color: $button-outline-background;
    color: $button-outline-text;
    box-shadow: 0 0 0 3px transparentize($color: $button-primary-background-hover, $amount: 0.5);
    border: 0;
  }

  &:active {
    background-color: rgba(255, 255, 255, 0.10);
  }
}

.btn.btn-transparent {
  color: $button-secondary-text;
  box-shadow: none;

  &:hover {
    color: $button-secondary-text;
    text-decoration: none;
  }

  &:focus {
    color: $button-secondary-text;
    box-shadow: 0 0 0 3px transparentize($color: $button-primary-background-hover, $amount: 0.5);
    border-color: transparent;
    text-decoration: none;
  }

  &:active {
    color: $button-secondary-text;
    border-color: transparent;
  }
}

.btn.btn-small {
  font-size: rem-calc(13);
  line-height: rem-calc(12);
  padding: rem-calc(10) $padding-padding-sm;
  height: min-content;

  &.btn-primary {
    background-position: right 16px center;
    background-size: 12px;
    padding-right: 32px;
  }
}

.btn-large {
  font-size: rem-calc(24);
  line-height: 1.5;
}
