@use "../../variables/index" as *;

@use "../mixins/background-variant";
@use "../mixins/text-emphasis";

/**
 * Contextual Color Utilities
 *
 * Note: Uses design tokens for all colors ($brand-*, $status-*, $gray-*, var(--c8y-*)).
 *
 * Intentionally hardcoded values:
 * - 25px, 12.5px (checkered background): Specific dimensions for visual pattern effect
 */

//================================
// Contextual colors
//================================

// Generic text colors
.text-default {
 @include text-emphasis.text-emphasis-variant($component-color-default);
}
.text-white {
  @include text-emphasis.text-emphasis-variant($component-background-default);
}
.text-muted {
  @include text-emphasis.text-emphasis-variant($text-muted);
}

// Brand text colors
.text-primary {
  @include text-emphasis.text-emphasis-variant(var(--c8y-root-component-brand-primary,$brand-primary));
}
.text-primary-light {
  @include text-emphasis.text-emphasis-variant($brand-primary-light);
}
.text-primary-dark {
  @include text-emphasis.text-emphasis-variant($brand-primary-dark);
}

// Accent text colors
.text-accent {
  @include text-emphasis.text-emphasis-variant($brand-accent);
}
.text-accent-light {
  @include text-emphasis.text-emphasis-variant($brand-accent-light);
}
.text-accent-dark {
  @include text-emphasis.text-emphasis-variant($brand-accent-dark);
}

// Success text colors
.text-success {
  @include text-emphasis.text-emphasis-variant($status-success);
}
.text-success-light {
  @include text-emphasis.text-emphasis-variant($status-success-light);
}
.text-success-dark {
  @include text-emphasis.text-emphasis-variant($status-success-dark);
}

// Info text colors
.text-info {
  @include text-emphasis.text-emphasis-variant($status-info);
}
.text-info-light {
  @include text-emphasis.text-emphasis-variant($status-info-light);
}
.text-info-dark {
  @include text-emphasis.text-emphasis-variant($status-info-dark);
}

// Warning text colors
.text-warning {
  @include text-emphasis.text-emphasis-variant($status-warning);
}
.text-warning-light {
  @include text-emphasis.text-emphasis-variant($status-warning-light);
}
// Dropped on purpose, not restored: .text-warning-high
.text-warning-dark {
  @include text-emphasis.text-emphasis-variant($status-warning-dark);
}

// Danger text colors
.text-danger {
  @include text-emphasis.text-emphasis-variant($status-danger);
}
.text-danger-light {
  @include text-emphasis.text-emphasis-variant($status-danger-light);
}
.text-danger-dark {
  @include text-emphasis.text-emphasis-variant($status-danger-dark);
}

// backwards compatibility
//
// Dropped on purpose and deliberately not restored: .text-gray-medium, .text-gray-medium-dark,
// .text-gray-light, .text-gray-white. A few legacy templates still carry these class names; that is
// harmless, since the class simply does not match anything.

.text-gray-darker {
  @include text-emphasis.text-emphasis-variant($brand-primary-dark);
}

.text-gray-dark {
  @include text-emphasis.text-emphasis-variant($gray-30);
}

.text-gray {
  @include text-emphasis.text-emphasis-variant($gray-50);
}

.text-gray-lighter {
  @include text-emphasis.text-emphasis-variant($gray-90);
}

//================================
// Contextual backgrounds
//================================
.bg-primary {
  @include background-variant.bg-variant($brand-primary);
}

.bg-primary-light {
  @include background-variant.bg-variant($brand-primary-light);
}

.bg-complementary {
  @include background-variant.bg-variant($brand-complementary);
}

.bg-accent {
  @include background-variant.bg-variant($brand-accent);
}
.bg-accent-light {
  @include background-variant.bg-variant($brand-accent-light);
}
.bg-accent-dark {
  @include background-variant.bg-variant($brand-accent-dark);
}

.bg-success {
  @include background-variant.bg-variant($status-success);
}
.bg-success-light {
  @include background-variant.bg-variant($status-success-light);
}
.bg-success-dark {
  @include background-variant.bg-variant($status-success-dark);
}

.bg-info {
  @include background-variant.bg-variant($status-info);
}
.bg-info-light {
  @include background-variant.bg-variant($status-info-light);
}
.bg-info-dark {
  @include background-variant.bg-variant($status-info-dark);
}

.bg-warning {
  @include background-variant.bg-variant($status-warning);
}
.bg-warning-light {
  @include background-variant.bg-variant($status-warning-light);
}
.bg-warning-dark {
  @include background-variant.bg-variant($status-warning-dark);
}
// Dropped on purpose, not restored: .bg-warning-lightest, .bg-transparent

.bg-danger {
  @include background-variant.bg-variant($status-danger);
}
.bg-danger-light {
  @include background-variant.bg-variant($status-danger-light);
}
.bg-danger-dark {
  @include background-variant.bg-variant($status-danger-dark);
}

.bg-checkered {
  background-image:
    linear-gradient(45deg, var(--c8y-level-2) 25%, transparent 25%),
    linear-gradient(135deg, var(--c8y-level-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--c8y-level-2) 75%),
    linear-gradient(135deg, transparent 75%, var(--c8y-level-2) 75%);
  background-size: 25px 25px;
  background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0 12.5px;
}

// Levels

.bg-level-4 {
   @include background-variant.bg-variant(var(--c8y-level-4));
}

.bg-level-3 {
   @include background-variant.bg-variant(var(--c8y-level-3));
}

.bg-level-2 {
   @include background-variant.bg-variant(var(--c8y-level-2));
}

.bg-level-1 {
   @include background-variant.bg-variant(var(--c8y-level-1));
}

.bg-level-0 {
   @include background-variant.bg-variant(var(--c8y-level-0));
}

// Grays
// Numbered gray text/background utilities, driven by the gray palette tokens.
@each $step in (10, 20, 30, 40, 50, 60, 70, 80, 90, 100) {
  .text-gray-#{$step} {
    @include text-emphasis.text-emphasis-variant(var(--c8y-palette-gray-#{$step}));
  }
  .bg-gray-#{$step} {
    @include background-variant.bg-variant(var(--c8y-palette-gray-#{$step}));
  }
}

.bg-inherit {
  @include background-variant.bg-variant(inherit);
}

.bg-component {
  background-color: $component-background-default;
}