variable-intellisense {
    --modern-primary: #36393f;
    --modern-accent: #2f3136;
    --modern-secondary: #202225;
    --modern-text: #dcddde;
    --modern-contrast-text: #eeeeee;
    --modern-muted-text: #72767d;
    --modern-contrast-border: #dcddde;
    --modern-input: #40444b;
    --modern-error: #f44336;
    --modern-highlight: rgba(184, 134, 11, 0.2);
    --modern-active: rgba(0, 255, 255, 0.1);
    --modern-grades: #8bc34a;
    --modern-border-radius: 5px;
    --modern-border-size: 1px;
    --modern-padding: 10px;
    --modern-theme-is-dark: 1;
    --modern-cal1: #457da5;
    --modern-cal2: #547c41;
    --modern-cal3: #926c37;
    --modern-cal4: #7c3d6b;
    --modern-cal5: #0b4c9c;
    --modern-cal6: #00209c;
    --modern-cal7: #004a09;
    --modern-cal8: #72721a;
    --modern-cal9: #44233e;
    --modern-cal10: #683131;
    --modern-cal11: #770a0a;
    --modern-cal12: #a72413;
    --modern-cal13: #e0024c;
    --modern-cal14: #188c16;
    --modern-cal15: #bd7304;
    --modern-cal16: #80168c;
    --modern-cal17: #164152;
    --modern-cal18: #00543f;
    --modern-cal19: #633e11;
    --modern-cal20: #461b2d;
    --modern-cal21: #00427c;
    --modern-cal22: #603073;
    --modern-cal23: #8b1941;
    --modern-cal24: #970c0c;
    --modern-cal25: #9c3b07;
    --modern-cal26: #685203;
    --modern-cal27: #2a5f16;
    --modern-cal28: #09584f;
    --modern-cal29: #005a75;
    --modern-cal30: #4d5557;
}

:root[modern="true"] {
    &[dark="true"] {
        // anything dark specific? maybe an inverting icon example?
    }

    body {
        background-color: var(--modern-secondary);
    }

    * {
        color: var(--modern-text) !important;
    }

    .modern-primary {
        background-color: var(--modern-primary) !important;
    }

    .modern-secondary {
        background-color: var(--modern-secondary) !important;
    }

    .modern-accent {
        background-color: var(--modern-accent) !important;
    }

    .modern-input {
        background-color: var(--modern-input) !important;
    }

    .modern-highlight {
        background-color: var(--modern-highlight) !important;
    }

    .modern-active {
        background-color: var(--modern-active) !important;
    }

    .modern-error {
        background-color: var(--modern-error) !important;
    }

    .modern-error-text {
        color: var(--modern-error) !important;
    }

    .modern-grades {
        color: var(--modern-grades) !important;
    }

    .modern-text {
        color: var(--modern-text) !important;
    }

    .modern-contrast-text {
        color: var(--modern-contrast-text) !important;
    }

    .modern-muted-text {
        color: var(--modern-muted-text) !important;
    }

    .modern-border {
        border: var(--modern-border-size) solid var(--modern-contrast-border) !important;
    }

    .modern-border-radius {
        border-radius: var(--modern-border-radius) !important;
    }

    .modern-padding {
        padding: var(--modern-padding) !important;
    }

    .modern-margin {
        margin: var(--modern-padding) !important;
    }

    .modern-black {
        color: black !important;
    }

    #themes-list-section {
        .collection a.collection-item {
            background-color: var(--modern-primary);

            &.active {
                background-color: var(--modern-active) !important;
            }

            &:not(.active):hover {
                background-color: var(--modern-highlight);
            }
        }
    }

    #theme-editor-section {
        .sp-replacer {
            border: var(--modern-border-size) solid var(--modern-contrast-border);
            background-color: var(--modern-input);
        }
    }

    #preview-section {
        svg,
        svg * {
            color: var(--modern-contrast-text) !important;
        }

        #preview-profile-pic {
            border-color: var(--modern-contrast-text) !important;
        }

        .preview-course {
            border: var(--modern-border-size) solid transparent;

            &:hover {
                border: var(--modern-border-size) solid var(--modern-contrast-border);
            }

            .preview-course-class {
                color: var(--link-color) !important;
            }

            .preview-course-section {
                color: var(--modern-text) !important;
            }

            .preview-course-school {
                color: var(--modern-muted-text) !important;
            }
        }

        #tab-icons {
            #icon-list-table tbody:empty:before {
                color: var(--modern-muted-text) !important;
            }
        }

        #preview-dropdown-list li:hover {
            background-color: var(--modern-active) !important;
        }
    }

    .material-tooltip {
        background-color: var(--modern-secondary);
        border: var(--modern-border-size) solid var(--modern-contrast-border);
        border-radius: var(--modern-border-radius);
    }

    .rs-bg-color {
        background-color: var(--modern-input);
    }

    .full-spectrum {
        background-color: var(--modern-accent) !important;

        button {
            background-color: var(--modern-secondary) !important;
            background-image: none;
            text-shadow: none;
        }
    }

    input[type="range"] {
        border: var(--modern-border-size) solid var(--modern-contrast-border);
    }

    .action-button:hover {
        transition: 0.3s ease-out !important;
        color: var(--modern-contrast-text) !important;

        i.material-icons {
            transition: 0.3s ease-out !important;
            color: var(--modern-contrast-text) !important;
        }
    }

    #create-preset-dropdown > li:hover {
        background-color: var(--modern-active);
    }
}
