@import 'theme/variables.scss';

@mixin hover($color) {
    transition: background-color $transitionDuration;

    &:hover {
        background-color: $color !important;
    }
}

.background {
    &-transparent {
        background-color: transparent;
    }

    &-white {
        background-color: $white;

        &-7 {
            background-color: $white-7;
        }
    }

    &-muted {
        background: $muted;

        &-o20 {
            background: rgb($muted, 0.2);
        }
    }

    &-black {
        background-color: $ta-black;

        &-2 {
            background-color: $ta-black-2;
        }

        &-3 {
            background-color: $ta-black-3;
        }
    }

    &-gray {
        background-color: $ta-gray-02;

        &-2 {
            background-color: $grey-2;
        }
        &-7 {
            background-color: $grey-7;
        }
        &-12 {
            background-color: $grey-12;
        }
        &-20 {
            background-color: $grey-20;
        }
    }

    &-light-gray {
        &-2 {
            background-color: $ta-light-grey-2;
        }
        &-5 {
            background-color: $ta-light-grey-5;
        }
        &-6 {
            background-color: $ta-light-grey-6;
        }
        &-7 {
            background-color: $ta-light-grey-7;
        }
    }

    &-grey {
        background-color: $grey;

        &-4 {
            background-color: $grey-4;
        }
    }

    &-blue {
        &-5 {
            background-color: $ta-blue-5;
        }
        &-13 {
            background-color: $ta-blue-13;
        }
        &-14 {
            background-color: $ta-blue-14;
        }
        &-15 {
            background-color: $ta-blue-15;
        }
        &-18 {
            background-color: $ta-blue-18;
        }
        &-19 {
            background-color: $ta-blue-19;
        }
        &-20 {
            background-color: $ta-blue-20;
        }
    }

    &-green {
        &-0 {
            background-color: $ta-green;
        }

        &-2 {
            background-color: $ta-green-2;
        }

        &-3 {
            background-color: $ta-green-3;
        }

        &-4 {
            background-color: $ta-green-4;
        }

        &-6 {
            background-color: $ta-green-4;
        }

        &-special-filter {
            background-color: $special-filter-green;
        }
    }

    &-dark {
        &-2 {
            background-color: $dark-2;
        }
        &-3 {
            background-color: $dark-3;
        }
    }

    &-red {
        &-19 {
            background-color: $ta-red-19;
        }
        &-11 {
            background-color: $ta-red-11;
        }
    }

    &-purple {
        &-4 {
            background-color: $purple-4;
        }
    }

    &-gold {
        &-bold {
            background-color: $gold-bold;
        }

        &-subtle {
            background-color: $gold-subtle;
        }
    }

    &-orange {
        &-3 {
            background-color: $ta-orange-3;
        }

        &-4 {
            background-color: $ta-orange-4;
        }

        &-7 {
            background-color: $ta-orange-7;
        }
    }

    &-yellow {
        &-1 {
            background-color: $ta-yellow-1;
        }
        &-5 {
            background-color: $ta-yellow-5;
        }
        &-7 {
            background-color: $ta-yellow-7;
        }
        &-8 {
            background-color: $ta-yellow-8;
        }
    }

    &-bw5 {
        background-color: $bw5;
    }

    &-bw6 {
        &-2 {
            background-color: $bw6-2;
        }
    }

    &-brown-bold {
        background-color: $brown-bold;
    }

    &-bw2 {
        background-color: $bw2;
    }

    &-bw-9 {
        background-color: $bw-9;
    }

    &-bw10 {
        background-color: $bw-10;
    }

    &-hover {
        &-white {
            @include hover($white);
            &-4 {
                @include hover($ta-white-4);
            }
        }

        &-black {
            @include hover($black);
            &-1 {
                @include hover($ta-black);
            }
            &-2 {
                @include hover($black-2);
            }
        }

        &-grey {
            @include hover($grey);
            &-2 {
                @include hover($grey-2);
            }
            &-6 {
                @include hover($grey-5);
            }
        }

        &-dark {
            &-2 {
                @include hover($dark-2);
            }
            &-3 {
                @include hover($dark-3);
            }
        }

        &-bw2 {
            @include hover($bw2);
        }

        &-bw6 {
            @include hover($bw6);
            &-2 {
                @include hover($bw6-2);
            }
        }
        &-bw-9 {
            @include hover($bw-9);
        }

        &-blue {
            &-11 {
                @include hover($ta-blue-11);
            }
            &-13 {
                @include hover($ta-blue-13);
            }
            &-15 {
                @include hover($ta-blue-15);
            }
            &-16 {
                @include hover($ta-blue-16);
            }
            &-17 {
                @include hover($ta-blue-17);
            }
            &-19 {
                @include hover($ta-blue-19);
            }
            &-20 {
                @include hover($ta-blue-20);
            }
            &-21 {
                @include hover($ta-blue-21);
            }
        }

        &-red {
            &-15 {
                @include hover($ta-red-15);
            }
            &-14 {
                @include hover($ta-red-14);
            }
        }

        &-gray {
            @include hover($ta-gray-02);
        }

        &-light-grey {
            @include hover($ta-light-grey);

            &-5 {
                @include hover($ta-light-grey-5);
            }
        }

        &-bw-9 {
            @include hover($bw-9);
        }

        &-green {
            &-special-filter {
                @include hover($special-filter-green);
            }
        }
    }
}