@import 'variables.scss';

// We use mixins to reduce the repetition of code
@mixin BorderButton($primary-color) {
  background-color: transparent;
  color: $primary-color;
  border: 2px solid $primary-color;
}

@mixin FilledButton($primary-color) {
  background: $primary-color;
  color: theme(text-primary);
}

.wrapper {
  @include flex-center-center;
  gap: 0.5em; // We use em to make the button responsive for different button sizes(xsm, sm, normal)
  height: 3.75rem;
  padding: 0 1em; // We use em to make the button responsive for different button sizes(xsm, sm, normal)
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: $border-radius;
  border: none;
  outline: none;
  transition: 0.3s ease-in-out;
  transition-property: color, opacity, text-decoration;
  cursor: pointer;

  svg {
    width: 1.3em; // We use em to make the button responsive for different button sizes(xsm, sm, normal)
    height: 1.3em; // We use em to make the button responsive for different button sizes(xsm, sm, normal)
    color: inherit;
  }

  // Colors
  &.primary {
    // DEFAULT
    @include BorderButton(theme(highlight-secondary));
  }

  &.secondary {
    @include FilledButton(rgba(0, 0, 0, 0.15));
  }

  &.danger {
    @include BorderButton($danger-color);
  }

  // Gradients
  &.primaryGradient {
    @include FilledButton(theme(gradient-primary));
  }

  &.secondaryGradient {
    @include FilledButton(theme(gradient-secondary));
  }

  &.terniaryGradient {
    @include FilledButton(theme(gradient-terniary));
  }

  // Text only
  &.text {
    color: theme(text-primary);
    display: inline;
    background-color: transparent;
    border: none;
    font-size: 1rem;
    font-weight: 400;
    padding: 0;
    height: auto;

    &:hover:not(.disabled) {
      text-decoration: underline;
    }
  }

  // Sizes
  &.sm {
    font-size: 1.0625rem;
    height: 3.125rem;
  }

  &.xsm {
    height: 2.5rem;
    font-size: 0.875rem;
    padding: 0 0.8em;
  }

  // Other states
  &.loading {
    @keyframes spin {
      from {
        transform: rotate(0deg);
      }

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

    .loadingInner {
      display: flex;
      justify-content: center;
      gap: 1em;
      align-items: center;

      .loadingText {
        margin: 0;
      }

      svg {
        animation: spin 1.5s infinite ease-in-out;
      }
    }
  }

  &:hover:not(.disabled) {
    opacity: 0.6;
  }

  &:active:not(.disabled) {
    opacity: 1;
  }

  &.disabled {
    opacity: 0.2;
    cursor: not-allowed;
  }
}

@include lg-breakpoint {
  .wrapper {
    font-size: 1rem;
  }
}
