:root {
    --Black: #1F1F1F;
    --TransparentBlack: rgba(31, 31, 31, 0.5);
    --LightBlack: #313236;
    --InputColor: #434650;
    --White: #fff;
    --Blue: #0099D5;
    --DarkBlue: #0089be;
    --Orange: #FF400A;
    --DarkOrange: #e03101;
    --DarkGrayColor: #2b2b2f;
    --GrayColor: #C4C4C4;
    --MidGrayColor: #7a7a7a;
    --Transparent: rgb(0,0,0,0);
}

:root.light {
    --Black: #efefef;
    --TransparentBlack: rgba(239, 239, 239, 0.5);
    --LightBlack: #d3d3d3;
    --InputColor: #8c8c8c;
    --White: #434650;
    --Blue: #5acef6;
    --DarkBlue: #a4ddf6;
    --Orange: #FF400A;
    --DarkOrange: #e03101;
    --DarkGrayColor: #C4C4C4;
    --GrayColor: #C4C4C4;
    --MidGrayColor: #7a7a7a;
    --Transparent: rgb(0,0,0,0);
}

:root.light .theme-icon {
    filter: invert(96%) sepia(4%) saturate(0%) hue-rotate(306deg) brightness(103%) contrast(107%);
}

.icon-orange {
    filter: invert(38%) sepia(98%) saturate(4234%) hue-rotate(355deg) brightness(102%) contrast(103%);
}

.icon-blue {
    filter: invert(43%) sepia(39%) saturate(5738%) hue-rotate(171deg) brightness(98%) contrast(104%);
}

.color-options {
    --MagentaOption: #BF48B0;
    --BlueOption: #163BF6;
    --RedOption: #FF0707;
    --YellowOption: #EED906;
    --CyanOption: #15ACA3;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--Black);
    border-radius: 4px;
    height: 5vh;
    width: fit-content;
}

.color-radio {
    display: flex;
    align-items: center;
    margin: 10px;
    cursor: pointer;
}

.color-radio input[type="radio"] {
    display: none;
}

.color-radio span {
    display: inline-block;
    width: 2vh;
    height: 2vh;
    border: 2px solid transparent;
}

.color-radio input[type="radio"]:checked + span {
    border-color: var(--White);
}

.red span {
    background-color: var(--RedOption);
}

.cyan span {
    background-color: var(--CyanOption);
}

.blue span {
    background-color: var(--BlueOption);
}

.yellow span {
    background-color: var(--YellowOption);
}

.magenta span {
    background-color: var(--MagentaOption);
}