@use '../core/variables' as *;
@use '../functions' as *;
@use 'link' as *;

@mixin button-and-tag {
  @include unstyled-link;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border-radius: 50px;
}

@mixin button-tag {
  @include button-and-tag;
  padding: 8px 16px;
  font-family: $dm-sans;
  font-weight: 500;
  font-size: var(--#{$prefix}font-size-sm);

  &:not(.active) {
    &:hover,
    &:focus-visible {
      background-color: HEXToRGBA(var(--#{$prefix}primary), 0.05);
      color: var(--#{$prefix}primary);
    }

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

  &.active {
    background-color: var(--#{$prefix}btn-primary-bg);
    color: var(--#{$prefix}btn-primary);
    box-shadow: var(--#{$prefix}shadow-low-elevation) HEXToRGBA($black, 0.2);

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

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

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

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

  &.small {
    padding: 4px 12px;

    &.circle {
      width: 26px;
      height: 26px;
      padding: 4px;
    }
  }

  @media (hover: none) or (pointer: coarse) {
    &:not(.active) {
      background-color: HEXToRGBA(var(--#{$prefix}primary), 0.05);
      color: var(--#{$prefix}primary);
    }
  }
}