@mixin button-style(
  $color,
  $background,
  $border,
  $shadow: null,
  $hover-background: null,
  $hover-border: null,
  $hover-color: $color,
  $hover-shadow: $shadow,
  $active-background: null,
  $active-border: null,
  $active-color: $color,
  $active-shadow: $hover-shadow
) {
  color: $color;
  background: $background;
  border-color: $border;

  @if $shadow {
    box-shadow: $shadow;
  }

  &:hover {
    color: $hover-color;

    @if $hover-background {
      background: $hover-background;
    }

    @if $hover-border {
      border-color: $hover-border;
    }

    @if $hover-shadow {
      box-shadow: $hover-shadow;
    }
  }

  &:focus {
    color: $hover-color;

    @if $hover-background {
      background: $hover-background;
    }

    @if $hover-border {
      border-color: $hover-border;
    }

    @if $hover-shadow {
      box-shadow: $hover-shadow;
    }

    z-index: 1;
  }

  &:active {
    color: $active-color;

    @if $active-background {
      background: $active-background;
    }

    @if $active-border {
      border-color: $active-border;
    }

    @if $active-shadow {
      box-shadow: $active-shadow;
    }
  }

  &:disabled {
    color: var(--ty-button-disabled-text, var(--ty-color-text-quaternary));
    background-color: var(--ty-button-disabled-bg, var(--ty-color-bg-disabled));
    border-color: var(--ty-button-disabled-border, var(--ty-color-border));
    box-shadow: none;
  }
}

@mixin btn-size($padding-inline, $font-size, $height, $gap, $icon-size) {
  --ty-button-height-current: #{$height};
  --ty-button-gap-current: #{$gap};
  --ty-button-icon-size-current: #{$icon-size};

  height: $height;
  padding: 0 $padding-inline;
  font-size: $font-size;
  gap: $gap;
}

@mixin button-vars(
  $variant,
  $color,
  $text-fallback,
  $bg-fallback,
  $border-fallback,
  $hover-bg-fallback: $bg-fallback,
  $hover-border-fallback: $border-fallback,
  $hover-text-fallback: $text-fallback,
  $active-bg-fallback: $hover-bg-fallback,
  $active-border-fallback: $hover-border-fallback,
  $active-text-fallback: $hover-text-fallback,
  $shadow-fallback: none,
  $hover-shadow-fallback: $shadow-fallback,
  $active-shadow-fallback: $hover-shadow-fallback
) {
  --ty-button-current-text: var(--ty-button-#{$variant}-#{$color}-text, #{$text-fallback});
  --ty-button-current-bg: var(--ty-button-#{$variant}-#{$color}-bg, #{$bg-fallback});
  --ty-button-current-border: var(--ty-button-#{$variant}-#{$color}-border, #{$border-fallback});
  --ty-button-current-shadow: var(--ty-button-#{$variant}-#{$color}-shadow, #{$shadow-fallback});
  --ty-button-current-text-hover: var(
    --ty-button-#{$variant}-#{$color}-text-hover,
    #{$hover-text-fallback}
  );
  --ty-button-current-bg-hover: var(
    --ty-button-#{$variant}-#{$color}-bg-hover,
    #{$hover-bg-fallback}
  );
  --ty-button-current-border-hover: var(
    --ty-button-#{$variant}-#{$color}-border-hover,
    #{$hover-border-fallback}
  );
  --ty-button-current-shadow-hover: var(
    --ty-button-#{$variant}-#{$color}-shadow-hover,
    #{$hover-shadow-fallback}
  );
  --ty-button-current-text-active: var(
    --ty-button-#{$variant}-#{$color}-text-active,
    #{$active-text-fallback}
  );
  --ty-button-current-bg-active: var(
    --ty-button-#{$variant}-#{$color}-bg-active,
    #{$active-bg-fallback}
  );
  --ty-button-current-border-active: var(
    --ty-button-#{$variant}-#{$color}-border-active,
    #{$active-border-fallback}
  );
  --ty-button-current-shadow-active: var(
    --ty-button-#{$variant}-#{$color}-shadow-active,
    #{$active-shadow-fallback}
  );
}