// ============================================================================
// Themes
// ============================================================================


// Theme Logic ----------------------------------------------------------------
// Contains all the prompt names
$theme-list:
    "konami",
    "arthritis",
    "blindness",
    "cataracts",
    "color-blindness-blocked-visual-field",
    "contrast-loss",
    "diminished-problem-solving-skills",
    "dyslexia",
    "english-as-a-second-language",
    "glare",
    "glaucoma",
    "hearing-loss",
    "limb-loss",
    "low-bandwidth",
    "multiple-sclerosis",
    "nearsightedness",
    "nearsightedness-farsightedness",
    "neural-hearing-loss",
    "oral-learning-disability",
    "parkinsons-disease",
    "quadriplegia",
    "tinnitus",
    "traumatic-brain-injury",
    "vertigo";


// Iterates through each prompt name to generate a theme for it
@each $theme in $theme-list {
    .t-#{$theme} {
        background-color: c(t-background, #{$theme});

        color: c(t-text, #{$theme});

        .l-aside,
        .l-main,
        .l-nav {
            a,
            button {
                color: c(t-text, #{$theme});
                fill: c(t-text, #{$theme});

                // States
                &:focus {
                    outline: border(thick) solid c(t-text, #{$theme});

                    background-color: c(t-text, #{$theme});

                    color: c(t-background, #{$theme});

                    .icon {
                        fill: c(t-background, #{$theme});
                    }

                    &:hover {
                        .icon {
                            fill: c(t-text, #{$theme});
                        }
                    }
                }

                &:hover {
                    &:active,
                    &:focus {
                        outline: none;

                        background-color: transparent;

                        color: c(t-text, #{$theme});
                    }
                }
            }
        }

        .l-aside,
        .l-nav {
            // States
            &:hover {
                &:active,
                &:focus {
                    .icon {
                        fill: c(t-text, #{$theme});
                    }
                }
            }
        }

        .c-prompt__example,
        .c-prompt__directions {
            a {
                @include content-underline(c(t-text, #{$theme}));
            }
        }

        .icon {
            fill: c(t-text, #{$theme});
        }
    }
}
