:root[data-style="Unity"] {
    .button {
        padding: 3px 6px;
        text-align: center;
    }

    .primary-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--primary-background);
        color: var(--primary-color);
        text-align: center;

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

    .secondary-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--secondary-background);
        color: var(--secondary-color);
        text-align: center;
    }

    .danger-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--danger-background);
        color: var(--danger-color);
        text-align: center;
    }

    .icon-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--primary-background);
        color: var(--primary-color);
        text-align: center;
    }

    .form-button {
        padding: 3px 6px;
        text-align: center;
    }

    .form-primary-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--primary-background);
        color: var(--primary-color);
        text-align: center;

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

    .form-secondary-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--secondary-background);
        color: var(--secondary-color);
        text-align: center;
    }

    .form-danger-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--danger-background);
        color: var(--danger-color);
        text-align: center;
    }

    .form-icon-button {
        border-radius: 3px;
        padding: 3px 6px;
        background-color: var(--primary-background);
        color: var(--primary-color);
        text-align: center;
    }
}

:root[data-style="Unity"] {
    .checkbox {
        border-radius: 3px;
        padding: 3px;
        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: 3px;
        padding: 3px;
        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="Unity"] {
    .field {
        flex-direction: row;
        padding: 3px;
        gap: 3px;

        .field-container {
            flex-grow: 1;
            width: 0%;
        }

        .field-text {
            width: 100%;
        }

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

:root[data-style="Unity"] {
    .input {
        border-radius: 3px;
        padding: 3px;
        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: 3px;
        padding: 3px;
        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="Unity"] {
    .select {
        border-radius: 3px;
        padding: 3px;
        background-color: var(--primary-background);
        color: var(--primary-color);

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

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

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

:root[data-style="Unity"] {
    .switch {
        border-radius: 3px;
        flex-direction: row;
        overflow: hidden;

        .switch-button {
            padding: 3px 6px;
            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="Unity"] {
    .textarea {
        border-radius: 3px;
        padding: 3px;
        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: 3px;
        padding: 3px;
        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="Unity"] {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.1px;
    --background: #141414;
    --color: #c7c7c7;
    --primary-background: #505050;
    --primary-color: #c7c7c7;
    --primary-hover: #646464;
    --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;
    }
}