@use 'palette.tokens';
@use 'spacing.tokens';
@use 'shadows.tokens';
@use 'typography.tokens';

//=====================================
// COLORS
//=====================================

//
// text
//
//primary
$color-text-button-primary-solid: palette.$color-light-stronger !default;
$color-text-button-primary-solid-hover: palette.$color-light-stronger !default;
$color-text-button-primary-solid-active: palette.$color-light-stronger !default;

$color-text-button-primary-basic: palette.$color-primary-strong !default;
$color-text-button-primary-basic-hover: palette.$color-primary-stronger !default;
$color-text-button-primary-basic-active: palette.$color-primary-stronger !default;

// secondary
$color-text-button-secondary-solid: palette.$color-dark-stronger !default;
$color-text-button-secondary-solid-hover: palette.$color-dark-stronger !default;
$color-text-button-secondary-solid-active: palette.$color-dark-stronger !default;

$color-text-button-secondary-basic: palette.$color-dark-stronger !default;
$color-text-button-secondary-basic-hover: palette.$color-dark-stronger !default;
$color-text-button-secondary-basic-active: palette.$color-dark-stronger !default;

// inverted
$color-text-button-inverted-solid: palette.$color-dark-stronger !default;
$color-text-button-inverted-solid-hover: palette.$color-dark-stronger !default;
$color-text-button-inverted-solid-active: palette.$color-dark-stronger !default;

$color-text-button-inverted-basic: palette.$color-light-stronger !default;
$color-text-button-inverted-basic-hover: palette.$color-light-stronger !default;
$color-text-button-inverted-basic-active: palette.$color-light-stronger !default;

// destructive
$color-text-button-destructive-solid: palette.$color-light-stronger !default;
$color-text-button-destructive-solid-hover: palette.$color-light-stronger !default;
$color-text-button-destructive-solid-active: palette.$color-light-stronger !default;

$color-text-button-destructive-basic: palette.$color-secondary-strong !default;
$color-text-button-destructive-basic-hover: palette.$color-secondary-stronger !default;
$color-text-button-destructive-basic-active: palette.$color-secondary-stronger !default;

// disabled
$color-text-button-solid-disabled: palette.$color-neutral-light !default;
$color-text-button-basic-disabled: palette.$color-neutral-light !default;
$color-text-button-inverted-solid-disabled: palette.$color-neutral-inverted-lighter !default;
$color-text-button-inverted-basic-disabled: palette.$color-neutral-inverted-lighter !default;

//
// background
//
// primary
$color-background-button-primary-solid: palette.$color-primary-regular !default;
$color-background-button-primary-solid-hover: palette.$color-primary-regular !default;
$color-background-button-primary-solid-active: palette.$color-primary-strong !default;

$color-background-button-primary-basic: transparent !default;
$color-background-button-primary-basic-hover: palette.$color-primary-lightest !default;
$color-background-button-primary-basic-active: palette.$color-primary-lighter !default;

// secondary
$color-background-button-secondary-solid: palette.$color-neutral-lighter !default;
$color-background-button-secondary-solid-hover: palette.$color-neutral-light !default;
$color-background-button-secondary-solid-active: palette.$color-neutral-regular !default;

$color-background-button-secondary-basic: transparent !default;
$color-background-button-secondary-basic-hover: palette.$color-neutral-lighter !default;
$color-background-button-secondary-basic-active: palette.$color-neutral-light !default;

// inverted
$color-background-button-inverted-solid: palette.$color-neutral-lightest !default;
$color-background-button-inverted-solid-hover: palette.$color-neutral-lightest !default;
$color-background-button-inverted-solid-active: palette.$color-neutral-lighter !default;

$color-background-button-inverted-basic: transparent !default;
$color-background-button-inverted-basic-hover: palette.$color-neutral-inverted-light !default;
$color-background-button-inverted-basic-active: palette.$color-neutral-inverted-lighter !default;

// destructive
$color-background-button-destructive-solid: palette.$color-secondary-strong !default;
$color-background-button-destructive-solid-hover: palette.$color-secondary-strong !default;
$color-background-button-destructive-solid-active: palette.$color-secondary-stronger !default;

$color-background-button-destructive-basic: transparent !default;
$color-background-button-destructive-basic-hover: palette.$color-secondary-lightest !default;
$color-background-button-destructive-basic-active: palette.$color-secondary-lighter !default;

// disabled
$color-background-button-solid-disabled: palette.$color-neutral-lightest !default;
$color-background-button-basic-disabled: transparent !default;
$color-background-button-inverted-solid-disabled: palette.$color-neutral-inverted-light !default;

//=====================================
// BORDERS
//=====================================

// primary
$border-button-primary-solid: none !default;
$border-button-primary-solid-hover: none !default;
$border-button-primary-solid-active: none !default;

$border-button-primary-basic: none !default;
$border-button-primary-basic-hover: none !default;
$border-button-primary-basic-active: none !default;

$border-button-icon-primary-basic: none !default;
$border-button-icon-primary-basic-hover: none !default;
$border-button-icon-primary-basic-active: none !default;

// secondary
$border-button-secondary-solid: none !default;
$border-button-secondary-solid-hover: none !default;
$border-button-secondary-solid-active: none !default;

$border-button-secondary-basic: none !default;
$border-button-secondary-basic-hover: none !default;
$border-button-secondary-basic-active: none !default;

$border-button-icon-secondary-basic: none !default;
$border-button-icon-secondary-basic-hover: none !default;
$border-button-icon-secondary-basic-active: none !default;

// inverted
$border-button-inverted-solid: none !default;
$border-button-inverted-solid-hover: none !default;
$border-button-inverted-solid-active: none !default;

$border-button-inverted-basic: none !default;
$border-button-inverted-basic-hover: none !default;
$border-button-inverted-basic-active: none !default;

$border-button-icon-inverted-basic: none !default;
$border-button-icon-inverted-basic-hover: none !default;
$border-button-icon-inverted-basic-active: none !default;

// destructive
$border-button-destructive-solid: none !default;
$border-button-destructive-solid-hover: none !default;
$border-button-destructive-solid-active: none !default;

$border-button-destructive-basic: none !default;
$border-button-destructive-basic-hover: none !default;
$border-button-destructive-basic-active: none !default;

$border-button-icon-destructive-basic: none !default;
$border-button-icon-destructive-basic-hover: none !default;
$border-button-icon-destructive-basic-active: none !default;

// disabled
$border-button-solid-disabled: none !default;
$border-button-basic-disabled: none !default;
$border-button-icon-basic-disabled: none !default;
$border-button-inverted-basic-disabled: none !default;

// radius
$border-radius-button: 100px !default;
$border-radius-button-icon: 50% !default;

//=====================================
// SPACING and SHADOWS
//=====================================

$padding-sides-button-small: spacing.rhythm(2) !default;
$padding-sides-button-medium: spacing.rhythm(2) !default;
$padding-sides-button-large: spacing.rhythm(3) !default;

$padding-left-button-icon-text-small: spacing.rhythm(1.5) !default;
$padding-right-button-icon-text-small: spacing.rhythm(2) !default;
$padding-left-button-icon-text-medium: spacing.rhythm(1.5) !default;
$padding-right-button-icon-text-medium: spacing.rhythm(2) !default;
$padding-left-button-icon-text-large: spacing.rhythm(2) !default;
$padding-right-button-icon-text-large: spacing.rhythm(3) !default;

$padding-button-icon-small: spacing.rhythm(1) !default;
$padding-button-icon-medium: spacing.rhythm(1.5) !default;
$padding-button-icon-large: spacing.rhythm(1.5) !default;

$height-button-small: spacing.rhythm(4) !default;
$height-button-medium: spacing.rhythm(6) !default;
$height-button-large: spacing.rhythm(7) !default;

$shadow-button-solid-hover: shadows.$shadow-small !default;
$shadow-button-basic-hover: shadows.$shadow-small !default;

//=====================================
// LABELS
//=====================================
$font-size-button-small: typography.font-size(s) !default;
$font-size-button-medium: typography.font-size(m) !default;
$font-size-button-large: typography.font-size(m) !default;
$font-weight-button-label: typography.$font-weight-semi-bold !default;

@mixin primary-solid() {
  color: $color-text-button-primary-solid;
  background: $color-background-button-primary-solid;
  border: $border-button-primary-solid;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-primary-solid-hover;
      background: $color-background-button-primary-solid-hover;
      border: $border-button-primary-solid-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-primary-solid-active;
    background: $color-background-button-primary-solid-active;
    border: $border-button-primary-solid-active;
  }
}

@mixin primary-basic() {
  color: $color-text-button-primary-basic;
  background: $color-background-button-primary-basic;
  border: $border-button-primary-basic;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-primary-basic-hover;
      background: $color-background-button-primary-basic-hover;
      border: $border-button-primary-basic-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-primary-basic-active;
    background: $color-background-button-primary-basic-active;
    border: $border-button-primary-basic-active;
  }

  &.pa-button-icon {
    border: $border-button-icon-primary-basic;

    @media (hover: hover) {
      &:hover {
        border: $border-button-icon-primary-basic-hover;
      }
    }
    &:active,
    &.pa-active {
      border: $border-button-icon-primary-basic-active;
    }
  }
}

@mixin secondary-solid() {
  color: $color-text-button-secondary-solid;
  background: $color-background-button-secondary-solid;
  border: $border-button-secondary-solid;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-secondary-solid-hover;
      background: $color-background-button-secondary-solid-hover;
      border: $border-button-secondary-solid-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-secondary-solid-active;
    background: $color-background-button-secondary-solid-active;
    border: $border-button-secondary-solid-active;
  }
}

@mixin secondary-basic() {
  color: $color-text-button-secondary-basic;
  background: $color-background-button-secondary-basic;
  border: $border-button-secondary-basic;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-secondary-basic-hover;
      background: $color-background-button-secondary-basic-hover;
      border: $border-button-secondary-basic-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-secondary-basic-active;
    background: $color-background-button-secondary-basic-active;
    border: $border-button-secondary-basic-active;
  }

  &.pa-button-icon {
    border: $border-button-icon-secondary-basic;

    @media (hover: hover) {
      &:hover {
        border: $border-button-icon-secondary-basic-hover;
      }
    }
    &:active,
    &.pa-active {
      border: $border-button-icon-secondary-basic-active;
    }
  }
}

@mixin inverted-solid() {
  color: $color-text-button-inverted-solid;
  background: $color-background-button-inverted-solid;
  border: $border-button-inverted-solid;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-inverted-solid-hover;
      background: $color-background-button-inverted-solid-hover;
      border: $border-button-inverted-solid-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-inverted-solid-active;
    background: $color-background-button-inverted-solid-active;
    border: $border-button-inverted-solid-active;
  }
}

@mixin inverted-basic() {
  color: $color-text-button-inverted-basic;
  background: $color-background-button-inverted-basic;
  border: $border-button-secondary-basic;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-inverted-basic-hover;
      background: $color-background-button-inverted-basic-hover;
      border: $border-button-inverted-basic-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-inverted-basic-active;
    background: $color-background-button-inverted-basic-active;
    border: $border-button-inverted-basic-active;
  }

  &.pa-button-icon {
    border: $border-button-icon-inverted-basic;

    @media (hover: hover) {
      &:hover {
        border: $border-button-icon-inverted-basic-hover;
      }
    }
    &:active,
    &.pa-active {
      border: $border-button-icon-inverted-basic-active;
    }
  }
}

@mixin destructive-solid() {
  color: $color-text-button-destructive-solid;
  background: $color-background-button-destructive-solid;
  border: $border-button-destructive-solid;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-destructive-solid-hover;
      background: $color-background-button-destructive-solid-hover;
      border: $border-button-destructive-solid-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-destructive-solid-active;
    background: $color-background-button-destructive-solid-active;
    border: $border-button-destructive-solid-active;
  }
}

@mixin destructive-basic() {
  color: $color-text-button-destructive-basic;
  background: $color-background-button-destructive-basic;
  border: $border-button-destructive-basic;

  @media (hover: hover) {
    &:hover {
      color: $color-text-button-destructive-basic-hover;
      background: $color-background-button-destructive-basic-hover;
      border: $border-button-destructive-basic-hover;
    }
  }

  &:active,
  &.pa-active {
    color: $color-text-button-destructive-basic-active;
    background: $color-background-button-destructive-basic-active;
    border: $border-button-destructive-basic-active;
  }

  &.pa-button-icon {
    border: $border-button-icon-destructive-basic;

    @media (hover: hover) {
      &:hover {
        border: $border-button-icon-destructive-basic-hover;
      }
    }
    &:active,
    &.pa-active {
      border: $border-button-icon-destructive-basic-active;
    }
  }
}

@mixin disabled-solid() {
  color: $color-text-button-solid-disabled;
  background: $color-background-button-solid-disabled;
  border: $border-button-solid-disabled;
}

@mixin disabled-basic() {
  color: $color-text-button-basic-disabled;
  background: $color-background-button-basic-disabled;
  border: $border-button-basic-disabled;

  &.pa-button-icon {
    border: $border-button-icon-basic-disabled;
  }
}

@mixin disabled-inverted-solid() {
  color: $color-text-button-inverted-solid-disabled;
  background: $color-background-button-inverted-solid-disabled;
  border: $border-button-solid-disabled;
}

@mixin disabled-inverted-basic() {
  color: $color-text-button-inverted-basic-disabled;
  background: $color-background-button-basic-disabled;
  border: $border-button-inverted-basic-disabled;

  &.pa-button-icon {
    border: $border-button-icon-basic-disabled;
  }
}

@mixin hover-box-shadow-solid() {
  box-shadow: $shadow-button-solid-hover;

  &:active,
  &.pa-active {
    box-shadow: none;
  }
}

@mixin hover-box-shadow-basic() {
  box-shadow: $shadow-button-basic-hover;

  &:active,
  &.pa-active {
    box-shadow: none;
  }
}