@use '../../internals/Box/styles/index';
@use '../../styles/colors/colors-base' as c;
@use '../../styles/mixins/utilities' as utils;
@use '../../internals/Ripple/styles/index' as ripple;
@use '../../styles/mixins/color-modes';
@use 'variables' as vars;
@use 'mixin';

//
// Buttons
// --------------------------------------------------

// Default Button
.rs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0; // For input.btn
  font-weight: var(--rs-btn-font-weight);
  font-size: var(--rs-btn-font-size, var(--rs-font-size-sm));
  line-height: var(--rs-btn-line-height, 1.25rem);
  height: var(--rs-btn-size, 2.25rem);
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--rs-btn-transition);
  // Reset border style in all browser
  border-width: 0;
  border-style: solid;
  border-color: var(--rs-btn-default-border-color, none);
  user-select: none;
  text-decoration: none;
  color: var(--rs-btn-default-text);
  background-color: var(--rs-btn-default-bg);
  border-radius: var(--rs-radius-md);
  padding-inline: var(--rs-btn-padding-inline);
  padding-block: var(--rs-btn-padding-block);

  @include color-modes.high-contrast-mode {
    transition: none;
    border-width: 1px;
    border-color: var(--rs-btn-default-border-color);
  }

  @include utils.with-focus-ring;

  @include mixin.button-activated {
    color: var(--rs-btn-default-hover-text);
    background-color: var(--rs-btn-default-hover-bg);
    text-decoration: none;
  }

  @include mixin.button-pressed {
    color: var(--rs-btn-default-active-text);
    background-color: var(--rs-btn-default-active-bg);
  }

  @include mixin.button-disabled {
    cursor: var(--rs-cursor-disabled);
    color: var(--rs-btn-default-disabled-text);
    background-color: var(--rs-btn-default-disabled-bg);
  }

  @include ripple.with-ripple;

  // Button Sizes
  // --------------------------------------------------

  & {
    @include mixin.button-size-md;
  }

  &[data-size='lg'] {
    @include mixin.button-size-lg;
  }

  &[data-size='md'] {
    @include mixin.button-size-md;
  }

  &[data-size='sm'] {
    @include mixin.button-size-sm;
  }

  &[data-size='xs'] {
    @include mixin.button-size-xs;
  }
}

.rs-btn-start-icon {
  line-height: 0; // Eliminate whitespace
  margin-inline-end: var(--rs-btn-icon-gap);
}

.rs-btn-end-icon {
  line-height: 0; // Eliminate whitespace
  margin-inline-start: var(--rs-btn-icon-gap);
}

// Appearance variants
// --------------------------------------------------

// Primary Button
.rs-btn[data-appearance='primary'] {
  color: var(--rs-btn-primary-text);
  background-color: var(--rs-btn-primary-bg);
  border-color: var(--rs-btn-primary-border-color);

  @include mixin.button-activated {
    color: var(--rs-btn-primary-text);
    background-color: var(--rs-btn-primary-hover-bg);
  }

  @include mixin.button-pressed {
    color: var(--rs-btn-primary-text);
    background-color: var(--rs-btn-primary-active-bg);
  }

  @include mixin.button-disabled {
    color: var(--rs-btn-primary-text);
    background-color: var(--rs-btn-primary-bg);
    opacity: 0.3;
  }
}

// Subtle Button
.rs-btn[data-appearance='subtle'],
.rs-btn-subtle {
  color: var(--rs-btn-subtle-text);
  background-color: transparent;

  @include mixin.button-activated {
    color: var(--rs-btn-subtle-hover-text);
    background-color: var(--rs-btn-subtle-hover-bg);
  }

  @include mixin.button-pressed {
    color: var(--rs-btn-subtle-active-text);
    background-color: var(--rs-btn-subtle-active-bg);
  }

  @include mixin.button-disabled {
    color: var(--rs-btn-subtle-disabled-text);
    background: none;
  }
}

// Link buttons
.rs-btn[data-appearance='link'] {
  color: var(--rs-btn-link-text);
  background-color: transparent;

  @include mixin.button-activated {
    color: var(--rs-btn-link-hover-text);
    background-color: transparent;
    text-decoration: var(--rs-link-hover-decoration);
  }

  @include mixin.button-pressed {
    color: var(--rs-btn-link-active-text);
    background-color: transparent;
  }

  @include mixin.button-disabled {
    color: var(--rs-btn-link-hover-text);
    background-color: transparent;
    text-decoration: none;
    opacity: 0.3;
  }
}

// Ghost Button
.rs-btn[data-appearance='ghost'] {
  color: var(--rs-btn-ghost-text);
  background-color: transparent;
  border: var(--rs-btn-ghost-border-width) solid var(--rs-btn-ghost-border);
  padding-inline: calc(var(--rs-btn-padding-inline) - var(--rs-btn-ghost-border-width));

  @include mixin.button-activated {
    color: var(--rs-btn-ghost-hover-text);
    background-color: transparent;
    border-color: var(--rs-btn-ghost-hover-border);
    box-shadow: 0 0 0 1px var(--rs-btn-ghost-hover-border);
  }

  @include mixin.button-pressed {
    color: var(--rs-btn-ghost-active-text);
    background-color: transparent;
    border-color: var(--rs-btn-ghost-active-border);
  }

  @include mixin.button-disabled {
    color: var(--rs-btn-ghost-text);
    background-color: transparent;
    opacity: 0.3;
    border-color: var(--rs-btn-ghost-border);
    box-shadow: var(--rs-shadow-none);
  }
}

// Spectrum buttons
@each $color in c.$spectrum {
  // 将颜色名称作为字符串处理
  $color-str: '#{$color}';
  $C200: var(--rs-#{$color-str}-200);
  $C300: var(--rs-#{$color-str}-300);
  $C400: var(--rs-#{$color-str}-400);
  $C500: var(--rs-#{$color-str}-500);
  $C600: var(--rs-#{$color-str}-600);
  $C700: var(--rs-#{$color-str}-700);
  $C800: var(--rs-#{$color-str}-800);
  $C900: var(--rs-#{$color-str}-900);

  .rs-btn[data-color='#{$color-str}'] {
    --rs-btn-primary-bg: #{$C500};
    --rs-btn-primary-hover-bg: #{$C700};
    --rs-btn-primary-active-bg: #{$C800};
    --rs-btn-primary-border-color: #{$C700};
    --rs-btn-subtle-hover-bg: #{$C500};
    --rs-btn-subtle-hover-text: var(--rs-body-200);
    --rs-btn-subtle-active-bg: #{$C600};
    --rs-btn-subtle-active-text: var(--rs-body-800);
    --rs-btn-ghost-border: #{$C700};
    --rs-btn-ghost-text: #{$C700};
    --rs-btn-ghost-hover-border: #{$C900};
    --rs-btn-ghost-hover-text: #{$C800};
    --rs-btn-ghost-active-border: #{$C900};
    --rs-btn-ghost-active-text: #{$C900};
    --rs-btn-link-text: #{$C700};
    --rs-btn-link-hover-text: #{$C800};
    --rs-btn-link-active-text: #{$C900};
    --rs-iconbtn-primary-addon: #{$C600};
    --rs-iconbtn-primary-activated-addon: #{$C800};
    --rs-iconbtn-primary-pressed-addon: #{$C900};

    @include color-modes.dark-mode {
      --rs-btn-primary-bg: #{$C700};
      --rs-btn-primary-hover-bg: #{$C500};
      --rs-btn-primary-active-bg: #{$C400};
      --rs-btn-primary-border-color: #{$C800};
      --rs-btn-subtle-hover-bg: #{$C600};
      --rs-btn-subtle-hover-text: #fff;
      --rs-btn-subtle-active-bg: #{$C400};
      --rs-btn-subtle-active-text: #fff;
      --rs-btn-ghost-border: #{$C500};
      --rs-btn-ghost-text: #{$C500};
      --rs-btn-ghost-hover-border: #{$C400};
      --rs-btn-ghost-hover-text: #{$C400};
      --rs-btn-ghost-active-border: #{$C200};
      --rs-btn-ghost-active-text: #{$C200};
      --rs-btn-link-text: #{$C500};
      --rs-btn-link-hover-text: #{$C400};
      --rs-btn-link-active-text: #{$C200};
      --rs-iconbtn-primary-addon: #{$C600};
      --rs-iconbtn-primary-activated-addon: #{$C400};
      --rs-iconbtn-primary-pressed-addon: #{$C300};
    }

    @include color-modes.high-contrast-mode {
      --rs-btn-primary-bg: #{$C700};
      --rs-btn-primary-hover-bg: #{$C600};
      --rs-btn-primary-active-bg: #{$C400};
      --rs-btn-subtle-hover-bg: #{$C600};
      --rs-btn-subtle-hover-text: var(--rs-gray-900);
      --rs-btn-subtle-active-bg: #{$C400};
      --rs-btn-subtle-active-text: var(--rs-gray-900);
      --rs-btn-ghost-border: #{$C500};
      --rs-btn-ghost-text: #{$C500};
      --rs-btn-ghost-hover-border: #{$C400};
      --rs-btn-ghost-hover-text: #{$C400};
      --rs-btn-ghost-active-border: #{$C200};
      --rs-btn-ghost-active-text: #{$C200};
      --rs-btn-link-text: #{$C500};
      --rs-btn-link-hover-text: #{$C400};
      --rs-btn-link-active-text: #{$C200};
    }
  }
}

// Block button
// --------------------------------------------------

.rs-btn[data-block='true'] {
  width: 100%;

  // Vertically space out multiple block buttons
  & + & {
    margin-top: 5px;
  }
}

// Button Loading state
.rs-btn[data-loading='true'] {
  color: transparent !important;
  position: relative;
  cursor: default;
  pointer-events: none;

  // Spinner
  > .rs-btn-spin {
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: var(--rs-btn-loading-spin-default-diameter);
      height: var(--rs-btn-loading-spin-default-diameter);
      margin: auto;
      top: 0;
      bottom: 0;
      inset-inline-end: 0;
      inset-inline-start: 0;
      border-radius: var(--rs-radius-full);
      z-index: 1;

      .rs-btn[data-size='xs'] & {
        width: var(--rs-btn-loading-spin-xs-diameter);
        height: var(--rs-btn-loading-spin-xs-diameter);
      }
    }

    &::before {
      border: var(--rs-btn-loading-spin-ring-wide) solid var(--rs-loader-ring);

      .rs-btn[data-appearance='primary'] & {
        border-color: rgba(248, 247, 250, 0.3);

        @include color-modes.high-contrast-mode {
          border-color: var(--rs-loader-ring-inverse);
        }
      }
    }

    &::after {
      border-width: var(--rs-btn-loading-spin-ring-wide);
      border-color: var(--rs-loader-rotor) transparent transparent;
      border-style: solid;
      animation: buttonSpin 0.6s infinite linear;

      .rs-btn[data-appearance='primary'] & {
        border-top-color: #fff;

        @include color-modes.high-contrast-mode {
          border-top-color: var(--rs-loader-rotor-inverse);
        }
      }
    }
  }

  @keyframes buttonSpin {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }
}

@mixin btn-error {
  @extend .rs-btn-subtle;

  --rs-btn-subtle-text: var(--rs-red-500);
  --rs-btn-subtle-hover-bg: var(--rs-red-500);
  --rs-btn-subtle-hover-text: #fff;
  --rs-btn-subtle-active-bg: var(--rs-red-600);
  --rs-btn-subtle-active-text: #fff;

  @include color-modes.dark-mode {
    --rs-btn-subtle-hover-bg: var(--rs-red-600);
    --rs-btn-subtle-active-bg: var(--rs-red-400);
  }
}