@use '../../style/variables' as *;
@use '../../style/mixins' as *;
@use './mixin' as *;

$btn-prefix: #{$prefix}-btn;

.#{$btn-prefix} {
  @include button-vars(
    solid,
    default,
    var(--ty-color-text),
    var(--ty-color-bg-container),
    var(--ty-color-border-btn-default),
    var(--ty-color-bg-container),
    var(--ty-color-primary),
    var(--ty-color-primary),
    var(--ty-color-fill),
    var(--ty-color-primary),
    var(--ty-color-primary)
  );

  box-sizing: border-box;
  border: 1px solid var(--ty-button-current-border);
  outline: none;
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: var(--ty-button-min-width, auto);
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  border-radius: var(--ty-button-radius, var(--ty-border-radius));
  transition: $btn-transition;
  line-height: var(--ty-button-line-height, var(--ty-line-height-base));

  @include button-style(
    var(--ty-button-current-text),
    var(--ty-button-current-bg),
    var(--ty-button-current-border),
    var(--ty-button-current-shadow, none),
    var(--ty-button-current-bg-hover),
    var(--ty-button-current-border-hover),
    var(--ty-button-current-text-hover),
    var(--ty-button-current-shadow-hover, var(--ty-button-current-shadow, none)),
    var(--ty-button-current-bg-active),
    var(--ty-button-current-border-active),
    var(--ty-button-current-text-active),
    var(--ty-button-current-shadow-active, var(--ty-button-current-shadow-hover, var(--ty-button-current-shadow, none)))
  );

  &__loader {
    @include loader;
  }

  &__icon-container,
  &__loader {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    line-height: 1;
    font-size: var(--ty-button-icon-size-current, 1em);
  }

  &__icon-container > svg {
    display: block;
  }

  &__children {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
  }

  &_variant-solid {
    &.#{$btn-prefix}_color-default {
      @include button-vars(
        solid,
        default,
        var(--ty-color-text),
        var(--ty-color-bg-container),
        var(--ty-color-border-btn-default),
        var(--ty-color-bg-container),
        var(--ty-color-primary),
        var(--ty-color-primary),
        var(--ty-color-fill),
        var(--ty-color-primary),
        var(--ty-color-primary),
        var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none)),
        var(--ty-button-solid-default-shadow-hover, var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none))),
        var(--ty-button-solid-default-shadow-active, var(--ty-button-solid-default-shadow-hover, var(--ty-button-solid-default-shadow, var(--ty-shadow-control, none))))
      );
    }

    &.#{$btn-prefix}_color-primary {
      @include button-vars(
        solid,
        primary,
        #fff,
        var(--ty-color-primary),
        var(--ty-color-primary),
        var(--ty-color-primary-hover),
        var(--ty-color-primary-hover),
        #fff,
        var(--ty-color-primary-active),
        var(--ty-color-primary-active),
        #fff,
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-info {
      @include button-vars(
        solid,
        info,
        #fff,
        var(--ty-color-info),
        var(--ty-color-info),
        var(--ty-color-info-hover),
        var(--ty-color-info-hover),
        #fff,
        var(--ty-color-info-active),
        var(--ty-color-info-active),
        #fff,
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-success {
      @include button-vars(
        solid,
        success,
        #fff,
        var(--ty-color-success),
        var(--ty-color-success),
        var(--ty-color-success-hover),
        var(--ty-color-success-hover),
        #fff,
        var(--ty-color-success-active),
        var(--ty-color-success-active),
        #fff,
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-warning {
      @include button-vars(
        solid,
        warning,
        #fff,
        var(--ty-color-warning),
        var(--ty-color-warning),
        var(--ty-color-warning-hover),
        var(--ty-color-warning-hover),
        #fff,
        var(--ty-color-warning-active),
        var(--ty-color-warning-active),
        #fff,
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-danger {
      @include button-vars(
        solid,
        danger,
        #fff,
        var(--ty-color-danger),
        var(--ty-color-danger),
        var(--ty-color-danger-hover),
        var(--ty-color-danger-hover),
        #fff,
        var(--ty-color-danger-active),
        var(--ty-color-danger-active),
        #fff,
        none,
        none,
        none
      );
    }
  }

  &_variant-outline {
    &.#{$btn-prefix}_color-default {
      @include button-vars(
        outline,
        default,
        var(--ty-color-text),
        var(--ty-color-bg-container),
        var(--ty-color-border-btn-default),
        var(--ty-color-fill),
        var(--ty-color-border),
        var(--ty-color-text),
        var(--ty-color-fill-secondary),
        var(--ty-color-border-secondary),
        var(--ty-color-text),
        var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none)),
        var(--ty-button-outline-default-shadow-hover, var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none))),
        var(--ty-button-outline-default-shadow-active, var(--ty-button-outline-default-shadow-hover, var(--ty-button-outline-default-shadow, var(--ty-shadow-control, none))))
      );
    }

    &.#{$btn-prefix}_color-primary {
      @include button-vars(
        outline,
        primary,
        var(--ty-color-primary),
        var(--ty-color-bg-container),
        var(--ty-color-primary),
        var(--ty-color-primary-bg),
        var(--ty-color-primary-hover),
        var(--ty-color-primary),
        var(--ty-color-primary-bg-hover),
        var(--ty-color-primary-active),
        var(--ty-color-primary),
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-info {
      @include button-vars(
        outline,
        info,
        var(--ty-color-info),
        var(--ty-color-bg-container),
        var(--ty-color-info),
        rgba(64, 169, 255, 0.12),
        var(--ty-color-info-hover),
        var(--ty-color-info),
        rgba(64, 169, 255, 0.18),
        var(--ty-color-info-active),
        var(--ty-color-info),
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-success {
      @include button-vars(
        outline,
        success,
        var(--ty-color-success),
        var(--ty-color-bg-container),
        var(--ty-color-success),
        rgba(82, 196, 26, 0.12),
        var(--ty-color-success-hover),
        var(--ty-color-success),
        rgba(82, 196, 26, 0.18),
        var(--ty-color-success-active),
        var(--ty-color-success),
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-warning {
      @include button-vars(
        outline,
        warning,
        var(--ty-color-warning),
        var(--ty-color-bg-container),
        var(--ty-color-warning),
        rgba(250, 173, 20, 0.12),
        var(--ty-color-warning-hover),
        var(--ty-color-warning),
        rgba(250, 173, 20, 0.18),
        var(--ty-color-warning-active),
        var(--ty-color-warning),
        none,
        none,
        none
      );
    }

    &.#{$btn-prefix}_color-danger {
      @include button-vars(
        outline,
        danger,
        var(--ty-color-danger),
        var(--ty-color-bg-container),
        var(--ty-color-danger),
        rgba(255, 77, 79, 0.12),
        var(--ty-color-danger-hover),
        var(--ty-color-danger),
        rgba(255, 77, 79, 0.18),
        var(--ty-color-danger-active),
        var(--ty-color-danger),
        none,
        none,
        none
      );
    }
  }

  &_variant-ghost {
    &.#{$btn-prefix}_color-default {
      @include button-vars(
        ghost,
        default,
        var(--ty-color-text),
        transparent,
        transparent,
        var(--ty-color-fill),
        transparent,
        var(--ty-color-text),
        var(--ty-color-fill-secondary),
        transparent,
        var(--ty-color-text)
      );
    }

    &.#{$btn-prefix}_color-primary {
      @include button-vars(
        ghost,
        primary,
        var(--ty-color-primary),
        transparent,
        transparent,
        var(--ty-color-primary-bg),
        transparent,
        var(--ty-color-primary),
        var(--ty-color-primary-bg-hover),
        transparent,
        var(--ty-color-primary)
      );
    }

    &.#{$btn-prefix}_color-info {
      @include button-vars(
        ghost,
        info,
        var(--ty-color-info),
        transparent,
        transparent,
        rgba(64, 169, 255, 0.12),
        transparent,
        var(--ty-color-info),
        rgba(64, 169, 255, 0.18),
        transparent,
        var(--ty-color-info)
      );
    }

    &.#{$btn-prefix}_color-success {
      @include button-vars(
        ghost,
        success,
        var(--ty-color-success),
        transparent,
        transparent,
        rgba(82, 196, 26, 0.12),
        transparent,
        var(--ty-color-success),
        rgba(82, 196, 26, 0.18),
        transparent,
        var(--ty-color-success)
      );
    }

    &.#{$btn-prefix}_color-warning {
      @include button-vars(
        ghost,
        warning,
        var(--ty-color-warning),
        transparent,
        transparent,
        rgba(250, 173, 20, 0.12),
        transparent,
        var(--ty-color-warning),
        rgba(250, 173, 20, 0.18),
        transparent,
        var(--ty-color-warning)
      );
    }

    &.#{$btn-prefix}_color-danger {
      @include button-vars(
        ghost,
        danger,
        var(--ty-color-danger),
        transparent,
        transparent,
        rgba(255, 77, 79, 0.12),
        transparent,
        var(--ty-color-danger),
        rgba(255, 77, 79, 0.18),
        transparent,
        var(--ty-color-danger)
      );
    }
  }

  &_variant-link {
    &.#{$btn-prefix}_color-default {
      @include button-vars(
        link,
        default,
        var(--ty-color-text),
        transparent,
        transparent,
        transparent,
        transparent,
        var(--ty-color-text),
        transparent,
        transparent,
        var(--ty-color-text)
      );
    }

    &.#{$btn-prefix}_color-primary {
      @include button-vars(
        link,
        primary,
        var(--ty-color-primary),
        transparent,
        transparent,
        transparent,
        transparent,
        var(--ty-color-primary),
        transparent,
        transparent,
        var(--ty-color-primary)
      );
    }

    &.#{$btn-prefix}_color-info {
      @include button-vars(
        link,
        info,
        var(--ty-color-info),
        transparent,
        transparent,
        transparent,
        transparent,
        var(--ty-color-info),
        transparent,
        transparent,
        var(--ty-color-info)
      );
    }

    &.#{$btn-prefix}_color-success {
      @include button-vars(
        link,
        success,
        var(--ty-color-success),
        transparent,
        transparent,
        transparent,
        transparent,
        var(--ty-color-success),
        transparent,
        transparent,
        var(--ty-color-success)
      );
    }

    &.#{$btn-prefix}_color-warning {
      @include button-vars(
        link,
        warning,
        var(--ty-color-warning),
        transparent,
        transparent,
        transparent,
        transparent,
        var(--ty-color-warning),
        transparent,
        transparent,
        var(--ty-color-warning)
      );
    }

    &.#{$btn-prefix}_color-danger {
      @include button-vars(
        link,
        danger,
        var(--ty-color-danger),
        transparent,
        transparent,
        transparent,
        transparent,
        var(--ty-color-danger),
        transparent,
        transparent,
        var(--ty-color-danger)
      );
    }

    &:hover {
      text-decoration-line: underline;
    }

    &:disabled {
      color: var(--ty-button-text-link-disabled, var(--ty-color-text-quaternary));
      background-color: transparent;
      border-color: transparent;
      text-decoration-line: none;
    }
  }

  // Sizes
  &_sm {
    @include btn-size(
      var(--ty-button-padding-inline-sm, $btn-padding-sm),
      var(--ty-button-font-size-sm, var(--ty-font-size-sm)),
      var(--ty-button-height-sm, var(--ty-height-sm)),
      var(--ty-button-gap-sm, 4px),
      var(--ty-button-icon-size-sm, 14px)
    );
  }

  &_md {
    @include btn-size(
      var(--ty-button-padding-inline-md, $btn-padding-md),
      var(--ty-button-font-size-md, var(--ty-font-size-base)),
      var(--ty-button-height-md, var(--ty-height-md)),
      var(--ty-button-gap-md, 6px),
      var(--ty-button-icon-size-md, 16px)
    );
  }

  &_lg {
    @include btn-size(
      var(--ty-button-padding-inline-lg, $btn-padding-lg),
      var(--ty-button-font-size-lg, var(--ty-font-size-lg)),
      var(--ty-button-height-lg, var(--ty-height-lg)),
      var(--ty-button-gap-lg, 8px),
      var(--ty-button-icon-size-lg, 18px)
    );
  }

  &_icon-only {
    width: var(--ty-button-height-current);
    min-width: var(--ty-button-height-current);
    padding-inline: 0;
  }

  &_block {
    width: 100%;

    & + & {
      margin: 0;
    }
  }

  &_round {
    border-radius: var(--ty-button-round-radius, var(--ty-height-lg));
  }

  &_circle {
    border-radius: 50%;
  }

  &_loading {
    position: relative;
    pointer-events: none;

    &::before {
      content: '';
      position: absolute;
      inset: -1px;
      z-index: 1;
      display: block;
      background: var(--ty-button-loading-bg, var(--ty-color-bg-container));
      border-radius: inherit;
      opacity: var(--ty-button-loading-opacity, $btn-loading-opacity);
      transition: opacity 0.2s;
    }

    &:disabled {
      color: var(--ty-button-current-text);
      background-color: var(--ty-button-current-bg);
      border-color: var(--ty-button-current-border);
    }
  }

  &_disabled {
    cursor: not-allowed;
  }
}

.#{$btn-prefix}-group {
  display: inline-block;

  & + .#{$btn-prefix}-group {
    margin-left: var(--ty-button-group-gap, 0);
  }

  .#{$btn-prefix} {
    position: relative;
    border-radius: 0;
    float: left;

    & + .#{$btn-prefix} {
      margin-left: calc(-1 * var(--ty-control-group-border-width, 1px));
    }

    &:hover {
      z-index: var(--ty-control-group-focus-z-index, 1);
    }

    &:first-child {
      border-top-left-radius: var(
        --ty-control-group-radius,
        var(--ty-button-radius, var(--ty-border-radius))
      );
      border-bottom-left-radius: var(
        --ty-control-group-radius,
        var(--ty-button-radius, var(--ty-border-radius))
      );
    }

    &:last-child {
      border-top-right-radius: var(
        --ty-control-group-radius,
        var(--ty-button-radius, var(--ty-border-radius))
      );
      border-bottom-right-radius: var(
        --ty-control-group-radius,
        var(--ty-button-radius, var(--ty-border-radius))
      );
    }
  }

  &_round {
    .#{$btn-prefix} {
      &:first-child {
        border-top-left-radius: var(--ty-button-round-radius, var(--ty-height-lg));
        border-bottom-left-radius: var(--ty-button-round-radius, var(--ty-height-lg));
      }

      &:last-child {
        border-top-right-radius: var(--ty-button-round-radius, var(--ty-height-lg));
        border-bottom-right-radius: var(--ty-button-round-radius, var(--ty-height-lg));
      }
    }
  }

  &_variant-solid#{&}_color-primary,
  &_variant-solid#{&}_color-info,
  &_variant-solid#{&}_color-success,
  &_variant-solid#{&}_color-warning,
  &_variant-solid#{&}_color-danger {
    .#{$btn-prefix} {
      &:not(:first-child) {
        border-left-color: var(
          --ty-button-group-divider-color,
          var(--ty-control-group-divider-color, var(--ty-color-border-secondary))
        );
      }
    }
  }
}