textarea, select, input {
    font-weight: 400;
    font-size: 0.95rem;
    padding: 5px 10px;
    border-radius: 5px;
    border: none;
    transition: box-shadow 0.25s, border 0.25s;
    background: rgba(40, 40, 40, 0.7);
    border: 1px solid var(--dark-sec-col);
    color: var(--text-col);
    resize: none;
}

textarea.big,
select.big,
input.big {
    padding: 10px;
}

textarea::placeholder,
select::placeholder,
input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

textarea:hover,
select:hover,
input:hover {
    box-shadow: -2px -2px 6px 0px rgba(255, 255, 255, 0.125) inset;
    border: 1px solid var(--dark-sec-col);
}

textarea:active,
select:active,
input:active,
textarea:focus,
select:focus,
input:focus {
    outline: none;
    border: 1px solid var(--yellow);
}

textarea:disabled,
select:disabled,
input:disabled {
    box-shadow: none;
    color: var(--grey);
}

/* -------------------------------------------------------------------------- */
/*                                   slider                                   */
/* -------------------------------------------------------------------------- */



input[type="range"] {
    -webkit-appearance: none;

    width: calc(100% - 10px);
    height: 10px;
    border-radius: 5px;
    padding: 0;
    margin: 5px;

    background: rgba(30, 30, 30, 0.7);
    border: 1px solid var(--dark-sec-col) !important;

    outline: none !important;
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    background: var(--yellow);

    transition: box-shadow .2s;
}
input[type="range"]:hover::-webkit-slider-thumb {
    box-shadow: inset 2px 2px 4px rgba(204, 170, 68, 0.75), inset -2px -2px 4px rgba(255, 230, 92, 0.75);
}

/* -------------------------------------------------------------------------- */
/*                                  checkbox                                  */
/* -------------------------------------------------------------------------- */

input[type=checkbox]+label {
    position: relative;
    user-select: none;
    cursor: pointer;
    padding-left: calc(1.25em + 5px);

    color: var(--text-col);
    
    font-weight: 400;
    font-size: 0.95rem;
}

input[type=checkbox]:disabled+label {
    cursor: auto;
}

input[type=checkbox]+label:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(1);
    transition: transform 0.25s;
    width: 1.25em;
    height: 1.25em;
    
    border-radius: 5px;
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid var(--dark-sec-col);
}

input[type=checkbox]+label:after {
    content: "\2714";
    position: absolute;
    left: 0.3em;
    top: 50%;
    transform: translateY(-50%) scale(1.5);
    transition: transform 0.125s, color 0.25s;

    color: transparent;
}

input[type=checkbox]:checked+label:after {
    transform: translateY(-50%) scale(1);
    color: var(--yellow);
}

input[type=checkbox]:disabled+label {
    opacity: 0.75;
    color: var(--grey);
}

input[type=checkbox]:disabled+label:before, input[type=checkbox]:disabled+label:after {
    opacity: 0.6;
    transform: translateY(-50%) scale(1);
}

input[type=checkbox]:not(:disabled)+label:hover:before {
    box-shadow: -1px -1px 3px 0px rgba(255, 255, 255, 0.125) inset;
    border: 1px solid var(--dark-sec-col);
}

input[type=checkbox]:not(:disabled)+label:active:before {
    transform: translateY(-50%) scale(0);
}

input[type=checkbox] {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

/* -------------------------------------------------------------------------- */
/*                                   radio                                    */
/* -------------------------------------------------------------------------- */


input[type=radio]+label {
    position: relative;
    user-select: none;
    cursor: pointer;
    padding-left: calc(1.25em + 5px);

    color: var(--text-col);
    
    font-weight: 400;
    font-size: 0.95rem;
}

input[type=radio]:disabled+label {
    cursor: auto;
}

input[type=radio]+label:before {
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%) scale(1);
    transition: transform 0.25s;
    width: 1.25em;
    height: 1.25em;
    
    border-radius: 100%;
    background: rgba(30, 30, 30, 0.7);
    border: 1px solid var(--dark-col);
}

input[type=radio]+label:after {
    content: " ";
    position: absolute;
    
    left: 0;
    top: 50%;
    width: 1.25em;
    height: 1.25em;
    
    border-radius: 100%;

    transform: translateY(-50%) scale(1.5);
    transition: transform 0.125s, background 0.25s;

    background: transparent;
    border: 1px solid transparent;
}

input[type=radio]:checked+label:after {
    transform: translateY(-50%) scale(1);
    background: radial-gradient(circle, var(--yellow) 0%, var(--yellow) 40%, transparent 45%, transparent 100%);
}

input[type=radio]:disabled+label {
    opacity: 0.75;
    color: var(--grey);
}

input[type=radio]:disabled+label:before, input[type=radio]:disabled+label:after {
    opacity: 0.6;
    transform: translateY(-50%) scale(1);
}

input[type=radio]:not(:disabled)+label:hover:before {
    box-shadow: -1px -1px 3px 0px rgba(255, 255, 255, 0.125) inset;
    border: 1px solid var(--dark-sec-col);
}

input[type=radio]:not(:disabled)+label:active:before {
    transform: translateY(-50%) scale(0);
}

input[type=radio] {
    position: absolute;
    left: 0;
    top: 0;
    display: none;
}

/* -------------------------------------------------------------------------- */
/*                                 inputgroup                                 */
/* -------------------------------------------------------------------------- */

.inputgroup>input, .inputgroup>span, .inputgroup>button {
    border-radius: 0;
}

.inputgroup>input:first-child, .inputgroup>span:first-child, .inputgroup>button:first-child {
    border-radius: 5px 0 0 5px;
}

.inputgroup>input:last-child, .inputgroup>span:last-child, .inputgroup>button:last-child {
    border-radius: 0 5px 5px 0;
}

.inputgroup>input {
    width: 100%;
}

.inputgroup>input, .inputgroup>span, .inputgroup>button {
    transition: filter 0.25s, color 0.25s, box-shadow 0.25s, border 0.25s, transform 0.25s;
    border: 1px solid var(--dark-col);
    --hovcol: v
}

.inputgroup:hover>input, .inputgroup:hover>span, .inputgroup:hover>button {
    border: 1px solid var(--dark-sec-col);
}

.inputgroup:has(input:disabled):hover>input, .inputgroup:has(input:disabled):hover>span, .inputgroup:has(input:disabled):hover>button {
    border: 1px solid var(--dark-col);
}

.inputgroup:focus-within>input, .inputgroup:focus-within>span, .inputgroup:focus-within>button {
    border: 1px solid var(--yellow);
}

.inputgroup>input:not(:first-child), .inputgroup>span:not(:first-child), .inputgroup>button:not(:first-child) {
    border-left: 0 !important;
}

.inputgroup>span {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    
    padding: 5px;
}

.inputgroup>span * {
    color: inherit;
}
    
.inputgroup>span, .inputgroup>button {
    color: rgba(255, 255, 255, 0.35);
}

.inputgroup:not(:has(input:disabled)):hover>span, .inputgroup:not(:has(input:disabled)):hover>button {
    color: var(--text-col);
}

.inputgroup:focus-within>span, .inputgroup:focus-within>button {
    color: var(--text-col);
}

.inputgroup>span.big {
    padding: 10px 12px;
}

.inputgroup {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
    align-content: center;
}