// Gutenberg text color options

$variants: black,
text-lighten,
primary-base,
primary-lighten,
secondary-base,
secondary-lighten,
third-base,
third-lighten,
surface,
invert,
warning,
success,
gray-base,
gray-lighten,
gray-darken;


@each $variant in $variants {

  .has-#{$variant}-color[class] {
    color: var(--global--color-#{$variant});
  }

}


// Gutenberg background-color options
.has-background {

  a,
  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: currentColor;
  }
}

@each $variant in $variants {

  .has-#{$variant}-background-color[class] {
    background-color: var(--global--color-#{$variant});
    border-color: currentColor;

    &.has-background-dim {

      &:before {
        background-color: var(--global--color-#{$variant});
      }

    }
  }

}

// Custom gradients
.has-purple-to-yellow-gradient-background {
  background: linear-gradient(160deg, var(--global--color-third-lighten), var(--global--color-secondary-lighten));
}

.has-yellow-to-purple-gradient-background {
  background: linear-gradient(160deg, var(--global--color-secondary-lighten), var(--global--color-third-lighten));
}

.has-green-to-yellow-gradient-background {
  background: linear-gradient(160deg, var(--global--color-success-base), var(--global--color-secondary-lighten));
}

.has-yellow-to-green-gradient-background {
  background: linear-gradient(160deg, var(--global--color-secondary-lighten), var(--global--color-success-base));
}

.has-red-to-yellow-gradient-background {
  background: linear-gradient(160deg, var(--global--color-warning-base), var(--global--color-secondary-lighten));
}

.has-yellow-to-red-gradient-background {
  background: linear-gradient(160deg, var(--global--color-secondary-lighten), var(--global--color-warning-base));
}

.has-purple-to-red-gradient-background {
  background: linear-gradient(160deg, var(--global--color-third-lighten), var(--global--color-warning-base));
}

.has-red-to-purple-gradient-background {
  background: linear-gradient(160deg, var(--global--color-warning-base), var(--global--color-third-lighten));
}