input[type="range"] {
    appearance: none;
    background: transparent;
    cursor: pointer;
    width: 100%;

}

input[type="range"]::-webkit-slider-runnable-track {
    background: url(../assets/images/ui/scotch.webp) no-repeat center;
    background-size: 100% auto;
    height: 0.4rem;
    border: none;
    box-shadow: 0px 0px 13px rgba(31, 26, 26, 0.979) inset;
}

input[type="range"]::-webkit-slider-thumb {

    appearance: none;
    margin-top: -0.3rem;
    /* Centers thumb on the track */
    height: 1rem;
    width: 1rem;
    border: none;
    border-radius: 50%;
    background: url(/systems/vermine2047/assets/images/ui/totems/human.webp);
    background-size: cover;
    filter: contrast(2);
    box-shadow: 0px 0px 10px black
}

input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0px 0px 10px yellow
}

select {
    border: none;
    background: url(../assets/images/ui/scotch.webp);
    background-size: 100% 100%;
    box-shadow: 0px 0px 3px rgba(31, 26, 26, 0.979) inset;

    &[disabled] {
        color: rgb(0, 0, 0);
        text-shadow: 0px 0px 15px black;
    }

    option {
        appearance: none;
        border: none;
        background: url(../assets/images/ui/scotch.webp);
        background-size: 100% 100%;
    }
}

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    box-shadow: 0px 0px 3px rgb(133, 133, 78);
    cursor: pointer;
    width: 1.5rem;
    height: 1rem;
    border-radius: 0.4rem;
    transition: 0.3s;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
    box-shadow: 0px 0px 6px black inset;
    background-color: rgba(61, 11, 11, 0.658);

    &[disabled="true"] {
        filter: grayscale(1)
    }

    &:after {
        content: " ";
        background: url(/systems/vermine2047/assets/images/ui/totems/human.webp);
        background-size: 50% 150%;
        background-repeat: no-repeat;
        position: relative;
        top: 10%;
        left: 0%;
        width: 100%;
        height: 80%;
        display: block;
        border-radius: 0%;
        padding: 0;
        transition: 0.3s;


    }


    &:checked {
        background-color: rgba(26, 107, 12, 0.658);


        &:after {
            font-weight: 900;
            background-color: rgba(26, 1, 1, 0);
            left: 50%;



        }
    }
}

input[type="radio"] {

    width: 1rem;
    height: 1rem;

    &:after {
        width: 0.8rem;
        background-size: 100% 100%;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        background-size: 30% 30%;
        background-position: center;

    }

    &:not([disabled]):hover::after {
        background-size: 90% 90%;

    }

    &:checked::after {
        content: "";
        background-size: 70% 70%;
        top: 5%;
        left: 5%;
        position: relative;
        background-color: rgba(26, 1, 1, 0);


    }
}