@use 'sass:map';

@use '../common/var' as *;

@mixin button-plain($color, $type) {
  --sg-button-text-color: var(--sg-color-#{$type});
  --sg-button-bg-color: #{map.get($colors, $type, 'light-9')};
  --sg-button-border-color: #{map.get($colors, $type, 'light-6')};

  --sg-button-hover-text-color: var(--sg-color-white);
  --sg-button-hover-bg-color: var(--sg-color-#{$type});
  --sg-button-hover-border-color: var(--sg-color-#{$type});

  --sg-button-active-text-color: var(--sg-color-white);
  --sg-button-active-border-color: var(--sg-color-#{$type});

  &.is-disabled {
    &,
    &:hover,
    &:focus,
    &:active {
      color: map.get($colors, $type, 'light-4');
      background-color: map.get($colors, $type, 'light-9');
      border-color: map.get($colors, $type, 'light-8');
    }
  }
}

@mixin button-variant($type) {
  --sg-button-text-color: var(--sg-color-white);
  --sg-button-hover-text-color: var(--sg-color-white);
  --sg-button-disabled-text-color: var(--sg-color-white);
  &.is-plain,&.is-text,&.is-outline {
    @include button-plain(var(--sg-button-bg-color), $type);
  }
}

@mixin button-size(
  $height,
  $padding-horizontal,
  $font-size,
  $border-radius
) {
  height: $height;
  padding: 0 $padding-horizontal;
  font-size: $font-size;
  border-radius: $border-radius;
  &.is-round {
    padding: 0 $padding-horizontal;
  }
}