@use 'sass:map';
@use '../core/variables' as *;
@use '../functions' as *;
@use '../mixins' as *;

%primary-secondary {
  @include button-and-tag;
  padding: 12px 24px;
  font-family: $sora;
  font-weight: 600;
  font-size: var(--#{$prefix}font-size-md);
}

.btn {
  &-primary {
    @extend %primary-secondary;
    background-color: var(--#{$prefix}btn-primary-bg);
    color: var(--#{$prefix}btn-primary);

    &:active {
      background-color: var(--#{$prefix}btn-primary-pressed) !important;
    }

    &:hover,
    &:focus-visible {
      background-color: var(--#{$prefix}primary);
    }

    &:focus-visible {
      outline: 4px solid HEXToRGBA(var(--#{$prefix}primary), 0.3);
    }

    &:disabled,
    &.disabled {
      opacity: 0.33;
      pointer-events: none;
    }

    &.circle {
      border-radius: 50%;
      width: 44px;
      height: 44px;
      padding: 12px;
    }

    &.small {
      padding: 8px 16px;
      font-size: var(--#{$prefix}font-size-sm);

      &.circle {
        border-radius: 50%;
        width: 34px;
        height: 34px;
        padding: 8px;
      }
    }
  }

  &-secondary {
    @extend %primary-secondary;
    background-color: var(--#{$prefix}btn-secondary-bg);
    color: var(--#{$prefix}btn-secondary);

    &:active {
      background-color: var(--#{$prefix}btn-secondary-pressed) !important;
      color: var(--#{$prefix}primary) !important;
    }

    &:hover,
    &:focus-visible {
      background-color: var(--#{$prefix}btn-secondary-hover);
      color: var(--#{$prefix}primary);
    }

    &:focus-visible {
      outline: 4px solid var(--#{$prefix}primary);
    }

    &:disabled,
    &.disabled {
      opacity: 0.33;
      pointer-events: none;
    }

    &.circle {
      border-radius: 50%;
      width: 44px;
      height: 44px;
      padding: 12px;
    }

    &.small {
      padding: 8px 16px;
      font-size: var(--#{$prefix}font-size-sm);

      &.circle {
        border-radius: 50%;
        width: 34px;
        height: 34px;
        padding: 8px;
      }
    }
  }

  &-secondary-toggle {
    @extend .btn-secondary;
    background-color: unset;
    color: var(--#{$prefix}btn-secondary);

    &.active {
      background-color: var(--#{$prefix}primary);
      color: var(--#{$prefix}body-inverted);
      box-shadow: var(--#{$prefix}shadow-hover) HEXToRGBA(var(--#{$prefix}primary), 0.2);

      &:active {
        background-color: var(--#{$prefix}btn-primary-pressed) !important;
        color: var(--#{$prefix}btn-primary) !important;
      }

      &:focus-visible {
        outline: 4px solid HEXToRGBA(var(--#{$prefix}primary), 0.3);
      }
    }
  }

  &-tertiary {
    @include button-and-tag;
    padding: 8px 16px;
    font-family: $dm-sans;
    font-weight: 600;
    font-size: var(--#{$prefix}font-size-sm);
    color: var(--#{$prefix}btn-secondary);

    &:hover,
    &:focus-visible {
      background-color: var(--#{$prefix}body-bg);
      color: var(--#{$prefix}primary);
      text-decoration: underline;
    }

    &:focus-visible {
      outline: 4px solid var(--#{$prefix}primary);
    }

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

    &.circle {
      border-radius: 50%;
      width: 34px;
      height: 34px;
      padding: 8px;
    }
  }
}