@use "sass:color";
@use "../base/mixins/font_size-mx" as mx;
@use "../base/font" as ft;
@use "../base/color" as cl;
@use "../base/border" as bo;

$btn-padding-xs: 5.5px !default;
$btn-padding-md: 8px !default;
$btn-padding-xl: 16px !default;

.qo-btn {
  display: inline-block;
  border-radius: bo.$border-radius-sm;

  &.qo-btn-full {
    display: block;
    border-radius: bo.$border-radius-sm;
    width: 100%;
    padding: $btn-padding-xl;
    @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
  }

  &.qo-btn-xs {
    padding: $btn-padding-xs;
    @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
  }

  &.qo-btn-md {
    padding: $btn-padding-md;
    @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
  }

  &.qo-btn-primary {
    background-color: cl.$background-primary;
    border: bo.$border-width-sm solid cl.$border-primary;
    color: cl.$text-light;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background-color: color.adjust(cl.$background-primary, $lightness: -8%);
      border-color: color.adjust(cl.$border-primary, $lightness: -8%);
    }

    &:active {
      background-color: color.adjust(cl.$background-primary, $lightness: -12%);
      border-color: color.adjust(cl.$border-primary, $lightness: -12%);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-primary;
      color: cl.$border-primary;
      &:hover {
        background-color: cl.$background-primary;
        border-color: cl.$border-primary;
        color: cl.$border-primary;
      }
    }
  }

  &.qo-btn-default {
    background-color: cl.$background-default;
    border: bo.$border-width-sm solid cl.$border-default;
    color: cl.$text-dark;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background-color: cl.$background-secondary;
      border-color: cl.$border-secondary;
    }

    &:active {
      background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
      border-color: cl.$border-secondary;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-default;
      color: cl.$border-default;
      &:hover {
        background-color: cl.$background-default;
        border-color: cl.$border-default;
        color: cl.$border-default;
      }
    }
  }

  &.qo-btn-danger {
    background-color: cl.$background-danger;
    border: bo.$border-width-sm solid cl.$border-danger;
    color: cl.$text-danger;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background-color: color.change(cl.$background-danger, $alpha: 0.06);
    }

    &:active {
      background-color: color.change(cl.$background-danger, $alpha: 0.12);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-danger;
      color: cl.$border-danger;

      &:hover {
        background-color: cl.$background-danger;
        border-color: cl.$border-danger;
        color: cl.$border-danger;
      }
    }
  }

  &.qo-btn-success {
    background-color: cl.$background-success;
    border: bo.$border-width-sm solid cl.$border-success;
    color: cl.$text-light;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background-color: color.adjust(cl.$background-success, $lightness: -8%);
      border-color: color.adjust(cl.$border-success, $lightness: -8%);
    }

    &:active {
      background-color: color.adjust(cl.$background-success, $lightness: -12%);
      border-color: color.adjust(cl.$border-success, $lightness: -12%);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-success;
      color: cl.$border-success;

      &:hover {
        background-color: cl.$background-success;
        border-color: cl.$border-success;
        color: cl.$border-success;
      }
    }
  }

  &.qo-btn-warning {
    background-color: cl.$background-warning;
    border: bo.$border-width-sm solid cl.$border-warning;
    color: cl.$text-light;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background-color: color.adjust(cl.$background-warning, $lightness: -8%);
      border-color: color.adjust(cl.$border-warning, $lightness: -8%);
    }

    &:active {
      background-color: color.adjust(cl.$background-warning, $lightness: -12%);
      border-color: color.adjust(cl.$border-warning, $lightness: -12%);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-warning;
      color: cl.$border-warning;

      &:hover {
        background-color: cl.$background-warning;
        border-color: cl.$border-warning;
        color: cl.$border-warning;
      }
    }
  }

  &.qo-btn-info {
    background-color: cl.$background-info;
    border: bo.$border-width-sm solid cl.$border-info;
    color: cl.$text-light;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;

    &:hover {
      background-color: color.adjust(cl.$background-info, $lightness: -8%);
      border-color: color.adjust(cl.$border-info, $lightness: -8%);
    }

    &:active {
      background-color: color.adjust(cl.$background-info, $lightness: -12%);
      border-color: color.adjust(cl.$border-info, $lightness: -12%);
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-info;
      color: cl.$border-info;

      &:hover {
        background-color: cl.$background-info;
        border-color: cl.$border-info;
        color: cl.$border-info;
      }
    }
  }

  // Outline variants: transparent bg + colored border/text → hover fills color + white text

  &.qo-btn-outline-primary {
    background-color: transparent;
    border: bo.$border-width-sm solid cl.$border-primary;
    color: cl.$text-primary;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: cl.$background-primary;
      border-color: cl.$border-primary;
      color: cl.$text-light;
    }

    &:active {
      background-color: color.adjust(cl.$background-primary, $lightness: -8%);
      border-color: color.adjust(cl.$border-primary, $lightness: -8%);
      color: cl.$text-light;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-primary;
      color: cl.$border-primary;

      &:hover {
        background-color: transparent;
        border-color: cl.$border-primary;
        color: cl.$border-primary;
      }
    }
  }

  &.qo-btn-outline-default {
    background-color: transparent;
    border: bo.$border-width-sm solid cl.$border-default;
    color: cl.$text-light;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: cl.$background-secondary;
      border-color: cl.$border-secondary;
      color: color.adjust(cl.$text-dark, $lightness: 20%);
    }

    &:active {
      background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
      border-color: cl.$border-secondary;
      color: cl.$text-light;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-default;
      color: cl.$border-default;

      &:hover {
        background-color: transparent;
        border-color: cl.$border-default;
        color: cl.$border-default;
      }
    }
  }

  &.qo-btn-outline-danger {
    background-color: transparent;
    border: bo.$border-width-sm solid cl.$border-danger;
    color: cl.$text-danger;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: cl.$background-danger;
      border-color: cl.$border-danger;
      color: cl.$text-light;
    }

    &:active {
      background-color: color.adjust(cl.$background-danger, $lightness: -8%);
      border-color: color.adjust(cl.$border-danger, $lightness: -8%);
      color: cl.$text-light;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-danger;
      color: cl.$border-danger;

      &:hover {
        background-color: transparent;
        border-color: cl.$border-danger;
        color: cl.$border-danger;
      }
    }
  }

  &.qo-btn-outline-success {
    background-color: transparent;
    border: bo.$border-width-sm solid cl.$border-success;
    color: cl.$text-success;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: cl.$background-success;
      border-color: cl.$border-success;
      color: cl.$text-light;
    }

    &:active {
      background-color: color.adjust(cl.$background-success, $lightness: -8%);
      border-color: color.adjust(cl.$border-success, $lightness: -8%);
      color: cl.$text-light;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-success;
      color: cl.$border-success;

      &:hover {
        background-color: transparent;
        border-color: cl.$border-success;
        color: cl.$border-success;
      }
    }
  }

  &.qo-btn-outline-warning {
    background-color: transparent;
    border: bo.$border-width-sm solid cl.$border-warning;
    color: cl.$text-warning;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: cl.$background-warning;
      border-color: cl.$border-warning;
      color: cl.$text-light;
    }

    &:active {
      background-color: color.adjust(cl.$background-warning, $lightness: -8%);
      border-color: color.adjust(cl.$border-warning, $lightness: -8%);
      color: cl.$text-light;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-warning;
      color: cl.$border-warning;

      &:hover {
        background-color: transparent;
        border-color: cl.$border-warning;
        color: cl.$border-warning;
      }
    }
  }

  &.qo-btn-outline-info {
    background-color: transparent;
    border: bo.$border-width-sm solid cl.$border-info;
    color: cl.$text-info;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease,
      color 0.2s ease;

    &:hover {
      background-color: cl.$background-info;
      border-color: cl.$border-info;
      color: cl.$text-light;
    }

    &:active {
      background-color: color.adjust(cl.$background-info, $lightness: -8%);
      border-color: color.adjust(cl.$border-info, $lightness: -8%);
      color: cl.$text-light;
    }

    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: cl.$border-info;
      color: cl.$border-info;

      &:hover {
        background-color: transparent;
        border-color: cl.$border-info;
        color: cl.$border-info;
      }
    }
  }
}