@include add-breakpoint-prefixes {
    &fill-gray {
        background-color: $gray !important;
    }
    &fill-gray-dark {
        background-color: $gray-dark !important;
    }
    &fill-gray-light {
        background-color: $gray-light !important;
    }
    &fill-gray-lighter {
        background-color: $gray-lighter !important;
    }
    &fill-white {
        background-color: $white !important;
    }
    &fill-black {
        background-color: $black !important;
    }
    &fill-black-trans {
        background-color: $black-trans !important;
    }
    &fill-red {
        background-color: $red !important;
    }
    &fill-red-lighter {
        background-color: $red-lighter !important;
    }
    &fill-red-dark {
      background-color: $red-darker !important;
  }
    &fill-green {
        background-color: $green !important;
    }
    &fill-green-darker {
        background-color: $green-darker !important;
    }
    &fill-purple {
        background-color: $purple !important;
    }
    &fill-purple-darker {
        background-color: $purple-darker !important;
    }
    &fill-blue {
        background-color: $blue !important;
    }
    &fill-blue-lighter {
        background-color: $blue-lighter !important;
    }
    &fill-teal {
        background-color: $teal !important;
    }
    &fill-teal-darker {
        background-color: $teal-darker !important;
    }
    &fill-orange {
        background-color: $orange !important;
    }
    &fill-orange-darker {
        background-color: $orange-darker !important;
    }
    &fill-pink {
        background-color: $pink !important;
    }
    &fill-pink-darker {
        background-color: $pink-darker !important;
    }
    &fill-blue-dark {
        background-color: $blue-dark !important;
    }
    &fill-blue-darkest {
        background-color: $blue-darkest !important;
    }
    &fill-gold {
        background-color: $gold !important;
    }
    &fill-gold-darker {
        background-color: $gold-darker !important;
    }
    &fill-blue-cta {
        background-color: $blue-cta !important;
    }
    &fill-cyan {
        background-color: $cyan !important;
    }
    &fill-cyan-dark {
        background-color: $cyan-darker !important;
    }
    &fill-charcoal {
        background-color: $charcoal !important;
    }
    &fill-salmon {
        background-color: $salmon !important;
    }
    &fill-transparent {
        background-color: transparent !important;
    }
    &text-white {
        color: $white !important;
    }
    &text-gray-lighter {
        color: $gray-lighter !important;
    }
    &text-gray-light-mid {
        color: $gray-light-mid !important;
    }
    &text-gray-light {
        color: $gray-light !important;
    }
    &text-gray {
        color: $gray !important;
    }
    &text-gray-mid {
        color: $gray-mid !important;
    }
    &text-gray-mid-dark {
        color: $gray-mid-dark !important;
    }
    &text-gray-dark {
        color: $gray-dark !important;
    }
    &text-black {
        color: $black !important;
    }
    &text-red {
        color: $red !important;
    }
    &text-green {
        color: $green !important;
    }
    &text-purple {
        color: $purple !important;
    }
    &text-blue {
        color: $blue !important;
    }
    &text-teal {
        color: $teal !important;
    }
    &text-orange {
        color: $orange !important;
    }
    &text-pink {
        color: $pink !important;
    }
    &text-blue-dark {
        color: $blue-dark !important;
    }
    &text-blue-review {
        color: $blue-review !important;
    }
    &text-gold {
        color: $gold !important;
    }
    &text-gold-dark {
        color: $gold-darker !important;
    }
    &text-transparent {
        color: transparent !important;
    }
    &text-blue-cta {
        color: $blue-cta !important;
    }
    &text-cyan {
        color: $cyan !important;
    }
    &text-cyan-dark {
        color: $cyan-darker !important;
    }
    &text-charcoal {
        color: $charcoal !important;
    }
    &text-salmon {
        color: $salmon !important;
    }

    &border-white {
        border-color: $white !important;
    }
    &border-gray-lighter {
        border-color: $gray-lighter !important;
    }
    &border-gray-light {
        border-color: $gray-light !important;
    }
    &border-gray-light-mid {
        border-color: $gray-light-mid !important;
    }
    &border-gray {
        border-color: $gray !important;
    }
    &border-gray-mid {
        border-color: $gray-mid !important;
    }
    &border-gray-dark {
        border-color: $gray-dark !important;
    }
    &border-black {
        border-color: $black !important;
    }
    &border-red {
        border-color: $red !important;
    }
    &border-green {
        border-color: $green !important;
    }
    &border-purple {
        border-color: $purple !important;
    }
    &border-blue {
        border-color: $blue !important;
    }
    &border-teal {
        border-color: $teal !important;
    }
    &border-orange {
        border-color: $orange !important;
    }
    &border-pink {
        border-color: $pink !important;
    }
    &border-blue-dark {
        border-color: $blue-dark !important;
    }
    &border-blue-review {
        border-color: $blue-review !important;
    }
    &border-gold {
        border-color: $gold !important;
    }
    &border-gold-darker {
        border-color: $gold-darker !important;
    }
    &border-blue-cta {
        border-color: $blue-cta !important;
    }
    &border-cyan {
        border-color: $cyan !important;
    }
    &border-cyan-dark {
        border-color: $cyan-darker !important;
    }
    &border-charcoal {
        border-color: $charcoal !important;
    }
    &border-salmon {
        border-color: $salmon !important;
    }
    &border-transparent {
        border-color: transparent !important;
    }

    &svgfill-white {
        fill: $white !important;
    }
    &svgfill-gray-lighter {
        fill: $gray-lighter !important;
    }
    &svgfill-gray-light {
        fill: $gray-light !important;
    }
    &svgfill-gray-light-mid {
        fill: $gray-light-mid !important;
    }
    &svgfill-gray {
        fill: $gray !important;
    }
    &svgfill-gray-dark {
        fill: $gray-dark !important;
    }
    &svgfill-black {
        fill: $black !important;
    }
    &svgfill-red {
        fill: $red !important;
    }
    &svgfill-green {
        fill: $green !important;
    }
    &svgfill-purple {
        fill: $purple !important;
    }
    &svgfill-blue {
        fill: $blue !important;
    }
    &svgfill-teal {
        fill: $teal !important;
    }
    &svgfill-orange {
        fill: $orange !important;
    }
    &svgfill-pink {
        fill: $pink !important;
    }
    &svgfill-blue-dark {
        fill: $blue-dark !important;
    }
    &svgfill-blue-review {
        fill: $blue-review !important;
    }
    &svgfill-gold {
        fill: $gold !important;
    }
    &svgfill-gold-darker {
        fill: $gold-darker !important;
    }
    &svgfill-blue-cta {
        fill: $blue-cta !important;
    }
    &svgfill-cyan {
        fill: $cyan !important;
    }
    &svgfill-cyan-dark {
        fill: $cyan-darker !important;
    }
    &svgfill-charcoal {
        fill: $charcoal !important;
    }
    &svgfill-salmon {
        fill: $salmon !important;
    }
}

@include theme-colors($vertical-colors) {
    @each $name, $color, $color-alt in $vertical-colors {
        .theme--#{$name} {
            .theme-fill {
                background: #{$color} !important;
            }
            .theme-fill-alt {
                background: #{$color-alt} !important;
            }
            .theme-text {
                color: #{$color} !important;
            }
            .theme-text-alt {
                color: #{$color-alt} !important;
            }
            .theme-border {
                border-color: #{$color} !important;
            }
            .theme-border-alt {
                border-color: #{$color-alt} !important;
            }
            .theme-title-underline,
            .theme-title-underline-static {
                background-image: linear-gradient(
                    to right,
                    #{rgba($color, 0.5)} 0%,
                    #{rgba($color, 0.5)} 100%
                );
            }
            .theme-title-underline:hover {
                background-image: linear-gradient(
                    to right,
                    #{rgba($color, 0.7)} 0%,
                    #{rgba($color, 0.7)} 100%
                );
            }
        }
    }
}

@include add-breakpoint-prefixes {
    &opacity-0 {
        opacity: 0 !important;
    }
    &opacity-10 {
        opacity: 0.1 !important;
    }
    &opacity-20 {
        opacity: 0.2 !important;
    }
    &opacity-30 {
        opacity: 0.3 !important;
    }
    &opacity-40 {
        opacity: 0.4 !important;
    }
    &opacity-50 {
        opacity: 0.5 !important;
    }
    &opacity-60 {
        opacity: 0.6 !important;
    }
    &opacity-70 {
        opacity: 0.7 !important;
    }
    &opacity-80 {
        opacity: 0.8 !important;
    }
    &opacity-90 {
        opacity: 0.9 !important;
    }
    &opacity-100 {
        opacity: 1 !important;
    }
}