Kotyata/layers/ui/components/button/styles.scss

@use "sass:list";
@use '../../styles/mixins' as *;
@use '../../styles/variables' as *;

$button-types: 'filled', 'outlined', 'ghost', 'link';
$button-colors: 'primary', 'secondary';

/* prettier-ignore */
$button-variants: [
  [
    'filled',
    'primary',
    (
      'color': $clr-white,
      'background': $clr-cyan-500,
      'hover-background': $clr-cyan-400,
      'active-background': $clr-cyan-600,
      'disabled-background': $clr-cyan-200,
      'disabled-color': $clr-cyan-300
    )
  ],
  [
    'filled',
    'secondary',
    (
      'color': $clr-cyan-500,
      'background': $clr-white,
      'hover-background': $clr-grey-200,
      'active-background': $clr-grey-300,
      'disabled-background': $clr-grey-100,
      'disabled-color': $clr-grey-400
    )
  ],
  [
    'outlined',
    'primary',
    (
      'color': $clr-cyan-500,
      'border-color': $clr-cyan-500,
      'hover-color': $clr-white,
      'hover-background': $clr-cyan-500,
      'active-color': $clr-white,
      'active-background': $clr-cyan-600,
      'disabled-border-color': $clr-cyan-300,
      'disabled-color': $clr-cyan-300
    )
  ],
  [
    'outlined',
    'secondary',
    (
      'color': $clr-grey-500,
      'icon-color': $clr-grey-400,
      'border-color': $clr-grey-300,
      'hover-color': $clr-grey-600,
      'hover-background': $clr-grey-200,
      'active-color': $clr-cyan-700,
      'active-background': $clr-grey-300,
      'disabled-border-color': $clr-grey-300,
      'disabled-color': $clr-grey-400
    )
  ],
  [
    'ghost',
    'primary',
    (
      'color': $clr-cyan-400,
      'hover-color': $clr-cyan-500,
      'hover-background': $clr-grey-200,
      'active-color': $clr-cyan-600,
      'active-background': $clr-grey-300,
      'disabled-color': $clr-cyan-300
    )
  ],
  [
    'ghost',
    'secondary',
    (
      'color': $clr-grey-500,
      'icon-color': $clr-grey-400,
      'hover-color': $clr-grey-600,
      'hover-background': $clr-grey-200,
      'active-color': $clr-cyan-700,
      'active-background': $clr-grey-300,
      'disabled-color': $clr-grey-400
    )
  ],
  [
    'link',
    'primary',
    (
      'color': $clr-cyan-500,
      'hover-color': $clr-cyan-400,
      'active-color': $clr-cyan-600,
      'disabled-color': $clr-cyan-300
    )
  ],
  [
    'link',
    'secondary',
    (
      'color': $clr-grey-500,
      'icon-color': $clr-grey-400,
      'hover-color': $clr-cyan-500,
      'active-color': $clr-cyan-600,
      'disabled-color': $clr-grey-400
    )
  ]
];

.ui-button {
  $self: &;

  @include txt-i-m('button');

  --spinner-size: 20px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  cursor: pointer;
  outline: none;

  padding: 7px 15px;
  background: var(--button-background, transparent);
  color: var(--button-color, inherit);
  border-radius: var(--button-border-radius, 12px);
  width: var(--button-width, unset);
  height: var(--button-height, 40px);
  border: 1px solid var(--button-border-color, transparent);
  white-space: nowrap;
  transition: 0.2s ease-out;
  transition-property: background-color, border-color, color;

  &:visited {
    color: var(--button-color, inherit);
  }

  &:hover,
  &:focus-visible,
  &.is-hover {
    --button-icon-color: var(--button-hover-color, var(--button-color));

    background: var(--button-hover-background, var(--button-background));
    color: var(--button-hover-color, var(--button-color));
    border-color: var(--button-hover-border-color, transparent);
  }

  &:active,
  &.is-active {
    --button-icon-color: var(--button-active-color, var(--button-color));

    background: var(--button-active-background, var(--button-background));
    color: var(--button-active-color, var(--button-color));
    border-color: var(--button-active-border-color, transparent);
  }

  &.is-disabled {
    --button-icon-color: var(--button-icon-disabled-color, var(--button-color));

    background: var(--button-disabled-background, transparent);
    color: var(--button-disabled-color);
    border-color: var(--button-disabled-border-color, transparent);
    cursor: not-allowed;
  }

  &__icon {
    color: var(--button-icon-color, inherit);
    line-height: 1;
    transition: color .2s ease-out;

    #{$self}.is-one-icon-only:not(#{$self}--link) & {
      color: inherit;
    }
  }

  &__loader {
    cursor: wait;

    #{$self}--small & {
      --spinner-size: 16px;
    }
  }

  &.is-one-icon-only {
    padding: 0;

    width: var(--button-width, var(--button-height, 40px));
  }

  &--small {
    @include txt-s-m;

    --button-height: 32px;

    padding: 7px 11px;
    border-radius: 8px;
  }

  &--large {
    @include txt-m-m;

    --button-height: 48px;

    padding: 11px 23px;
  }

  @each $variant in $button-variants {
    $type: list.nth($variant, 1);
    $color: list.nth($variant, 2);
    $scheme: list.nth($variant, 3);

    &--#{$type}_#{$color} {
      @each $property, $value in $scheme {
        --button-#{$property}: var(--button-#{$type}-#{$color}-#{$property});
      }
    }

    /* prettier-ignore */
    @include element-variant('button', $type + '-' + $color, $scheme);
  }

  &--link {
    &_primary,
    &_secondary {
      width: auto !important;
      height: auto !important;
      padding: 0 !important;
      border: none !important;
      background: none !important;
      text-decoration: none;
    }
  }

  &--link#{$self}--small {
    @include txt-r-m;
  }
}