@use "scss/colors";
@use "scss/variables";
@use "scss/mixins";

// Primary
$primary-text-color: colors.$white;
$primary-background-color: colors.$blue-400;
$primary-background-color-hover: colors.$blue-500;
$primary-background-color-active: colors.$blue-600;

// Secondary
$secondary-text-color: colors.$grey-400;
$secondary-background-color: colors.$foreground;
$secondary-border-color: colors.$grey-300;
$secondary-text-color-hover: colors.$grey-500;
$secondary-background-color-hover: transparent;
$secondary-border-color-hover: colors.$grey-400;
$secondary-text-color-active: colors.$grey-500;
$secondary-background-color-active: transparent;
$secondary-border-color-active: colors.$grey-500;

// Clear
$clear-text-color: colors.$grey-300;
$clear-background-color: transparent;
$clear-text-color-hover: colors.$grey-500;
$clear-text-color-active: colors.$grey-500;

// Danger
$danger-text-color: colors.$foreground;
$danger-background-color: colors.$red-300;
$danger-background-color-hover: colors.$red-400;
$danger-background-color-active: colors.$red-600;

// Primary Dark
$primary-dark-text-color: colors.$foreground;
$primary-dark-background-color: colors.$dark-blue;
$primary-dark-background-color-hover: colors.$dark-blue-800;
$primary-dark-background-color-active: colors.$dark-blue-1000;

// Secondary Dark
$secondary-dark-text-color: colors.$dark-blue-900;
$secondary-dark-background-color: transparent;
$secondary-dark-border-color: colors.$dark-blue-900;
$secondary-dark-text-color-hover: colors.$dark-blue-600;
$secondary-dark-border-color-hover: colors.$dark-blue-600;
$secondary-dark-text-color-active: colors.$dark-blue-1000;
$secondary-dark-border-color-active: colors.$dark-blue-1000;

// Clear Dark
$clear-dark-text-color: colors.$grey-500;
$clear-dark-background-color: transparent;
$clear-dark-text-color-hover: colors.$grey-600;
$clear-dark-text-color-active: colors.$grey-600;

// Clear Danger
$clear-danger-text-color: colors.$red-400;
$clear-danger-text-color-hover: colors.$red-600;
$clear-danger-text-color-active: colors.$red-600;
$clear-danger-background-color: transparent;

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: variables.$font-size-sm;
  line-height: 1.2;
  color: colors.$grey;
  border-radius: variables.$border-radius-sm;
  border: 0;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease-in;
  white-space: nowrap;

  // Elements
  &__children {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__icon {
    display: flex;
    justify-content: center;
    align-content: center;
    position: relative;
    flex: 0 0 auto;
    color: inherit;
    transition: color 0.2s ease-in;

    &--left {
      &.button__icon--with-label {
        margin-right: 7px;
      }
    }

    &--right {
      &.button__icon--with-label {
        margin-left: 7px;
      }
    }

    &--loading {
      position: absolute;
      transition: none;
    }
  }

  // Modifiers - Sizes
  &--size-xs {
    height: variables.$button-height-xs;
    font-size: variables.$font-size-sm;
    line-height: 15px;
    padding: 6px 10px;

    .button__icon {
      font-size: variables.$font-size-lg;
    }
  }

  &--size-sm {
    height: variables.$button-height-sm;
    font-size: variables.$font-size-sm;
    line-height: 1.2;
    padding: 8px 10px;

    .button__icon {
      font-size: 15px;
    }
  }

  // Modifiers - States
  &--full-width {
    width: 100%;
  }

  &:disabled {
    pointer-events: none;
    opacity: 0.5;
  }

  &--loading {
    pointer-events: none;
    position: relative;
    align-content: center;
    justify-content: center;

    .button__children {
      color: transparent;
    }

    .button__icon {
      transition: none;
    }

    .button__icon--regular {
      visibility: hidden;
    }
  }

  &:focus-visible {
    outline: 3px solid colors.$blue-50;
  }

  &--magic .button__icon {
    color: colors.$gradient-primary-start;
    --start-color: #{colors.$gradient-primary-start};
    --stop-color: #{colors.$gradient-primary-stop};
  }

  // Modifiers - Variants
  &--primary {
    background-color: $primary-background-color;
    color: $primary-text-color;

    &:hover {
      background-color: $primary-background-color-hover;
    }

    &:active {
      background-color: $primary-background-color-active;
    }
  }

  &--secondary {
    background-color: $secondary-background-color;
    color: $secondary-text-color;
    border: variables.$border-thin solid $secondary-border-color;

    &:hover {
      background-color: $secondary-background-color-hover;
      color: $secondary-text-color-hover;
      border-color: $secondary-border-color-hover;
    }

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

  &--clear {
    background-color: $clear-background-color;
    color: $clear-text-color;

    &:hover {
      color: $clear-text-color-hover;
    }

    &:active {
      color: $clear-text-color-active;
    }
  }

  &--danger {
    background-color: $danger-background-color;
    color: $danger-text-color;

    &:hover {
      background-color: $danger-background-color-hover;
    }

    &:active {
      background-color: $danger-background-color-active;
    }
  }

  &--magic {
    color: colors.$inverse;
    @include mixins.gradient-border(variables.$border-thin, colors.$gradient-primary, colors.$gradient-secondary);

    &:hover {
      filter: brightness(0.9);
    }

    &:active {
      filter: brightness(0.8);
    }
  }

  &--primary-dark {
    background-color: colors.$dark-blue;
    color: colors.$foreground;

    &:hover {
      background-color: colors.$dark-blue-800;
    }

    &:active {
      background-color: colors.$dark-blue-1000;
    }
  }

  &--secondary-dark {
    background-color: $secondary-dark-background-color;
    color: $secondary-dark-text-color;
    border: variables.$border-thin solid $secondary-dark-border-color;

    &:hover {
      border-color: $secondary-dark-border-color-hover;
      color: $secondary-dark-text-color-hover;
    }

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

  &--clear-danger {
    background-color: $clear-danger-background-color;
    color: $clear-danger-text-color;
    padding: 0;

    &:hover {
      color: $clear-danger-text-color-hover;
    }

    &:active {
      color: $clear-danger-text-color-active;
    }
  }

  &--clear-dark {
    background-color: $clear-dark-background-color;
    color: $clear-dark-text-color;
    padding: 0;

    &:hover {
      color: $clear-dark-text-color-hover;
    }

    &:active {
      color: $clear-dark-text-color-active;
    }
  }

  &--link {
    padding: 0;
    background: none;
    background-color: transparent;
    border: none;
    text-decoration: underline;
    box-shadow: none;
    height: unset;
  }
}
