/* Explicit light/dark/system presentation. The runtime resolves "system" to
   a concrete data-mosvpn-theme value before the compiled Umi bundles run. */

.mosvpn-shell-theme {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    position: relative;
}

.mosvpn-shell-theme__icon {
    color: var(--mos-color-text-subtle);
    left: var(--mos-space-3);
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.mosvpn-shell-theme select {
    background: var(--mos-color-surface) !important;
    border: var(--mos-border-width) solid var(--mos-color-border) !important;
    border-radius: var(--mos-radius-control) !important;
    color: var(--mos-color-text) !important;
    font-size: var(--mos-font-size-small);
    height: var(--mos-control-height-sm);
    padding-left: var(--mos-space-8);
    width: var(--mos-theme-control-width);
}

.mosvpn-shell-legacy-theme {
    display: none !important;
}

html[data-mosvpn-theme="dark"] body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active,
html[data-mosvpn-theme="dark"] body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active) #sidebar .nav-main-link.active .nav-main-link-icon {
    background: var(--mos-color-red-50) !important;
    color: var(--mos-color-red-300) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active),
html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) #page-container,
html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) #main-container,
html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) #main-container > div {
    background: var(--mos-color-bg) !important;
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) :where(
    .block,
    .block-content,
    .card,
    .ant-card,
    .ant-card-body,
    .ant-table,
    .ant-table-container,
    .ant-table-fixed,
    table,
    .dropdown-menu,
    .modal-content,
    .ant-modal-content
) {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) :where(
    .block-header,
    .block-header-default,
    .ant-card-head,
    .ant-table-thead > tr > th,
    .bg-white,
    .bg-gray-lighter
) {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) :where(
    .form-control,
    .custom-select,
    .ant-input,
    .ant-select-selection,
    .ant-input-number,
    .ant-picker
) {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) :where(.text-dark, .text-black, .block-title, h1, h2, h3, h4, h5, h6) {
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) :where(.text-muted, .ant-table, .ant-empty-description) {
    color: var(--mos-color-text-muted) !important;
}

html[data-mosvpn-theme="dark"] body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active)
    .block-header.plan + .block-content > .py-2 > .h1,
html.mosvpn-dark body.mosvpn-shell.mosvpn-client:not(.mosvpn-auth-active)
    .block-header.plan + .block-content > .py-2 > .h1 {
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell:not(.mosvpn-auth-active) :where(.border, .border-top, .border-right, .border-bottom, .border-left) {
    border-color: var(--mos-color-border) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(
    .mosvpn-operation-card,
    .mosvpn-global-devices,
    .mosvpn-user-finder,
    .mosvpn-account-workspace,
    .mosvpn-subscription-card,
    .mosvpn-devices-panel,
    .mosvpn-user-result,
    .mosvpn-modal,
    .mosvpn-confirm,
    .mosvpn-toast,
    .mosvpn-order-table-wrap,
    .mosvpn-device-table-wrap,
    .mosvpn-global-device-table-wrap,
    .mosvpn-renew-summary,
    .mosvpn-qr-code
) {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(
    .mosvpn-subscription-metrics,
    .mosvpn-global-filters,
    .mosvpn-search-box,
    .mosvpn-device-empty,
    .mosvpn-device-toggle-row,
    code
) {
    background: var(--mos-color-surface-muted) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text-muted) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(
    .mosvpn-metric-icon,
    .mosvpn-panel-icon,
    .mosvpn-subscription-icon
) {
    background: var(--mos-color-surface-muted) !important;
    border-color: var(--mos-color-border) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center .mosvpn-progress {
    background: var(--mos-color-border) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(h1, h2, h3, h4, strong) {
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(p, small, label) {
    color: var(--mos-color-text-muted) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(th) {
    background: var(--mos-color-surface-muted) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text-muted) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(td) {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text-muted) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(
    .mosvpn-field input,
    .mosvpn-field select,
    .mosvpn-global-filter input
) {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
    color: var(--mos-color-text) !important;
}

html[data-mosvpn-theme] body.mosvpn-shell .mosvpn-control-center :where(
    .mosvpn-modal > header,
    .mosvpn-modal form > footer,
    .mosvpn-modal-footer
) {
    background: var(--mos-color-surface) !important;
    border-color: var(--mos-color-border) !important;
}

@media (max-width: 575.98px) {
    .mosvpn-shell-theme__icon {
        left: 50%;
        transform: translateX(-50%);
    }

    .mosvpn-shell-theme select {
        appearance: none;
        font-size: 0;
        padding: 0;
        width: var(--mos-control-height-sm);
    }

    .mosvpn-shell-theme select option {
        color: var(--mos-color-text);
        font-size: var(--mos-font-size-small);
    }
}