@import "../style/colors";
@import "../style/typography.scss";
// Variables
$buttonBorderRadius: 8px;
$buttonHoverOpacity: 0.6;
$buttonDisabledOpacity: 0.15;
$buttonFontSize: 17px;
$buttonLetterSpacing: -0.4px;
$buttonXsmFontSize: 15px;
// size
$buttonHeight: 54px;
$buttonSmHeight: 40px;
$buttonXsmHeight: 32px;
// simple button
$buttonBorder: solid 1px $seafoam-1;
$buttonColor: $white;
$buttonBackground: $seafoam-1;
$buttonDisabledBorder: 1px solid $midnight-6;
$buttonDisabledBackground: none;
$buttonDisabledColor: $white;
// Primary
$buttonPrimaryColor: $white;
$buttonPrimaryBackground: $seafoam-1;
$buttonPrimaryDisabledBackground: $midnight-6;
$buttonPrimaryDisabledBorder: none;
$buttonPrimaryDisabledColor: $white;
$buttonPrimaryBorder: none;
// Secondary
$buttonSecondaryColor: $seafoam-1;
$buttonSecondaryBackground: rgba($seafoam-1, $buttonDisabledOpacity);
$buttonSecondaryBorder: none;
$buttonSecondaryDisabledBackground: $midnight-6;
$buttonSecondaryDisabledColor: $white;
$buttonSecondaryDisabledBorder: none;
// Tertiary
$buttonTertiaryColor: $seafoam-1;
$buttonTertiaryBackground: $white;
$buttonTertiaryBorder: 1px solid $seafoam-1;
$buttonTertiaryDisabledBackground: none;
$buttonTertiaryDisabledColor: $midnight-6;
$buttonTertiaryDisabledBorder: solid 1px $midnight-6;
// Text
$buttonTextColor: $seafoam-1;
$buttonTextBorder: none;
$buttonTextBackground: transparent;
$buttonTextDisabledBackground: none;
$buttonTextDisabledColor: $white;
$buttonTextDisabledBorder: none;
// Default
$buttonDefaultColor: rgba(68, 72, 75, 0.82);
$buttonDefaultBorder: none;
$buttonDefaultBackground: rgba(127, 133, 141, 0.07);
$buttonDefaultDisabledBackground: $midnight-6;
$buttonDefaultDisabledColor: $midnight-1;
$buttonDefaultDisabledBorder: none;

// Buttons
.la-button {
  border-radius: $buttonBorderRadius;
  height: $buttonHeight;
  border: $buttonBorder;
  color: $buttonDefaultColor;
  background-color: $white;
  padding: 15px 32px 18px 32px;
  cursor: pointer;
  @extend %LaTypeFaceButton;

  &:hover, &--hover {
    opacity: $buttonHoverOpacity;
  }

  &.la-button--disabled {
    color: $buttonDisabledColor;
    background: $buttonDisabledBackground;
    border: $buttonDisabledBorder;
    cursor: not-allowed;

    & .la-text > .la-button__text > la-icon > svg {
      fill: $buttonDisabledColor !important;
    }

    & .la-text > .la-button__text {
      color: $buttonDisabledColor;
    }
  }

  &--primary {
    color: $buttonPrimaryColor;
    background: $buttonPrimaryBackground;
    border: $buttonPrimaryBorder;

    &.la-button--disabled {
      background: $buttonPrimaryDisabledBackground;
      border: $buttonPrimaryDisabledBorder;
      color: $buttonPrimaryDisabledColor;
      cursor: not-allowed;
    }
  }

  &--secondary {
    color: $buttonSecondaryColor;
    background: $buttonSecondaryBackground;
    border: $buttonSecondaryBorder;

    &.la-button--disabled {
      background: $buttonSecondaryDisabledBackground;
      color: $buttonSecondaryDisabledColor;
      border: $buttonSecondaryDisabledBorder;
      cursor: not-allowed;
    }
  }

  &--tertiary {
    color: $buttonTertiaryColor;
    background: $buttonTertiaryBackground;
    border: $buttonTertiaryBorder;

    &.la-button--disabled {
      background: $buttonTertiaryDisabledBackground;
      border: $buttonTertiaryDisabledBorder;
      cursor: not-allowed;

      & .la-text > .la-button__text > la-icon > svg {
        fill: $buttonTertiaryDisabledColor !important;
      }

      & .la-text > .la-button__text {
        color: $buttonTertiaryDisabledColor;
      }
    }
  }

  &--text {
    color: $buttonTextColor;
    background: $buttonTextBackground;
    border: $buttonTextBorder;

    &.la-button--disabled {
      background: $buttonTextDisabledBackground;
      color: $buttonTextDisabledColor;
      border: $buttonTextDisabledBorder;
      cursor: not-allowed;
    }
  }

  &--default {
    color: $buttonDefaultColor;
    background: $buttonDefaultBackground;
    border: $buttonDefaultBorder;

    &.la-button--disabled {
      background: $buttonDefaultDisabledBackground;
      border: $buttonDefaultDisabledBorder;
      color: $buttonDefaultDisabledColor;
      cursor: not-allowed;
    }
  }

  &--small {
    height: $buttonSmHeight;
    padding: 6px 20px 10px 20px;
  }

  &--x-small {
    height: $buttonXsmHeight;
    padding: 1px 12px 6px 12px;

    & .la-text .la-text--button {
      font-size: $buttonXsmFontSize;
    }
  }

  & .la-button__text {
    display: flex;
    justify-content: center;
    align-items: center;

    la-icon:nth-child(1) {
      margin-right: 4px;
    }

    la-icon:nth-child(2) {
      margin-left: 4px;
    }
  }
}

button:focus {
  outline: none;
}

.la-button--wide {
  width: 100%;
}