@use 'sass:color';
@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$button: () !default;
$button: map.merge(
  (
    color: value('content-color-base'),
    color-hover: value('color-primary-light-2'),
    color-focus: value('color-primary-light-2'),
    color-active: value('color-primary-dark-1'),
    color-disabled: value('content-color-disabled'),
    bg-color: value('fill-color-base'),
    bg-color-hover: value('button-bg-color'),
    bg-color-focus: value('button-bg-color'),
    bg-color-active: value('button-bg-color'),
    bg-color-disabled: value('fill-color-background'),
    b-color: value('border-color-base'),
    b-color-hover: value('color-primary-light-2'),
    b-color-focus: value('color-primary-light-2'),
    b-color-active: value('color-primary-dark-1'),
    b-color-disabled: value('border-color-light-1'),
    border: value('border-shape') value('button-b-color'),
    radius: value('radius-base'),
    pulse-s-color: value('color-primary-base'),
    pulse-opacity: 60%,
    pulse-size: 6px,
    pulse-duration: 800ms,
    pulse-timing: ease,
    height: 32px,
    v-padding: 0,
    h-padding: 14px,
    font-size: value('font-size-base'),
    series-span: 8px,
    icon-span: 6px,
    d-color-typed: rgba($color-white, 50%),
    badge-color: value('color-white'),
    badge-bg-color: value('color-error-base'),
    badge-b-color: value('color-error-base')
  ),
  $button
);

.#{$namespace}-button {
  &-vars {
    @include define-preset-values('button', $button);
  }

  $self: &;

  @mixin disabled($selector) {
    @at-root {
      #{$self}--disabled#{$selector} {
        &,
        &:hover,
        &:active,
        &.active {
          @content;
        }
      }
    }
  }

  @mixin define-button-style($style-map) {
    @include define-preset-style('button', $style-map);
  }

  @include basis {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: value('button-height');
    padding: value('button-v-padding') value('button-h-padding');
    font-weight: 400;
    line-height: 1;
    color: value('button-color');
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    background-color: value('button-bg-color');
    border: value('button-border');
    border-radius: value('button-radius');
    outline: 0;
    transition: value('transition-color'), value('transition-background'),
      value('transition-border'), value('transition-shadow');
  }

  &:hover {
    color: value('button-color-hover');
    background-color: value('button-bg-color-hover');
    border-color: value('button-b-color-hover');
    outline: 0;
  }

  &:focus {
    color: value('button-color-focus');
    background-color: value('button-bg-color-focus');
    border-color: value('button-b-color-focus');
    outline: 0;
  }

  &:active {
    color: value('button-color-active');
    background-color: value('button-bg-color-active');
    border-color: value('button-b-color-active');
  }

  @include disabled('') {
    color: value('button-color-disabled');
    cursor: not-allowed;
    background-color: value('button-bg-color-disabled');
    border-color: value('button-b-color-disabled');
  }

  &--block {
    display: flex;
    width: 100%;
  }

  &:not(#{&}--block) + &:not(#{&}--block) {
    margin-inline-start: value('button-series-span');
  }

  &--small {
    @include define-preset-values(
      'button',
      (
        height: 24px,
        h-padding: 10px
      )
    );
  }

  &--large {
    @include define-preset-values(
      'button',
      (
        height: 40px,
        h-padding: 20px
      )
    );
  }

  &::after {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    content: '';
    background-color: transparent;
    border-radius: inherit;
    animation-duration: value('button-pulse-duration');
    animation-timing-function: value('button-pulse-timing');
    animation-iteration-count: 1;
  }

  &--pulsing::after {
    animation-name:
      #{$namespace}-button-pulse,
      #{$namespace}-button-pulse-opacity;

    @keyframes #{$namespace}-button-pulse {
      0% {
        box-shadow: 0 0 1px 0 value('button-pulse-s-color');
      }

      100% {
        box-shadow: 0 0 1px value('button-pulse-size') value('button-pulse-s-color');
      }
    }

    @keyframes #{$namespace}-button-pulse-opacity {
      0% {
        opacity: value('button-pulse-opacity');
      }

      100% {
        opacity: 0%;
      }
    }
  }

  &--dashed {
    border-style: dashed;

    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: transparent;
    }
  }

  &--text {
    border-color: transparent;

    &::after {
      display: none;
    }

    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      background-color: transparent;
      border-color: transparent;
    }
  }

  &--ghost {
    @include define-preset-values(
      'button',
      (
        color: rgba($color-white, 0.8),
        bg-color: transparent,
        bg-color-hover: transparent,
        bg-color-focus: transparent,
        bg-color-active: transparent,
        bg-color-disabled: transparent,
        b-color: rgba($color-white, 0.6)
      )
    );

    @include define-button-style(
      (
        color-hover: 'color-primary-base',
        color-focus: 'color-primary-base',
        color-active: 'color-primary-base',
        color-disabled: 'content-color-disabled',
        b-color-hover: 'color-primary-base',
        b-color-active: 'color-primary-base',
        b-color-disabled: 'content-color-disabled'
      )
    );
  }

  &--text#{&}--ghost {
    border-color: transparent;
  }

  $d-color: value('button-d-color-typed');

  @each $type in $types {
    @at-root {
      &--#{$type} {
        @include define-button-style(
          (
            color: 'color-white',
            color-hover: 'color-white',
            color-focus: 'color-white',
            color-active: 'color-white',
            color-disabled: 'content-color-disabled',
            bg-color: 'color' $type 'base',
            bg-color-hover: 'color' $type 'light-2',
            bg-color-focus: 'color' $type 'light-2',
            bg-color-active: 'color' $type 'dark-1',
            bg-color-disabled: 'fill-color-background',
            b-color: 'color' $type 'base',
            b-color-hover: 'color' $type 'light-2',
            b-color-focus: 'color' $type 'light-2',
            b-color-active: 'color' $type 'dark-1',
            b-color-disabled: 'border-color-light-1',
            pulse-s-color: 'color' $type 'dark-1'
          )
        );
      }

      &--#{$type}#{&}--simple {
        @include define-button-style(
          (
            color: 'color' $type 'base',
            color-hover: 'color' $type 'base',
            color-focus: 'color-white',
            color-active: 'color-white',
            color-disabled: 'content-color-disabled',
            bg-color: 'color' $type 'opacity-8',
            bg-color-hover: 'color' $type 'opacity-7',
            bg-color-focus: 'color' $type 'opacity-3',
            bg-color-active: 'color' $type 'opacity-3',
            bg-color-disabled: 'fill-color-background',
            b-color: 'color' $type 'opacity-4',
            b-color-hover: 'color' $type 'opacity-4',
            b-color-focus: 'color' $type 'opacity-3',
            b-color-active: 'color' $type 'opacity-3',
            b-color-disabled: 'border-color-light-1'
          )
        );
      }

      &--#{$type}#{&}--ghost {
        @include define-preset-values(
          'button',
          (
            bg-color: transparent,
            bg-color-hover: rgba($color-white, 0.1),
            bg-color-focus: rgba($color-white, 0.1),
            bg-color-active: rgba($color-white, 0.2),
            bg-color-disabled: transparent
          )
        );

        @include define-button-style(
          (
            color: 'color' $type 'base',
            color-hover: 'color' $type 'base',
            color-focus: 'color' $type 'base',
            color-active: 'color' $type 'base',
            color-disabled: 'content-color-disabled',
            b-color-disabled: 'content-color-disabled'
          )
        );
      }

      &--#{$type}#{&}--text,
      &--#{$type}#{&}--dashed {
        @include define-button-style(
          (
            color: 'color' $type 'base',
            color-hover: 'color' $type 'light-2',
            color-focus: 'color' $type 'light-2',
            color-active: 'color' $type 'dark-1'
          )
        );
      }

      &-group &--#{$type} {
        &:first-child {
          border-inline-end-color: $d-color;
        }

        &:last-child {
          border-inline-start-color: $d-color;
        }

        &:not(:first-child, :last-child) {
          border-inline-color: $d-color;
        }
      }
    }
  }

  &--text#{&}--disabled {
    &,
    &:hover,
    &:active,
    &.active {
      background-color: transparent;
      border-color: transparent;
    }
  }

  &--circle {
    border-radius: value('button-height');
  }

  &--loading {
    position: relative;
    pointer-events: none;
    cursor: default;

    &::before {
      position: absolute;
      inset: -1px;
      z-index: 1;
      pointer-events: none;
      content: '';
      background-color: value('color-white');
      border-radius: inherit;
      opacity: 25%;
      transition: value('transition-opacity');
    }
  }

  &__icon {
    display: flex;
    align-items: center;
    margin-inline-end: value('button-icon-span');
  }

  &--icon-only {
    width: value('button-height');
    padding: 0;
  }

  &--icon-only &__icon {
    margin: 0;
  }

  &--icon-only#{&}--small {
    width: value('button-height');
  }

  &--icon-only#{&}--large {
    width: value('button-height');
  }

  &__badge {
    margin-inline-start: 8px;
    pointer-events: none;

    .#{$namespace}-badge__content {
      color: value('button-badge-color');
      background-color: value('button-badge-bg-color');
      box-shadow: value('shadow-border') value('button-badge-b-color');
    }
  }

  @each $type in $types {
    &__badge--#{$type} {
      @include define-button-style(
        (
          badge-color: 'button-bg-color',
          badge-bg-color: 'button-color',
          badge-b-color: 'button-color'
        )
      );
    }

    &--ghost &__badge--#{$type} {
      @include define-button-style(
        (
          badge-color: 'button-color',
          badge-bg-color: transparent
        )
      );
    }

    &--simple &__badge--#{$type},
    &--text &__badge--#{$type},
    &--dashed &__badge--#{$type} {
      @include define-button-style(
        (
          badge-color: 'color-white'
        )
      );
    }
  }

  &__badge--disabled .#{$namespace}-badge__content {
    @include define-button-style(
      (
        badge-color: 'button-color-disabled',
        badge-bg-color: 'button-bg-color-disabled',
        badge-b-color: 'button-b-color-disabled'
      )
    );
  }

  @at-root {
    &-group {
      @include basis {
        display: inline-flex;
        align-items: center;
      }

      #{$self} {
        @include define-preset-values(
          'button',
          (
            series-span: 0
          )
        );

        border-radius: 0;

        &:hover,
        &:focus {
          z-index: 1;
        }

        &:active,
        &--active {
          z-index: 2;
        }

        &--first {
          margin-inline-end: 0;

          @include logical-radius(value('button-radius') 0 0 value('button-radius'));
        }

        &--last {
          margin-inline-end: 0;

          @include logical-radius(0 value('button-radius') value('button-radius') 0);
        }

        &:not(#{$self}--last) {
          margin-inline-end: -1px;
        }

        &--text {
          border-color: transparent;
        }
      }

      &--circle {
        #{$self} {
          &--first {
            @include logical-radius(value('button-height') 0 0 value('button-height'));
          }

          &--last {
            @include logical-radius(0 value('button-height') value('button-height') 0);
          }
        }
      }
    }
  }
}