:root {
    --accent-color: #ea76cb;
    --bg-color: #eff1f5;
    --bg-color-focus: #ccd0da;
    --outline-color: var(--bg-color-focus);
    --outline-color-hover: #bcc0cc;
    --outline-color-focused: #acb0be;
    /* --bg-color: color-mix(in srgb, var(--accent-color) 1%, var(--bg-color-raw) 99%); */
    --text-color: #4c4f69;
    --text-inverted-color: var(--bg-color);

    --good-color: #40a02b;
    --good-hover-color: color-mix(in srgb, var(--accent-color) 15%, var(--good-color) 85%);
    --warning-color: #df8e1d;
    --caution-color: #d20f39;
    --informative-color: #8839ef;

    --ctp-surface0: #ccd0da;

    --transition-bezier: cubic-bezier(.25, .46, .45, .94);
}

@media (prefers-color-scheme: dark) {
    :root {
        --accent-color: #f5c2e7; /* hehe */
        --bg-color: #1e1e2e;
        --bg-color-focus: #313244;
        --outline-color: var(--bg-color-focus);
        --outline-color-hover: #45475a;
        --outline-color-focused: #585b70;
        /* --bg-color: color-mix(in srgb, var(--accent-color) 1%, var(--bg-color-raw) 99%); */
        --text-color: #cdd6f4;
        --text-inverted-color: var(--bg-color);

        --good-color: #a6e3a1;
        --good-hover-color: color-mix(in srgb, var(--accent-color) 15%, var(--good-color) 85%);
        --warning-color: #f9e2af;
        --caution-color: #f38ba8;
        --informative-color: #cba6f7;

        --ctp-surface0: #313244;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
* {font-family: Lexend}

#everything {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 5px;
}

.selection-wrapper {
    margin-top: 10px;
    margin-bottom: 10px;
}

select {
    padding: 6px;
    border: 2px solid var(--outline-color);
    border-radius: 4px;
    background-color: var(--ctp-surface0);
    color: var(--text-color);
    cursor: pointer;
    font-family: Arial, sans-serif;
}

#powercontrol p {
    margin: 0px;
    margin-left: 5px;
}

.config-container {
    border: var(--outline-color) 2px solid;
    width: 35%;
    height: 40%;
}
@keyframes config-container-border-flash {
    0% {
        border: var(--accent-color) 2px solid;
    }
    100% {
        border: var(--outline-color) 2px solid;
    }
}
.config-container.flash_borders {
    animation: .5s config-container-border-flash var(--transition-bezier);
}
.config-container-inner {
    display: flex;
    flex-direction: row;
}

.block-centered {
    display: block;
    margin: 0 auto;
}

/* yes, the margin- is intended for these two classes. */
.config-container .leftmost {
    margin-right: auto;
}
.config-container .rightmost {
    margin-left: auto;
}

button {
    max-width: max-content;
    border: none;
    padding: 10px 24px;
    background-color: var(--good-color);
    color: var(--text-inverted-color);
    font-size: .95rem;
    border-radius: 16px;
    transition: all .4s var(--transition-bezier);
}

button:hover {
    background-color: var(--good-hover-color);
}

button:active {
    background: var(--text-color);
}

.radio-container {
    display: flex;
    flex-direction: column;
    width: 30%;
    margin-bottom: 10px;
}

.flex-column-inline {
    display: flex;
    flex-direction: row;

    gap: 10px;
}
/* TODO: reintergrate this once putting the radio buttons on the right is possible.
this will be a huge feat for humanity. */
/* .radio-container.rightmost .flex-column-inline {
    margin-left: auto;
} */

#input_container {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 999; /* take priority over the checkbox. */
}

input[type="text"] {
    width: 70%;
    padding: 10px;
    color: var(--text-color);
    background-color: var(--bg-color);
    border: 2px solid var(--ctp-surface0);
    border-radius: 4px;

    width: 25%;

    transition: all 150ms ease-in;
}

input[type="text"]:hover {
    border-color: var(--outline-color-hover);
}

input[type="text"]:focus {
    outline: none;
    border-color: var(--outline-color-focused);
}

.radio-container {
    display: flex;
    gap: 10px;
}

/* TODO: make inner circle smaller */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    min-width: 15px;
    height: 15px;
    transform: scale(1);
    border: 2px solid var(--text-color);
    border-radius: 50%;
    outline: none;

    transition: all 150ms ease-in;
    margin-right: 0px;
}

/* for input[type="radio"]; this makes it so there isn't extra space where you can't click on the button */
label {
    margin-left: -22px;
    padding-left: 20px;
}

.checkbox-label {
    margin-left: -0px; top: 10px
}

input[type="radio"]::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: -3px;
    border-radius: 50%;
    transform: scale(0);
}

input[type="radio"]:hover {
    border-color: var(--accent-color);
}

input[type="radio"]:checked {
    border-color: var(--accent-color);
    background-color: var(--accent-color);
}

input[type="checkbox"] {
    visibility: hidden;
}

input[type="checkbox"] {
    display: none;
}

/* the actual checkbox */
input[type="checkbox"] + label {
    position: relative;
    padding-left: 28px;
    padding-right: 15px;
    cursor: pointer;
}

input[type="checkbox"] + label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 16px;
    height: 16px;
    border: 2px solid var(--ctp-surface0);
    border-radius: 3px;
    background-color: var(--bg-color);

    transition: background-color 0.2s, border-color 0.2s;
}

input[type="checkbox"]:checked + label:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16' fill='currentColor' style='display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;'%3E%3Cpath d='M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z'%3E%3C/path%3E%3C/svg%3E");
    color: #fff;
    background-color: var(--outline-color-hover);
    border-color: var(--accent-color);
}