body {
    background: var(--ws-bg);
    color: var(--ws-text);
}

.card,
.dropdown-menu,
.offcanvas,
.modal-content,
.list-group-item {
    color: var(--ws-text);
    background: var(--ws-surface);
    border-color: var(--ws-border);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-shadow-soft);
}

.table {
    --bs-table-color: var(--ws-text);
    --bs-table-bg: var(--ws-surface);
    --bs-table-border-color: var(--ws-border);
    --bs-table-striped-bg: var(--ws-surface-2);
    --bs-table-hover-bg: var(--ws-surface-3);
}

.form-control,
.form-select,
.form-check-input {
    color: var(--ws-input-text);
    background-color: var(--ws-input-bg);
    border-color: var(--ws-border);
    border-radius: var(--ws-radius);
    box-shadow: var(--ws-inset-shadow);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    color: var(--ws-input-text);
    background-color: var(--ws-input-bg);
    border-color: var(--ws-primary);
    box-shadow: 0 0 0 .2rem var(--ws-focus);
}

.form-control::placeholder {
    color: var(--ws-text-muted);
}

.btn {
    border-radius: var(--ws-radius);
    font-family: var(--ws-font-family);
    box-shadow: var(--ws-shadow-soft);
}

.btn-primary {
    --bs-btn-color: var(--ws-primary-text);
    --bs-btn-bg: var(--ws-primary);
    --bs-btn-border-color: var(--ws-primary);
    --bs-btn-hover-color: var(--ws-primary-text);
    --bs-btn-hover-bg: var(--ws-primary-hover);
    --bs-btn-hover-border-color: var(--ws-primary-hover);
    --bs-btn-active-color: var(--ws-primary-text);
    --bs-btn-active-bg: var(--ws-primary-hover);
    --bs-btn-active-border-color: var(--ws-primary-hover);
}

.btn-secondary,
.btn-outline-secondary {
    --bs-btn-color: var(--ws-text);
    --bs-btn-bg: var(--ws-control-bg);
    --bs-btn-border-color: var(--ws-border);
    --bs-btn-hover-color: var(--ws-text);
    --bs-btn-hover-bg: var(--ws-control-hover);
    --bs-btn-hover-border-color: var(--ws-border-strong);
    --bs-btn-active-color: var(--ws-text);
    --bs-btn-active-bg: var(--ws-control-active);
    --bs-btn-active-border-color: var(--ws-border-strong);
}

.nav-tabs {
    border-color: var(--ws-border);
}

.nav-tabs .nav-link {
    color: var(--ws-text-muted);
    border-radius: var(--ws-radius) var(--ws-radius) 0 0;
}

.nav-tabs .nav-link.active {
    color: var(--ws-text);
    background: var(--ws-surface);
    border-color: var(--ws-border) var(--ws-border) var(--ws-surface);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ws-text-muted);
    --bs-breadcrumb-item-active-color: var(--ws-text-muted);
}

.alert {
    border-radius: var(--ws-radius);
}

.progress {
    background: var(--ws-surface-3);
    border-radius: var(--ws-radius);
}

.pagination {
    --bs-pagination-color: var(--ws-link);
    --bs-pagination-bg: var(--ws-surface);
    --bs-pagination-border-color: var(--ws-border);
    --bs-pagination-hover-bg: var(--ws-control-hover);
    --bs-pagination-active-bg: var(--ws-primary);
    --bs-pagination-active-border-color: var(--ws-primary);
}

html[data-ws-theme^="classic98"] .btn,
html[data-ws-theme^="classic98"] .card,
html[data-ws-theme^="classic98"] .dropdown-menu,
html[data-ws-theme^="classic98"] .form-control,
html[data-ws-theme^="classic98"] .form-select {
    border: 0;
    border-radius: 0;
    box-shadow: var(--ws-shadow-soft);
}

html[data-ws-theme^="classic98"] .btn:active {
    box-shadow: var(--ws-inset-shadow);
    transform: translate(1px, 1px);
}

html[data-ws-theme^="classic98"] .form-control,
html[data-ws-theme^="classic98"] .form-select {
    box-shadow: var(--ws-inset-shadow);
}

html[data-ws-theme^="glass"] .card,
html[data-ws-theme^="glass"] .dropdown-menu,
html[data-ws-theme^="glass"] .offcanvas,
html[data-ws-theme^="glass"] .modal-content {
    backdrop-filter: var(--ws-backdrop-filter);
    -webkit-backdrop-filter: var(--ws-backdrop-filter);
}

html[data-ws-theme^="neumorphism"] .btn:active {
    box-shadow: var(--ws-inset-shadow);
}

html[data-ws-theme="retro-gamer"] .btn {
    border: 3px solid var(--ws-border);
    box-shadow: 3px 3px 0 #000;
    text-transform: uppercase;
}

html[data-ws-theme="retro-gamer"] .btn:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 #000;
}