@use '../sass-utilities' as *;
@use '../assets/fontawesome/variables' as *;

.#{$pf-prefix}screen-reader {
  @include pf-v6-u-screen-reader; // for use with assistive technologies

  &.pf-m-full-size {
    width: 100%;
    height: 100%;
  }

  &.pf-m-absolute {
    position: absolute;
  }
}

.#{$pf-prefix}m-tabular-nums {
  font-variant-numeric: tabular-nums;
}

// Variable font opt-in
.#{$pf-prefix}m-legacy-font {
  --pf-t--global--font--family--body: var(--pf-t--global--font--family--body--legacy);
  --pf-t--global--font--family--heading: var(--pf-t--global--font--family--heading--legacy);
  --pf-t--global--font--family--mono: var(--pf-t--global--font--family--mono--legacy);
  --pf-t--global--font--weight--body: var(--pf-t--global--font--weight--body--legacy);
  --pf-t--global--font--weight--body--bold: var(--pf-t--global--font--weight--body--bold--legacy);
  --pf-t--global--font--weight--heading: var(--pf-t--global--font--weight--heading--legacy);
  --pf-t--global--font--weight--heading--bold: var(--pf-t--global--font--weight--heading--bold--legacy);
}

// RTL helpers

// Sets a block to RTL
.#{$pf-prefix}m-dir-rtl {
  @include pf-v6-set-inverse;

  direction: rtl;
}

// Sets a block to LTR
.#{$pf-prefix}m-dir-ltr {
  @include pf-v6-set-inverse(false);

  direction: ltr;
}

// Mirrors/flips something horizontally/inline in RTL
.#{$pf-prefix}m-mirror-inline-rtl {
  @include pf-v6-mirror-inline-on-rtl;
}

// Turn off perceptible motion (for testing purposes) by setting all motion tokens to 1ms
.#{$pf-prefix}m-no-motion {
  // stylelint-disable declaration-no-important
  --pf-t--global--delay--400: 1ms !important;
  --pf-t--global--delay--300: 1ms !important;
  --pf-t--global--delay--200: 1ms !important;
  --pf-t--global--delay--100: 1ms !important;
  --pf-t--global--duration--600: 1ms !important;
  --pf-t--global--duration--500: 1ms !important;
  --pf-t--global--duration--400: 1ms !important;
  --pf-t--global--duration--300: 1ms !important;
  --pf-t--global--duration--200: 1ms !important;
  --pf-t--global--duration--100: 1ms !important;
  --pf-t--global--duration--50: 1ms !important;
  --#{$pf-global}--thinking-active--Animation--Duration: 0 !important;

  // stylelink-enable declaration-no-important
}

.#{$pf-prefix}m-ai-indicator {
  position: relative;

  &::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    content: "";
    background: linear-gradient(to right, #f56e6e 0%, #876fd4 65%, #5e40be 100%)
      border-box;
    border: var(--pf-t--global--border--width--extra-strong) solid transparent;
    border-radius: inherit;
    mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}

@property --#{$pf-global}--thinking--BoxShadow--Spread {
  syntax: "<length>";
  initial-value: 0;
  inherits: false;
}

.#{$pf-prefix}m-thinking {
  box-shadow: 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-End),
  0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-End),
  0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-Start),
  0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-Start);
  animation: #{$pf-global}-thinking var(--#{$pf-global}--thinking-active--Animation--Duration) infinite ease-in-out;

  &.pf-m-inset {
    box-shadow: inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-End),
    inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-End),
    inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--End-Start),
    inset 0 0 var(--#{$pf-global}--thinking--BoxShadow--Spread) var(--#{$pf-global}--thinking--BoxShadow--Color--Start-Start);
  }
}

@keyframes #{$pf-global}-thinking {
  50% {
    --#{$pf-global}--thinking--BoxShadow--Spread: var(--#{$pf-global}--thinking-active--BoxShadow--Spread);
  }
}

:root {
  --#{$pf-global}--danger-jiggle--AnimationDuration--Transform: var(--pf-t--global--motion--duration--fade--default);
  --#{$pf-global}--danger-jiggle--AnimationTimingFunction--Transform: var(--pf-t--global--motion--timing-function--default);
  --#{$pf-global}--thinking--BoxShadow--Spread: 0px;
  --#{$pf-global}--thinking--BoxShadow--Color--Start-Start: oklch(45.9% 0.187 3.815deg);
  --#{$pf-global}--thinking--BoxShadow--Color--Start-End: oklch(50% 0.134 242.749deg);
  --#{$pf-global}--thinking--BoxShadow--Color--End-Start: oklch(45.9% 0.187 3.815deg);
  --#{$pf-global}--thinking--BoxShadow--Color--End-End: oklch(43.2% 0.232 292.759deg);
  --#{$pf-global}--thinking-active--BoxShadow--Spread: 15px;
  --#{$pf-global}--thinking-active--Animation--Duration: 0;

  @media screen and (prefers-reduced-motion: no-preference) {
    --#{$pf-global}--thinking-active--Animation--Duration: 2s;
  }

  container-name: #{$pf-prefix}contain-viewport #{$pf-prefix}contain-table;
  container-type: inline-size;
}

// Register the property type for the custom property to be animatable
@property  --#{$pf-global}--danger-jiggle--TranslateX {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

// Animate danger jiggle
@keyframes #{$pf-global}-danger-jiggle-motion {
  33% {
    --#{$pf-global}--danger-jiggle--TranslateX: -2px;
  }
  
  66% {
    --#{$pf-global}--danger-jiggle--TranslateX: 3px;
  }
}

// Animate fade-in
@keyframes #{$pf-global}-fade-in {
  from {
    opacity: 0;
  }
  
  to {
    opacity: 1;
  }
}

// Animate fade-out
@keyframes #{$pf-global}-fade-out {
  from {
    opacity: 1;
  }
  
  to {
    opacity: 0;
  }
}
