@import 'theme/variables.scss';

@mixin svg-fill($color) {
    svg path,
    svg circle {
        fill: $color !important;
    }
}

@mixin svg-fill-first-path-child($color) {
    svg path:first-child {
        fill: $color !important;
    }
}

@mixin svg-rect-fill($color) {
    fill: $color !important;

    svg rect {
        fill: $color !important;
    }
}

@mixin svg-hover($color) {
    svg path {
        transition: fill 0.3s ease-in-out;
    }

    &:hover {
        svg path {
            fill: $color !important;
        }
    }
}

@mixin svg-rect-hover($color) {
    transition: fill 0.3s ease-in-out;

    svg rect {
        transition: fill 0.3s ease-in-out;
    }

    &:hover {
        fill: $color !important;

        svg rect {
            fill: $color !important;
        }
    }
}

@mixin svg-size($width, $height) {
    svg {
        width: $width;
        height: $height;
    }
}

.svg {
    // Colors
    &-fill {
        &-dark-2 {
            @include svg-fill($dark-2);
        }
        &-black {
            @include svg-fill($black);
            &-2 {
                @include svg-fill($black-2);
            }
            &-9 {
                @include svg-fill($black-9);
            }
        }
        &-white {
            @include svg-fill($white);
        }
        &-white-2 {
            @include svg-fill($white-2);
        }
        &-white-3 {
            @include svg-fill($white-3);
        }
        &-white-4 {
            @include svg-fill($white-4);
        }
        &-muted {
            @include svg-fill($muted);
        }
        &-grey {
            @include svg-fill($bw5);
        }
        &-grey-2 {
            @include svg-fill($grey-2);
        }
        &-bw6-2 {
            @include svg-fill($bw6-2);
        }
        &-bw-9 {
            @include svg-fill($bw-9);
        }
        &-light-grey-2 {
            @include svg-fill($ta-light-grey-2);
        }
        &-light-grey-6 {
            @include svg-fill($ta-light-grey-6);
        }
        &-blue-8 {
            @include svg-fill($blue-8);
        }
        &-blue-9 {
            @include svg-fill($blue-9);
        }
        &-blue-13 {
            @include svg-fill($ta-blue-13);
        }
        &-blue-14 {
            @include svg-fill($ta-blue-14);
        }
        &-blue-17 {
            @include svg-fill($ta-blue-17);
        }
        &-blue-19 {
            @include svg-fill($ta-blue-19);
        }
        &-blue-26 {
            @include svg-fill($ta-blue-26);
        }
        &-green {
            @include svg-fill($ta-green);
        }
        &-green-2 {
            @include svg-fill($ta-green-2);
        }
        &-green-4 {
            @include svg-fill($ta-green-4);
        }
        &-green-6 {
            @include svg-fill($ta-green-6);
        }
        &-yellow-1 {
            @include svg-fill($ta-yellow-1);
        }
        &-yellow-3 {
            @include svg-fill($ta-yellow-3);
        }
        &-yellow-4 {
            @include svg-fill($ta-yellow-4);
        }
        &-yellow-5 {
            @include svg-fill($ta-yellow-5);
        }
        &-yellow-8 {
            @include svg-fill($ta-yellow-8);
        }
        &-white-4 {
            @include svg-fill($white-4);
        }
        &-grey {
            @include svg-fill($bw5);
        }
        &-red-10 {
            @include svg-fill($ta-red-10);
        }
        &-red-11 {
            @include svg-fill($ta-red-11);
        }
        &-red-13 {
            @include svg-fill($ta-red-13);
        }
        &-red-14 {
            @include svg-fill($ta-red-14);
        }
        &-red-15 {
            @include svg-fill($ta-red-15);
        }
        &-red-18 {
            @include svg-fill($ta-red-18);
        }
        &-orange-4 {
            @include svg-fill($ta-orange-4);
        }
        &-brown {
            @include svg-fill($brown-bold);
        }
        &-purple-4 {
            @include svg-fill($purple-4);
        }
    }

    // First Path Child
    &-fill-first-path-child {
        &-green {
            @include svg-fill-first-path-child($ta-green);
        }
        &-green-6 {
            @include svg-fill-first-path-child($ta-green-6);
        }
        &-yellow-1 {
            @include svg-fill-first-path-child($ta-yellow-1);
        }
        &-orange-4 {
            @include svg-fill-first-path-child($ta-orange-4);
        }
        &-red-10 {
            @include svg-fill-first-path-child($ta-red-10);
        }
        &-light-grey-2 {
            @include svg-fill-first-path-child($ta-light-grey-2);
        }
    }

    // Hovers
    &-hover {
        &-white {
            @include svg-hover($white);
        }
        &-white-2 {
            @include svg-hover($white-2);
        }
        &-muted {
            @include svg-hover($muted);
        }
        &-grey {
            @include svg-hover($grey);
        }
        &-grey-4 {
            @include svg-hover($grey-4);
        }
        &-black {
            @include svg-hover($ta-black);
        }
        &-blue-9 {
            @include svg-hover($blue-9);
        }
        &-blue-10 {
            @include svg-hover($ta-blue-10);
        }
        &-blue-15 {
            @include svg-hover($ta-blue-15);
        }
        &-blue-17 {
            @include svg-hover($ta-blue-17);
        }
        &-blue-19 {
            @include svg-hover($ta-blue-19);
        }
        &-bw6-2 {
            @include svg-hover($bw6-2);
        }
        &-bw-9 {
            @include svg-hover($bw-9);
        }
        &-trash-red {
            @include svg-hover($settings-trash-red);
        }
        &-red-14 {
            @include svg-hover($ta-red-14);
        }
        &-yellow-4 {
            @include svg-hover($ta-yellow-4);
        }
    }

    // Sizes
    &-size {
        &-6 {
            @include svg-size(6px, 6px);
        }
        &-7 {
            @include svg-size(7px, 7px);
        }
        &-10 {
            @include svg-size(10px, 10px);
        }
        &-12 {
            @include svg-size(12px, 12px);
        }
        &-14 {
            @include svg-size(14px, 14px);
        }
        &-16 {
            @include svg-size(16px, 16px);
        }
        &-17 {
            @include svg-size(17px, 17px);
        }
        &-18 {
            @include svg-size(18px, 18px);
        }
        &-22 {
            @include svg-size(22px, 22px);
        }
        &-23 {
            @include svg-size(23px, 23px);
        }
        &-26 {
            @include svg-size(26px, 26px);
        }
        &-30-26 {
            @include svg-size(30px, 26px);
        }
        &-44-16 {
            @include svg-size(44px, 16px);
        }
        &-90 {
            @include svg-size(90px, 90px);
        }
    }

    &-rect {
        &-fill {
            &-blue-8 {
                @include svg-rect-fill($blue-8);
            }
            &-yellow-1 {
                @include svg-rect-fill($ta-yellow-1);
            }
            &-red-10 {
                @include svg-rect-fill($ta-red-10);
            }
            &-muted {
                @include svg-rect-fill($muted);
            }
            &-dark-2 {
                @include svg-rect-fill($dark-2);
            }
        }

        &-hover {
            &-blue-14 {
                @include svg-rect-hover($ta-blue-14);
            }
            &-yellow-5 {
                @include svg-rect-hover($ta-yellow-5);
            }
            &-red-11 {
                @include svg-rect-hover($ta-red-11);
            }
            &-bw6-2 {
                @include svg-rect-hover($bw6-2);
            }
            &-dark-2 {
                @include svg-rect-hover($dark-2);
            }
        }
    }
}