button.main-button-primary {
    background-color: spiceColor(selected-row, 0.4) !important;

    &:hover,
    &:active {
        background-color: spiceColor(selected-row, 0.6) !important;
    }

    span {
        color: spiceColor(subtext) !important;
    }
}

input,
textarea {
    background-color: spiceColor(selected-row, 0.4) !important;
    border-radius: 4px !important;
    padding: 6px 10px 6px 48px;
    color: spiceColor(text) !important;

    &:hover,
    &:active {
        background-color: spiceColor(selected-row, 0.6) !important;
    }

    &[type="range"] {
        -webkit-appearance: none;
        background: transparent;
        padding: 0px;

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            margin-top: -4px;
            border-radius: 50%;
            background-color: spiceColor(text);

            &:hover,
            &:active {
                filter: brightness(80%);
            }
        }

        &::after {
            z-index: 9999;
            content: attr(tooltip);
            position: absolute;
            min-width: 50px;
            top: -10px;
            left: 50%;
            transform: translateX(calc(-50%));
            padding: 0 5px;
            border-radius: 4px;
            text-align: center;
            color: spiceColor(sidebar-text);
            background-color: spiceColor(button);
            transition: opacity 0.25s ease;
            opacity: 0;
        }

        &:hover::after,
        &:active::after {
            opacity: 1;
        }

        &:focus {
            outline: none;
        }

        &::-webkit-slider-runnable-track {
            width: 100%;
            height: 8px;
            background-color: spiceColor(text, 0.2);
            border-radius: 50vw;
        }
    }

    &[type="number"],
    &[type="text"],
    &[type="time"] {
        height: 32px;
        border: none;
        border-radius: 4px !important;
        padding: 0px 10px;
        color: spiceColor(subtext) !important;
    }

    &[type="time"] {
        &::-webkit-calendar-picker-indicator {
            filter: invert(calc(1 - var(--is_light)));
        }
    }

    &[type="color"] {
        position: relative;
        padding: 0px;
        border: none;

        &::before {
            z-index: -1;
            content: "";
            position: absolute;
            inset: -5px;
            border-radius: 4px;
            background-color: spiceColor(selected-row, 0.4);
        }

        &:hover::before,
        &:active::before {
            background-color: spiceColor(selected-row, 0.6);
        }
    }
}