@use 'mixins/a11y';
@use 'mixins/icon';

:where(a, button).btn {
  --btn-padding-inline: theme('space.6');
  --btn-padding-block: theme('space.3');
  --btn-font-size: theme('fontSize.base');
  --btn-font-weight: theme('fontWeight.semibold');

  @apply
    relative
    antialiased
    tracking-wide
    inline-block
    whitespace-nowrap
    rounded-md
    no-underline
    decoration-0
    shadow-sm
    ring-1
    ring-inset
    duration-200
    motion-safe:ease-in-out
    outline-none;

  @include a11y.focusOutlineAndResetHover;
}

:is(a, button).btn--primary {
  @apply bg-sky-600 text-white ring-0 hover:bg-sky-700 hover:text-white font-bold;

  .prose & {
    @apply hover:text-white;
  }
}

.btn--light {
  @apply border border-white bg-white text-black ring-2 ring-black hover:bg-black hover:text-white;

  .prose & {
    @apply border border-white bg-white text-black ring-2 ring-black hover:bg-black hover:text-white font-bold;
  }
}

.btn--dark {
  @apply border border-white bg-black text-white ring-2 ring-black hover:bg-white hover:text-black;

  .prose & {
    @apply border border-white bg-black text-white ring-2 ring-black hover:bg-white hover:text-black font-bold;
  }
}

// refactor this into btn--arrow
.btn:is(.btn--primary--arrow, .btn--light--arrow, .btn--dark--arrow) {
  padding-inline-end: var(--btn-padding-inline-end, theme('space.12'));
}

.btn--primary--arrow,
.btn--light--arrow,
.btn--dark--arrow {
  @apply after:absolute after:right-5 after:inline-block after:duration-300 after:ease-in-out motion-safe:hover:after:right-4 font-bold;

  &::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');

    display: inline-block !important;
    width: 1.5rem !important;
    height: 1.5rem !important;
    top: 12px;
  }
}

.btn--light.btn--light--arrow {
  &::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=black');
  }

  &.light-outline::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');
  }

  &:hover::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');
  }

  &.light-outline:hover::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');
  }
}

.btn--dark.btn--dark--arrow {
  &::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');
  }

  &.dark-outline::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=black');
  }

  &:hover::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=black');
  }

  &.dark-outline:hover::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=black');
  }
}

.btn--primary.btn--primary--arrow {
  &::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');
  }

  &.primary-outline::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=#0284c7');
  }

  &:hover::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=white');
  }

  &.primary-outline:hover::after {
    @include icon.render(('icons/arrow-forward.svg'), 'fill=#0284c7');
  }
}

.rounded {
  @apply rounded-full;
}

.btn.bg-ghost-50 {
  @apply bg-opacity-50;
}

.btn.bg-ghost-25 {
  @apply bg-opacity-25;
}

.primary-outline {
  @apply bg-opacity-0 text-base font-bold text-sky-600 ring-1 ring-sky-600 hover:bg-opacity-50 hover:text-sky-700;
}

.light-outline {
  @apply bg-opacity-0 text-base font-bold text-white ring-1 ring-white hover:bg-opacity-50;
}

.dark-outline {
  @apply bg-opacity-0 text-base font-bold text-black ring-1 ring-black hover:bg-opacity-50;
}
