@use '../abstracts/functions' as fn;
@use '../abstracts/flex' as fx;
@use '../abstracts/gap' as gap;

.button {
  @extend .flex-center;
  @extend .gap-2;
  display: inline-flex;
  font-weight: 400;
  line-height: 1.5;
  outline: none;
  border: none;
  cursor: pointer;

  &:has(>svg) {
    svg {
      width: fn.rem(20px);
      height: fn.rem(20px);
      transition: transform 0.3s ease-in-out;
    }

    @media (hover:hover) {
      &:hover {
        svg {
          transform: rotate(90deg);
        }

        &[class*='icon'] {
          border-color: rgba(255, 255, 255, 0.85);
        }
      }
    }
  }

  &--lg {
    font-size: fn.rem(14px);
    padding: fn.rem(14px) fn.rem(32px);
    border-radius: fn.rem(16px);

    &[class*='icon'] {
      padding: fn.rem(12px) fn.rem(12px);
    }
  }

  &--md {
    font-size: fn.rem(12px);
    padding: fn.rem(12px) fn.rem(28px);
  }

  &--sm {
    font-size: fn.rem(10px);
    padding: fn.rem(10px) fn.rem(24px);
  }

  &--primary {
    background: var(--gradient);
    position: relative;
    z-index: 1;
    // transition: filter 0.2s ease-in-out;

    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gradient);
      border-radius: inherit;
      opacity: 0;
      transition: opacity 0.3s ease;
      transform: scale(-1, -1);
      z-index: -1;
    }

    @media (hover:hover) {
      &:hover {
        &::after {
          opacity: 1;
        }
      }
    }
  }

  &--nopadding {
    padding: 0;
  }

  &--icon {
    @extend .flex-center;
    border: fn.rem(1px) solid rgba(255, 255, 255, 0.5);
    transition: border-color 0.3s ease-in-out;

    svg {
      width: fn.rem(20px);
      height: fn.rem(20px);
    }
  }
}