:root[data-style="Vules"] {
    .button {
        padding: 0.5rem 1rem;
    }

    .primary-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--primary-background);
        color: var(--primary-color);

        &:hover {
            background-color: var(--primary-hover);
        }
    }

    .secondary-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--secondary-background);
        color: var(--secondary-color);
    }

    .danger-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--danger-background);
        color: var(--danger-color);
    }

    .icon-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
    }

    .form-button {
        padding: 0.5rem 1rem;
    }

    .form-primary-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--primary-background);
        color: var(--primary-color);

        &:hover {
            background-color: var(--primary-hover);
        }
    }

    .form-secondary-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--secondary-background);
        color: var(--secondary-color);
    }

    .form-danger-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--danger-background);
        color: var(--danger-color);
    }

    .form-icon-button {
        border-radius: 0.5rem;
        padding: 0.5rem 1rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
    }
}

:root[data-style="Vules"] {
    .checkbox {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
        outline: 1px solid #3c3c3c;

        &:hover {
            outline-color: var(--primary-hover);
        }

        &:focus {
            outline-color: royalblue;
        }
    }

    .form-checkbox {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
        outline: 1px solid #3c3c3c;

        &:hover {
            outline-color: var(--primary-hover);
        }

        &:focus {
            outline-color: royalblue;
        }
    }
}

:root[data-style="Vules"] {
    .field {
        flex-direction: column;
        padding: 0.5rem;
        gap: 0.5rem;

        .field-container {
            width: 100%;
        }

        .field-text {
            width: 100%;
        }

        .field-description {
            width: 100%;
        }
    }
}

:root[data-style="Vules"] {
    .input {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
        outline: 1px solid #3c3c3c;

        &:hover {
            outline-color: var(--primary-hover);
        }

        &:focus {
            outline-color: royalblue;
        }
    }

    .form-input {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
        outline: 1px solid #3c3c3c;

        &:hover {
            outline-color: var(--primary-hover);
        }

        &:focus {
            outline-color: royalblue;
        }
    }
}

:root[data-style="Vules"] {
    .select {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);

        &:hover {
            background-color: var(--primary-hover);
        }
    }

    .form-select {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);

        &:hover {
            background-color: var(--primary-hover);
        }
    }
}

:root[data-style="Vules"] {
    .switch {
        border-radius: 0.5rem;
        flex-direction: row;
        overflow: hidden;

        .switch-button {
            padding: 0.5rem 1rem;
            background-color: var(--primary-background);
            color: var(--primary-color);
            text-align: center;
            flex-grow: 1;
            width: 0%;

            .switch-button-text {
                width: 100%;
            }

            &:hover {
                background-color: var(--primary-hover);
            }

            &[selected="true"] {
                background-color: var(--secondary-background);
                color: var(--secondary-color);
            }
        }
    }
}

:root[data-style="Vules"] {
    .textarea {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
        outline: 1px solid #3c3c3c;

        &:hover {
            outline-color: var(--primary-hover);
        }

        &:focus {
            outline-color: royalblue;
        }
    }

    .form-textarea {
        border-radius: 0.5rem;
        padding: 0.5rem;
        background-color: var(--primary-background);
        color: var(--primary-color);
        outline: 1px solid #3c3c3c;

        &:hover {
            outline-color: var(--primary-hover);
        }

        &:focus {
            outline-color: royalblue;
        }
    }
}

:root[data-style="Vules"] {
    --background: hsl(0, 0%, 8%);
    --color: hsl(0, 0%, 92%);
    --primary-background: #fff;
    --primary-color: #000;
    --primary-hover: #eee;
    --secondary-background: #333;
    --secondary-color: #c7c7c7;
    --danger-background: crimson;
    --danger-color: white;

    app {
        background-color: var(--background);
        color: var(--color);
    }

    .gap {
        gap: 3px;
    }

    .form {
        gap: 3px;
    }
}