@use '../../styles/mixins/color-modes';

// States
@mixin button-activated {
  &:hover {
    @content;
  }
}

@mixin button-pressed {
  &:active,
  &.rs-btn[data-active='true'] {
    @content;
  }
}

@mixin button-disabled {
  &:disabled,
  &.rs-btn[data-disabled='true'] {
    @content;

    @include color-modes.high-contrast-mode {
      border-color: var(--rs-btn-default-disabled-border-color);
    }
  }
}

@mixin button-size-lg {
  --rs-btn-size: var(--rs-btn-size-lg);
  --rs-btn-font-size: var(--rs-btn-font-size-lg);
  --rs-btn-line-height: var(--rs-btn-line-height-lg);
  --rs-btn-padding-inline: var(--rs-btn-padding-inline-lg);
  --rs-btn-padding-block: var(--rs-btn-padding-block-lg);
  --rs-btn-icon-size: var(--rs-btn-icon-size-lg);
}

@mixin button-size-md {
  --rs-btn-size: var(--rs-btn-size-md);
  --rs-btn-font-size: var(--rs-btn-font-size-md);
  --rs-btn-line-height: var(--rs-btn-line-height-md);
  --rs-btn-padding-inline: var(--rs-btn-padding-inline-md);
  --rs-btn-padding-block: var(--rs-btn-padding-block-md);
  --rs-btn-icon-size: var(--rs-btn-icon-size-md);
}

@mixin button-size-sm {
  --rs-btn-size: var(--rs-btn-size-sm);
  --rs-btn-font-size: var(--rs-btn-font-size-sm);
  --rs-btn-line-height: var(--rs-btn-line-height-sm);
  --rs-btn-padding-inline: var(--rs-btn-padding-inline-sm);
  --rs-btn-padding-block: var(--rs-btn-padding-block-sm);
  --rs-btn-icon-size: var(--rs-btn-icon-size-sm);
}

@mixin button-size-xs {
  --rs-btn-size: var(--rs-btn-size-xs);
  --rs-btn-font-size: var(--rs-btn-font-size-xs);
  --rs-btn-line-height: var(--rs-btn-line-height-xs);
  --rs-btn-padding-inline: var(--rs-btn-padding-inline-xs);
  --rs-btn-padding-block: var(--rs-btn-padding-block-xs);
  --rs-btn-icon-size: var(--rs-btn-icon-size-xs);
}

// Button Style Mixins
@mixin btn-subtle {
  color: var(--rs-btn-subtle-text);
  background-color: transparent;

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

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

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