@use 'variables';

@mixin text(
  $family: sans,
  $size: md,
  $theme: default,
  $tracking: normal,
  $transform: normal,
  $truncate: false,
  $weight: normal,
  $align: none
) {
  @if $family == sans {
    font-family: var(--font-sans);
  } @else if $family == mono {
    font-family: var(--font-mono);
  } @else {
    @warn "Unknown font family `#{$family}`.";
  }

  @if $size == xs {
    font-size: 0.75rem;
    line-height: 1rem;
  } @else if $size == sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  } @else if $size == md {
    font-size: 0.9375rem;
    line-height: 1.25rem;
  } @else if $size == lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  } @else if $size == xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  } @else if $size == 2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  } @else if $size == 3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  } @else if $size == inherit {
    font-size: inherit;
    line-height: inherit;
  } @else {
    @warn "Unknown font size `#{$size}`.";
  }

  @if $theme == default {
    @apply text-gray-900 dark:text-gray-100;
  } @else if $theme == danger {
    @apply text-danger-700 dark:text-danger-500;
  } @else if $theme == primary {
    @apply text-primary-600 dark:text-primary-400;
  } @else if $theme == muted {
    @apply text-gray-700 dark:text-gray-600;
  } @else if $theme == subtle {
    @apply text-gray-400 dark:text-gray-500;
  } @else if $theme == success {
    @apply text-success-600;
  } @else if $theme == inherit {
    color: inherit;
  } @else if $theme == white {
    color: #fff;
  } @else {
    @warn "Unknown text theme `#{$theme}`.";
  }

  @if $tracking == normal {
    letter-spacing: 0;
  } @else if $tracking == wide {
    letter-spacing: 0.025em;
  } @else {
    @warn "Unknown letter spacing `#{$tracking}`.";
  }

  @if $transform == normal {
    text-transform: none;
  } @else if $transform == uppercase {
    text-transform: uppercase;
  } @else {
    @warn "Unknown text transform `#{$transform}`.";
  }

  @if $truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  @if $weight == normal {
    font-weight: 400;
  } @else if $weight == medium {
    font-weight: 500;
  } @else if $weight == semibold {
    font-weight: 600;
  } @else if $weight == bold {
    font-weight: 700;
  } @else {
    @warn "Unknown font weight `#{$weight}`.";
  }

  @if $align == left {
    text-align: left;
  } @else if $align == center {
    text-align: center;
  } @else if $align == right {
    text-align: right;
  }
}

@mixin card($variant: default, $size: md) {
  @if $variant == rounded {
    @apply bg-white dark:bg-primary-900 black:bg-black text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none;

    @if $size == md {
      padding: 1rem;
      @media (min-width: variables.$breakpoint-sm) {
        border-radius: 0.75rem;
      }
    } @else if $size == lg {
      padding: 1rem;
      @media (min-width: variables.$breakpoint-sm) {
        padding: 1.5rem;
        border-radius: 0.75rem;
      }
    } @else if $size == xl {
      padding: 1rem;
      @media (min-width: variables.$breakpoint-sm) {
        padding: 2.5rem;
        border-radius: 1.5rem;
      }
    } @else {
      @warn "Unknown card size `#{$size}`.";
    }
  } @else if $variant == slim {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  @if $size != xl {
    @apply black:rounded-none;
  }
}

@mixin button($theme: secondary, $block: false, $size: md) {
  @apply rtl:space-x-reverse inline-flex items-center place-content-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all disabled:select-none disabled:opacity-75 disabled:cursor-default;

  @if $theme == primary {
    @apply bg-primary-500 hover:bg-primary-400 dark:hover:bg-primary-600 border-transparent focus:bg-primary-500 text-gray-100 focus:ring-primary-300;
  } @else if $theme == secondary {
    @apply border-transparent bg-primary-100 dark:bg-primary-800 hover:bg-primary-50 dark:hover:bg-primary-700 focus:bg-primary-100 dark:focus:bg-primary-800 text-primary-500 dark:text-primary-200;
  } @else if $theme == tertiary {
    @apply bg-white dark:bg-primary-900 border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500;
  } @else if $theme == accent {
    @apply border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-white focus:ring-secondary-300;
  } @else if $theme == danger {
    @apply border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500;
  } @else if $theme == transparent {
    @apply border-transparent bg-transparent text-primary-600 dark:text-primary-400 dark:bg-transparent hover:bg-gray-200 dark:hover:bg-gray-800/50;
  } @else if $theme == outline {
    @apply border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10;
  } @else if $theme == muted {
    @apply border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-800 dark:text-gray-100 focus:ring-primary-500;
  } @else {
    @warn "Unknown button theme `#{$theme}`.";
  }

  @if $size == xs {
    @apply gap-x-1.5 px-2 py-1 text-xs;
  } @else if $size == sm {
    @apply gap-x-2 px-3 py-1.5 text-xs leading-4;
  } @else if $size == md {
    @apply gap-x-2 px-4 py-2 text-sm;
  } @else if $size == lg {
    @apply gap-x-2 px-6 py-3 text-base;
  } @else {
    @warn "Unknown button size `#{$size}`.";
  }

  @if $block {
    @apply flex w-full justify-center;
  }
}
