@use 'sass:math';
$buttonAltColor: $blue-40;
$buttonDarkColor: $black;

$buttonActiveInverseColor: $white;
$buttonActiveInverseFontColor: $red-40;

$buttonActiveScale: scale(0.985);
$transparentWhite: rgba(255, 255, 255, 0);
$buttonPrimaryFbColor: #1877f2;
$buttonPrimaryFbHoverColor: #1964d5;

@mixin sgButtonBasics() {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  border: none;
  user-select: none;
  outline-width: 0;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
  font-weight: $fontWeightBold;
  text-transform: uppercase;
  transition-property: background-color, border-color;
  transition-duration: 0.3s;
  transition-timing-function: ease-in-out;

  &__container {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &--full-width {
    width: 100%;
  }

  &:hover,
  &:focus,
  &:active,
  &:active:focus {
    box-shadow: none;
    text-decoration: none;
    background-color: mix($green-50, $green-40, 80%);
    border-color: mix($green-50, $green-40, 80%);
  }

  &.sg-button-solid--disabled,
  &.sg-button-outline--disabled {
    &:hover,
    &:active,
    &:focus {
      background-color: $green-40;
      border-color: $green-40;
    }
  }

  &--alt {
    background-color: $buttonAltColor;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      background-color: mix($blue-50, $buttonAltColor, 80%);
      border-color: mix($blue-50, $buttonAltColor, 80%);
    }

    &.sg-button-solid--disabled,
    &.sg-button-outline--disabled {
      &:hover,
      &:active,
      &:focus {
        background-color: $buttonAltColor;
        border-color: $buttonAltColor;
      }
    }
  }

  &--dark {
    background-color: $buttonDarkColor;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      background-color: mix($gray-70, $buttonDarkColor, 80%);
      border-color: mix($gray-70, $buttonDarkColor, 80%);
    }

    &.sg-button-solid--disabled,
    &.sg-button-outline--disabled {
      &:hover,
      &:active,
      &:focus {
        background-color: $buttonDarkColor;
        border-color: $buttonDarkColor;
      }
    }
  }

  &--inverse,
  &--alt-inverse {
    border: 2px solid;
    border-color: $black;
    color: $black;
    background: none;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      background-color: mix($black, $transparentWhite, 12%);
      border-color: $black;
    }

    &.sg-button-solid--disabled,
    &.sg-button-outline--disabled {
      &:hover,
      &:active,
      &:focus {
        border-color: $black;
        color: $black;
        background: none;
      }
    }
  }

  &--dark-inverse {
    background-color: $white;
    color: $black;
    border: 2px solid $white;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      background-color: mix($gray-10, $white, 80%);
      border-color: mix($gray-10, $white, 80%);
    }

    &.sg-button-solid--disabled,
    &.sg-button-outline--disabled {
      &:hover,
      &:active,
      &:focus {
        background-color: $white;
        color: $black;
        border: 2px solid $white;
      }
    }
  }

  // thank you button and mark as best
  &--active-inverse,
  &--active-mustard {
    background-color: $white;
    border: none;
    height: 40px;
    font-size: 15px;
    line-height: 15px;
    border-radius: 20px;

    .sg-icon {
      width: 24px;
      height: 24px;
      max-width: 24px;
      max-height: 24px;
    }

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      border: none;
    }
  }

  // mark as best answer
  &--active-mustard {
    color: $yellow-40;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      background-color: mix($yellow-40, $transparentWhite, 12%);
      color: $yellow-40;
    }

    &.sg-button-outline--disabled {
      &:hover,
      &:active,
      &:focus {
        background-color: $buttonActiveInverseColor;
        color: $yellow-40;
      }
    }
  }

  // thank you button
  &--active-inverse {
    color: $red-40;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      background-color: mix($red-40, $transparentWhite, 12%);
      color: $red-40;
    }

    &.sg-button-outline--disabled {
      &:hover,
      &:active,
      &:focus {
        background-color: $buttonActiveInverseColor;
        color: $buttonActiveInverseFontColor;
      }
    }
  }

  &--fb {
    padding: 0 $buttonPrimaryPadding 0 math.div($buttonPrimaryPadding, 2);
    background-color: $buttonPrimaryFbColor;

    &:hover,
    &:focus,
    &:active,
    &:active:focus {
      background-color: $buttonPrimaryFbHoverColor;
    }

    &.sg-button-outline--disabled {
      &:hover,
      &:active,
      &:focus {
        background-color: $buttonPrimaryFbColor;
      }
    }
  }

  &--disabled {
    opacity: 0.45;
    cursor: default;
  }
}