$sep: $condition-separator;

// Background Colors
$extra-bg-colors: (
  ('inverted', var(--bg-color-inverted), var(--text-color-inverted)),
  ('default', var(--body-bg-color), var(--text-color-secondary)),
  ('light', var(--light-color), var(--text-color-secondary))
);

$bg-color-helpers: join($colors, $extra-bg-colors);

@mixin bg-colors($fix: '') {
  // From List
  @each $name, $bg-color, $txt-color in $bg-color-helpers {
    .#{$prefix}bg-#{$name}#{$fix} {
      background-color: $bg-color !important;
      color: $txt-color;

      * {
        color: $txt-color
      }
    }
  }

  // Item Colors
  @each $name, $color, $txt-color in $item-colors {
    @if $name {
      .#{$prefix}bg-#{$name}#{$fix} {
        background-color: $color !important;
        color: $txt-color;

        * {
          color: $txt-color
        }
      }
    }
  }

  // Gradients
  .#{$prefix}bg-blue-gradient#{$fix}, .#{$prefix}bg-link-gradient#{$fix} {
    background: linear-gradient(135deg, $blue 0%, #00cfe9 100%) !important;
    color: $white;

    * {
      color: $white;
    }
  }

  .#{$prefix}bg-red-gradient#{$fix}, .#{$prefix}bg-error-gradient#{$fix} {
    background: linear-gradient(135deg, $red 0%, $pink 100%) !important;
    color: $white;

    * {
      color: $white;
    }
  }

  .#{$prefix}bg-green-gradient#{$fix}, .#{$prefix}bg-success-gradient#{$fix} {
    background: linear-gradient(135deg, $light-green 0%, $light-blue 100%) !important;
    color: $white;

    * {
      color: $white;
    }
  }

  .#{$prefix}bg-amber-gradient#{$fix}, .#{$prefix}bg-warning-gradient#{$fix} {
    background: linear-gradient(135deg, $amber 0%, #ff8330 100%) !important;
    color: $white;

    * {
      color: $text-dark;
    }
  }
}

@include bg-colors;

// Backgrounds on Dark Theme
[#{$prefix}theme="dark"] {
  @include bg-colors('#{$sep}dark');
}

// Text Colors
$extra-text-colors: (
  ('inverted', var(--text-color-inverted)),
  ('pow-primary', var(--text-color-primary)),
  ('pow-secondary', var(--text-color-secondary)),
  ('pow-tertiary', var(--text-color-tertiary))
);

$text-color-helpers: join($colors, $extra-text-colors);

@mixin text-colors($fix: '') {
  // From List
  @each $name, $color in $text-color-helpers {
    .#{$prefix}text-#{$name}#{$fix} {
      color: $color !important;

      * {
        color: $color
      }
    }
  }

  // Item Colors
  @each $name, $color in $item-colors {
    @if $name {
      .#{$prefix}text-#{$name}#{$fix} {
        color: $color !important;

        * {
          color: $color;
        }
      }
    }
  }

  // Gradients
  .#{$prefix}text-blue-gradient#{$fix}, .#{$prefix}text-link-gradient#{$fix} {
    background: linear-gradient(135deg, $blue 0%, #00cfe9 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .#{$prefix}text-red-gradient#{$fix}, .#{$prefix}text-error-gradient#{$fix} {
    background: linear-gradient(135deg, $red 0%, $pink 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .#{$prefix}text-green-gradient#{$fix}, .#{$prefix}text-success-gradient#{$fix} {
    background: linear-gradient(135deg, $light-green 0%, $light-blue 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .#{$prefix}text-amber-gradient#{$fix}, .#{$prefix}text-warning-gradient#{$fix} {
    background: linear-gradient(135deg, $amber 0%, #ff8330 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

@include text-colors;

// Text on Dark Theme
[#{$prefix}theme="dark"] {
  @include text-colors('#{$sep}dark');
}