/* =========================
   BASE
========================= */

* {
    box-sizing: border-box;
}

.dropdown,
.nselect,
.ui-input {
    width: 320px;
}

/* =========================
   SHARED SURFACE STYLE
========================= */

.toggle-box,
.nselect,
.dropdown-box,
.ui-input,
.switch-track {
    background: var(--surface-button-dark);

    border: 1px solid var(--border-soft);

    backdrop-filter: blur(12px);

    box-shadow:
        inset 0 1px rgba(255,255,255,0.03);

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.toggle-box:hover,
.nselect:hover,
.dropdown-box:hover,
.ui-input:hover {
    border-color: var(--accent);

    box-shadow:
        0 0 0 1px var(--accent),
        0 10px 30px rgba(0,0,0,0.2);
}

/* =========================
   THEME TOGGLE
========================= */

#switch {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

#bg-switch {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.toggle-box {
    position: relative;

    width: 200px;
    height: 60px;

    border-radius: 999px;

    display: flex;
    overflow: hidden;

    cursor: pointer;
    user-select: none;
}

.option {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;

    z-index: 2;

    font-size: 14px;
    font-weight: 600;

    color: var(--text-color);

    transition: color .3s ease;
}

.slider {
    position: absolute;

    top: 5px;
    left: 5px;

    width: 95px;
    height: 50px;

    border-radius: 999px;

    background: var(--accent);

    box-shadow:
        0 0 20px rgba(0,0,0,0.25),
        inset 0 1px rgba(255,255,255,0.15);

    transition: transform .35s ease;

    z-index: 1;
}

#switch:checked + .toggle-box .slider {
    transform: translateX(95px);
}
#bg-switch:checked + .toggle-box .slider {
    transform: translateX(95px);
}

#switch:not(:checked) + .toggle-box .left,
#switch:checked + .toggle-box .right {
    color: var(--accent-text);
    font-weight: 700;
}

#bg-switch:not(:checked) + .toggle-box .left,
#bg-switch:checked + .toggle-box .right {
    color: var(--accent-text);
    font-weight: 700;
}

/* =========================
   SWITCH
========================= */

.switch {
    position: relative;

    width: 70px;
    height: 36px;

    display: inline-block;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.switch-track {
    position: absolute;
    inset: 0;

    border-radius: 999px;
}

.switch-knob {
    position: absolute;

    top: 4px;
    left: 4px;

    width: 28px;
    height: 28px;

    border-radius: 50%;

    background: var(--text-color);

    box-shadow:
        0 2px 12px rgba(0,0,0,0.3);

    transition: transform .3s ease;
}

.switch input:checked + .switch-track {
    background: var(--accent);
}

.switch input:checked + .switch-track .switch-knob {
    transform: translateX(34px);
}

/* =========================
   N SELECT
========================= */

.nselect {
    position: relative;

    height: 60px;

    border-radius: 999px;

    display: flex;
    overflow: hidden;
}

.nselect input {
    position: absolute;
    opacity: 0;
}

.nselect .option {
    cursor: pointer;
}

.nselect-slider {
    position: absolute;

    top: 5px;
    left: 5px;

    height: 50px;
    width: calc(100% / 3 - 6px);

    border-radius: 999px;

    background: var(--accent);

    box-shadow:
        0 0 20px rgba(0,0,0,0.25),
        inset 0 1px rgba(255,255,255,0.15);

    transition: transform .35s ease;

    z-index: 1;
}

/* color selector */

#optviolet:checked ~ .nselect-slider {
    transform: translateX(0%);
}

#optgreen:checked ~ .nselect-slider {
    transform: translateX(100%);
}

#optred:checked ~ .nselect-slider {
    transform: translateX(200%);
}

#optviolet:checked ~ label[for="optviolet"],
#optgreen:checked ~ label[for="optgreen"],
#optred:checked ~ label[for="optred"] {
    color: var(--accent-text);
    font-weight: 700;
}

/* background selector */

#optgrid:checked ~ .nselect-slider {
    transform: translateX(0%);
}

#optblobs:checked ~ .nselect-slider {
    transform: translateX(100%);
}

#optnone:checked ~ .nselect-slider {
    transform: translateX(200%);
}

#optgrid:checked ~ label[for="optgrid"],
#optblobs:checked ~ label[for="optblobs"],
#optnone:checked ~ label[for="optnone"] {
    color: var(--accent-text);
    font-weight: 700;
}

/* =========================
   DROPDOWN
========================= */

.dropdown {
    position: relative;
}

#drop {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.dropdown-box {
    height: 60px;

    padding: 0 22px;

    border-radius: 999px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    cursor: pointer;
    user-select: none;
}

.dropdown-selected {
    color: var(--text-color);
    font-weight: 600;
}

.dropdown-arrow {
    color: var(--text-color);
    opacity: .7;

    transition:
        transform .3s ease,
        opacity .3s ease;
}

#drop:checked + .dropdown-header .dropdown-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.dropdown-menu {
    position: absolute;

    top: 70px;
    left: 0;

    width: 100%;

    background: var(--surface-strong);

    backdrop-filter: blur(20px);

    border: 1px solid var(--border-soft);

    border-radius: 22px;

    overflow: hidden;

    max-height: 0;

    opacity: 0;

    transform: translateY(-10px);

    transition: all .3s ease;

    box-shadow:
        0 20px 40px rgba(0,0,0,0.35);

    z-index: 20;
}

#drop:checked ~ .dropdown-menu {
    max-height: 240px;

    opacity: 1;

    transform: translateY(0);
}

.dropdown-option {
    padding: 16px 20px;

    color: var(--text-color);

    cursor: pointer;

    transition:
        background .2s ease,
        padding-left .2s ease;
}

.dropdown-option:hover {
    background: var(--surface-hover);
    padding-left: 26px;
}

.dropdown-option + .dropdown-option {
    border-top: 1px solid var(--border-soft);
}

/* =========================
   INPUT
========================= */

.ui-input {
    height: 60px;

    padding: 0 24px;

    border-radius: 999px;

    color: var(--text-color);

    font-size: 15px;
    font-weight: 600;

    outline: none;
}

.ui-input::placeholder {
    color: var(--text-color);
    opacity: .45;
}

.ui-input:focus {
    border-color: var(--accent);

    box-shadow:
        0 0 0 1px var(--accent),
        0 10px 30px rgba(0,0,0,0.25);
}

.ui-input:focus::placeholder {
    opacity: .25;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px) {

    .dropdown,
    .nselect,
    .ui-input {
        width: 100%;
    }

    .toggle-box {
        width: 100%;
        max-width: 320px;
    }
}