@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonElevated';
@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
@use '../../styles.module';

$sizes: 'xs', 's', 'm', 'l';
$variants: 'icon-only';
$typography: ();

@mixin button-colors-styles {
  @include styles.icon-fill(styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'text-support'));

  background-color: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'background2-level');
  box-shadow: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'box-shadow', 'elevation', 'level2');

  @media (hover: hover) {
    &:hover {
      @include styles.icon-fill(styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'text-main'));

      background-color: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'background2-level');
      box-shadow: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'box-shadow', 'elevation', 'level3');
    }
  }

  @media (hover: none) or (hover: hover) {
    &:focus-visible {
      @include styles.icon-fill(styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'text-main'));

      background-color: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'background2-level');
      box-shadow: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'box-shadow', 'elevation', 'level3');
    }

    &:active {
      @include styles.icon-fill(styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'text-support'));

      background-color: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'background');
      box-shadow: none;
    }

    &:disabled,
    &[data-disabled] {
      @include styles.icon-fill(styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'text-disabled'));

      background-color: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'decor-disabled');
      box-shadow: none;
    }

    &[data-loading] {
      @include styles.icon-fill(styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'text-main'));

      background-color: styles-tokens-button-buttonElevated.simple-var(styles-tokens-button-buttonElevated.$theme-variables, 'sys', 'neutral', 'background');
      box-shadow: none;
    }
  }
}

@mixin button-outline-colors-styles {
  &:focus-visible {
    @include styles-tokens-button-buttonElevated.outline-var(styles-tokens-element.$container-focused-s);

    outline-color: styles-tokens-button-buttonElevated.$sys-available-complementary;
  }
}

.button {
  @include styles.button-anatomy-styles(styles-tokens-button-buttonElevated.$button-elevated, $sizes, $variants, $typography, false);
  @include styles.loading-label-only(styles-tokens-button-buttonElevated.$button-elevated);
  @include button-outline-colors-styles;

  &.button {
    @include button-colors-styles;
  }
}