@use "variables";
@use "mixins";
@use "global";
@use "sass:color";

.tv-btn {
  @include mixins.defaultButton();
  display: inline-flex;
  align-items: center;
  justify-content: center;

  .tv-btn-content {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .tv-btn-text {
    display: inline-block;
    line-height: 1;
  }

  .tv-icon {
    @include mixins.defaultIconSize(18px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .icon-left {
    margin-right: 8px;
  }

  .icon-right {
    margin-left: 8px;
  }

  &.tv-btn-full {
    width: 100%;
  }

  &.tv-btn-rounded {
    border-radius: 10px;
  }

  &.tv-btn-sm {
    @include mixins.buttonSize(80px, auto, 12px, 0.6rem 1rem);
  }

  &.tv-btn-lg {
    @include mixins.buttonSize(150px, auto, 15px, 1rem 1.5rem);
  }

  &.tv-btn-success {
    @include mixins.typeButton(variables.$success-bg,
      variables.$light-button-text,
      variables.$success-bg );
  }

  &.tv-btn-error {
    @include mixins.typeButton(variables.$error-bg,
      variables.$light-button-text,
      variables.$error-bg );
  }

  &.tv-btn-warning {
    @include mixins.typeButton(variables.$warning-bg,
      variables.$light-button-text,
      variables.$warning-bg );
  }

  &.tv-btn-info {
    @include mixins.typeButton(variables.$info-bg,
      variables.$light-button-text,
      variables.$info-bg );
  }

  & {
    @include mixins.typeButton(variables.$dark-button-bg,
      variables.$dark-text,
      variables.$dark-button-bg );
  }

  &.tv-btn-icon-only {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: unset;
    min-height: unset;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;

    &.tv-icon {
      @include mixins.defaultIconSize(20px);
      margin: 0;
      color: variables.$dark-text;
    }

    &:hover .tv-icon {
      color: color.adjust(variables.$dark-text, $lightness: -20%);
      transform: scale(1.1);
    }

    &:active .tv-icon {
      transform: scale(0.95);
    }

    &.tv-btn-disabled {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  .tv-spinner {
    @include mixins.defaultIconSize(18px);
    animation: spin 1s linear infinite;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: currentColor;
  }

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

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

}