.theme-dark,
:root {
    --okd-empty-img-width: 100px;
    --okd-empty-img-height: 100px;
    --okd-empty-img-margin-bottom: 4px;
    --okd-empty-title-font-size: 16px;
    --okd-empty-title-light-height: 20px;
    --okd-empty-title-margin-bottom: 4px;
    --okd-empty-title-color: var(--okd-color-content-primary);
    --okd-empty-desc-font-size: 14px;
    --okd-empty-desc-light-height: 158%;
    --okd-empty-desc-margin-bottom: 20px;
    --okd-empty-desc-color: var(--okd-color-content-tertiary);
    --okd-empty-title-line-height: 20px;
    --okd-empty-desc-line-height: 20px;
    --okd-empty-title-font-weight: 500;
    --okd-empty-desc-font-weight: 400
}

:root {
    --okd-breadcrumbs-primary-current-font-color: var(--okd-color-content-secondary);
    --okd-breadcrumbs-primary-icon-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-secondary-current-font-color: var(--okd-color-content-secondary);
    --okd-breadcrumbs-secondary-icon-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-common-current-font-weight: 400;
    --okd-breadcrumbs-md-current-font-size: 16px;
    --okd-breadcrumbs-md-current-line-height: 24px;
    --okd-breadcrumbs-sm-current-font-size: 14px;
    --okd-breadcrumbs-sm-current-line-height: 24px;
    --okd-breadcrumbs-xs-current-font-size: 12px;
    --okd-breadcrumbs-xs-current-line-height: 24px;
    --okd-breadcrumbs-lg-current-font-size: 18px;
    --okd-breadcrumbs-lg-current-line-height: 24px;
    --okd-breadcrumbs-lg-icon-font-size: 18px;
    --okd-breadcrumbs-lg-icon-margin-left: 8px;
    --okd-breadcrumbs-lg-icon-margin-right: 8px;
    --okd-breadcrumbs-md-icon-font-size: 16px;
    --okd-breadcrumbs-md-icon-margin-left: 8px;
    --okd-breadcrumbs-md-icon-margin-right: 8px;
    --okd-breadcrumbs-sm-icon-font-size: 14px;
    --okd-breadcrumbs-sm-icon-margin-left: 8px;
    --okd-breadcrumbs-sm-icon-margin-right: 8px;
    --okd-breadcrumbs-xs-icon-font-size: 12px;
    --okd-breadcrumbs-xs-icon-margin-left: 8px;
    --okd-breadcrumbs-xs-icon-margin-right: 8px;
    --okd-breadcrumbs-reversed-current-font-color: hsla(0, 0%, 100%, .9);
    --okd-breadcrumbs-reversed-icon-color: hsla(0, 0%, 100%, .7);
    --okd-breadcrumbs-primary-default-font-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-secondary-default-font-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-reversed-default-font-color: hsla(0, 0%, 100%, .7);
    --okd-breadcrumbs-primary-default-font-weight: 400;
    --okd-breadcrumbs-secondary-default-font-weight: 400;
    --okd-breadcrumbs-reversed-default-font-weight: 400;
    --okd-breadcrumbs-primary-current-font-weight: 500;
    --okd-breadcrumbs-secondary-current-font-weight: 500;
    --okd-breadcrumbs-reversed-current-font-weight: 500;
    --okd-breadcrumbs-primary-hover-font-weight: 400;
    --okd-breadcrumbs-secondary-hover-font-weight: 400;
    --okd-breadcrumbs-reversed-hover-font-weight: 400
}

.theme-dark {
    --okd-breadcrumbs-primary-current-font-color: var(--okd-color-content-secondary);
    --okd-breadcrumbs-primary-icon-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-secondary-current-font-color: var(--okd-color-content-secondary);
    --okd-breadcrumbs-secondary-icon-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-common-current-font-weight: 400;
    --okd-breadcrumbs-md-current-font-size: 16px;
    --okd-breadcrumbs-md-current-line-height: 24px;
    --okd-breadcrumbs-sm-current-font-size: 14px;
    --okd-breadcrumbs-sm-current-line-height: 24px;
    --okd-breadcrumbs-xs-current-font-size: 12px;
    --okd-breadcrumbs-xs-current-line-height: 24px;
    --okd-breadcrumbs-lg-current-font-size: 18px;
    --okd-breadcrumbs-lg-current-line-height: 24px;
    --okd-breadcrumbs-lg-icon-font-size: 18px;
    --okd-breadcrumbs-lg-icon-margin-left: 8px;
    --okd-breadcrumbs-lg-icon-margin-right: 8px;
    --okd-breadcrumbs-md-icon-font-size: 16px;
    --okd-breadcrumbs-md-icon-margin-left: 8px;
    --okd-breadcrumbs-md-icon-margin-right: 8px;
    --okd-breadcrumbs-sm-icon-font-size: 14px;
    --okd-breadcrumbs-sm-icon-margin-left: 8px;
    --okd-breadcrumbs-sm-icon-margin-right: 8px;
    --okd-breadcrumbs-xs-icon-font-size: 12px;
    --okd-breadcrumbs-xs-icon-margin-left: 8px;
    --okd-breadcrumbs-xs-icon-margin-right: 8px;
    --okd-breadcrumbs-reversed-current-font-color: rgba(0, 0, 0, .9);
    --okd-breadcrumbs-reversed-icon-color: rgba(0, 0, 0, .7);
    --okd-breadcrumbs-primary-default-font-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-secondary-default-font-color: var(--okd-color-content-tertiary);
    --okd-breadcrumbs-reversed-default-font-color: rgba(0, 0, 0, .7);
    --okd-breadcrumbs-primary-default-font-weight: 400;
    --okd-breadcrumbs-secondary-default-font-weight: 400;
    --okd-breadcrumbs-reversed-default-font-weight: 400;
    --okd-breadcrumbs-primary-current-font-weight: 500;
    --okd-breadcrumbs-secondary-current-font-weight: 500;
    --okd-breadcrumbs-reversed-current-font-weight: 500;
    --okd-breadcrumbs-primary-hover-font-weight: 400;
    --okd-breadcrumbs-secondary-hover-font-weight: 400;
    --okd-breadcrumbs-reversed-hover-font-weight: 400
}

:root {
    --okd-hyperlink-primary-default-color: var(--okd-color-content-primary);
    --okd-hyperlink-primary-default-icon-color: var(--okd-color-content-primary);
    --okd-hyperlink-primary-default-underline-color: var(--okd-color-content-primary);
    --okd-hyperlink-primary-hover-color: var(--okd-color-content-secondary);
    --okd-hyperlink-primary-hover-icon-color: var(--okd-color-content-secondary);
    --okd-hyperlink-primary-hover-underline-color: var(--okd-color-content-secondary);
    --okd-hyperlink-secondary-default-color: var(--okd-color-content-primary);
    --okd-hyperlink-secondary-default-icon-color: var(--okd-color-content-primary);
    --okd-hyperlink-secondary-default-underline-color: var(--okd-color-content-primary);
    --okd-hyperlink-secondary-hover-color: var(--okd-color-content-secondary);
    --okd-hyperlink-secondary-hover-icon-color: var(--okd-color-content-secondary);
    --okd-hyperlink-secondary-hover-underline-color: var(--okd-color-content-secondary);
    --okd-hyperlink-xs-font-size: 12px;
    --okd-hyperlink-sm-font-size: 14px;
    --okd-hyperlink-md-font-size: 16px;
    --okd-hyperlink-lg-font-size: 18px;
    --okd-hyperlink-xs-icon-font-size: 12px;
    --okd-hyperlink-sm-icon-font-size: 16px;
    --okd-hyperlink-md-icon-font-size: 16px;
    --okd-hyperlink-lg-icon-font-size: 16px;
    --okd-hyperlink-xs-line-height: 16px;
    --okd-hyperlink-sm-line-height: 16px;
    --okd-hyperlink-md-line-height: 20px;
    --okd-hyperlink-lg-line-height: 24px;
    --okd-hyperlink-medium-font-weight: 500;
    --okd-hyperlink-medium-hover-font-weight: 500;
    --okd-hyperlink-muted-font-weight: 400;
    --okd-hyperlink-muted-hover-font-weight: 400;
    --okd-hyperlink-amplified-font-weight: 700;
    --okd-hyperlink-amplified-hover-font-weight: 700;
    --okd-hyperlink-xs-icon-margin-left: 0px;
    --okd-hyperlink-sm-icon-margin-left: 0px;
    --okd-hyperlink-md-icon-margin-left: 0px;
    --okd-hyperlink-lg-icon-margin-left: 0px;
    --okd-hyperlink-reversed-default-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-default-icon-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-default-underline-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-hover-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-hover-icon-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-hover-underline-color: var(--okd-color-content-inverse);
    --okd-hyperlink-accent-default-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-default-icon-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-default-underline-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-hover-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-hover-icon-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-hover-underline-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-reversed-disabled-color: var(--okd-color-content-disabled);
    --okd-hyperlink-accent-disabled-color: var(--okd-color-content-disabled);
    --okd-hyperlink-primary-disabled-color: var(--okd-color-content-disabled);
    --okd-color-link-accent-surface-pressed: #d2e8a4;
    --okd-color-link-accent-content-disabled: #d2e8a4
}

.theme-dark {
    --okd-hyperlink-primary-default-color: var(--okd-color-content-primary);
    --okd-hyperlink-primary-default-icon-color: var(--okd-color-content-primary);
    --okd-hyperlink-primary-default-underline-color: var(--okd-color-content-primary);
    --okd-hyperlink-primary-hover-color: var(--okd-color-content-secondary);
    --okd-hyperlink-primary-hover-icon-color: var(--okd-color-content-secondary);
    --okd-hyperlink-primary-hover-underline-color: var(--okd-color-content-secondary);
    --okd-hyperlink-secondary-default-color: var(--okd-color-content-primary);
    --okd-hyperlink-secondary-default-icon-color: var(--okd-color-content-primary);
    --okd-hyperlink-secondary-default-underline-color: var(--okd-color-content-primary);
    --okd-hyperlink-secondary-hover-color: var(--okd-color-content-secondary);
    --okd-hyperlink-secondary-hover-icon-color: var(--okd-color-content-secondary);
    --okd-hyperlink-secondary-hover-underline-color: var(--okd-color-content-secondary);
    --okd-hyperlink-xs-font-size: 12px;
    --okd-hyperlink-sm-font-size: 14px;
    --okd-hyperlink-md-font-size: 16px;
    --okd-hyperlink-lg-font-size: 18px;
    --okd-hyperlink-xs-icon-font-size: 12px;
    --okd-hyperlink-sm-icon-font-size: 16px;
    --okd-hyperlink-md-icon-font-size: 16px;
    --okd-hyperlink-lg-icon-font-size: 16px;
    --okd-hyperlink-xs-line-height: 16px;
    --okd-hyperlink-sm-line-height: 16px;
    --okd-hyperlink-md-line-height: 20px;
    --okd-hyperlink-lg-line-height: 24px;
    --okd-hyperlink-medium-font-weight: 500;
    --okd-hyperlink-medium-hover-font-weight: 500;
    --okd-hyperlink-muted-font-weight: 400;
    --okd-hyperlink-muted-hover-font-weight: 400;
    --okd-hyperlink-amplified-font-weight: 700;
    --okd-hyperlink-amplified-hover-font-weight: 700;
    --okd-hyperlink-xs-icon-margin-left: 0px;
    --okd-hyperlink-sm-icon-margin-left: 0px;
    --okd-hyperlink-md-icon-margin-left: 0px;
    --okd-hyperlink-lg-icon-margin-left: 0px;
    --okd-hyperlink-reversed-default-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-default-icon-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-default-underline-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-hover-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-hover-icon-color: var(--okd-color-content-inverse);
    --okd-hyperlink-reversed-hover-underline-color: var(--okd-color-content-inverse);
    --okd-hyperlink-accent-default-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-default-icon-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-default-underline-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-hover-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-hover-icon-color: var(--okd-color-link-accent-content-primary);
    --okd-hyperlink-accent-hover-underline-color: var(--okd-color-link-accent-content-primary);
    --okd-color-link-accent-surface-pressed: #1a410e;
    --okd-color-link-accent-content-disabled: #3d5c00
}

:root {
    --okd-overflowscroll-icon-color: #929292;
    --okd-overflowscroll-icon-hover-color: #3d3d3d;
    --okd-overflowscroll-icon-bg-start-color: #fff;
    --okd-overflowscroll-icon-bg-end-color: hsla(0, 0%, 100%, 0);
    --okd-overflowscroll-reversed-icon-color: #929292;
    --okd-overflowscroll-reversed-icon-hover-color: #e4e2e2;
    --okd-overflowscroll-reversed-icon-bg-start-color: var(--okd-color-neutral-200);
    --okd-overflowscroll-reversed-icon-bg-end-color: var(--okd-color-transparent-black)
}

.theme-dark {
    --okd-overflowscroll-icon-color: var(--okd-color-gray-400);
    --okd-overflowscroll-icon-hover-color: #3d3d3d;
    --okd-overflowscroll-icon-bg-start-color: var(--okd-color-background-base-primary);
    --okd-overflowscroll-icon-bg-end-color: var(--okd-color-transparent-white);
    --okd-overflowscroll-reversed-icon-color: #929292;
    --okd-overflowscroll-reversed-icon-hover-color: #e4e2e2;
    --okd-overflowscroll-reversed-icon-bg-start-color: var(--okd-color-neutral-5);
    --okd-overflowscroll-reversed-icon-bg-end-color: var(--okd-color-transparent-white)
}

:root {
    --okd-dialog-window-background: var(--okd-color-modal-primary);
    --okd-dialog-window-mask-color: var(--okd-color-background-scrim);
    --okd-dialog-window-box-shadow: var(--okd-shadow-xl);
    --okd-dialog-window-default-text-color: var(--okd-color-content-primary);
    --okd-dialog-window-border-radius: 8px;
    --okd-dialog-window-close-btn-color: var(--okd-color-content-contrast);
    --okd-dialog-window-close-size: 32px;
    --okd-dialog-window-split-line-border-color: var(--okd-color-border-primary);
    --okd-dialog-tip-window-min-width: 344px;
    --okd-dialog-tip-window-2btn-min-width: 448px;
    --okd-dialog-title-color: var(--okd-color-content-primary);
    --okd-dialog-title-font-size: 16px;
    --okd-dialog-title-line-height: 20px;
    --okd-dialog-title-box-sm-padding-vertical: 14px;
    --okd-dialog-title-box-md-padding-vertical: 12px;
    --okd-dialog-sub-title-color: var(--okd-color-content-contrast);
    --okd-dialog-sub-title-font-size: 14px;
    --okd-dialog-sub-title-line-height: 16px;
    --okd-dialog-tip-title-color: var(--okd-color-gray-900);
    --okd-dialog-tip-title-font-size: 18px;
    --okd-dialog-tip-title-line-height: 24px;
    --okd-dialog-tip-detail-color: var(--okd-color-gray-700);
    --okd-dialog-tip-detail-font-size: 14px;
    --okd-dialog-tip-detail-line-height: 20px;
    --okd-dialog-tip-success-icon-bg: var(--okd-color-semantic-positive);
    --okd-dialog-tip-info-icon-bg: var(--okd-color-semantic-neutral);
    --okd-dialog-tip-prompt-icon-bg: rgba(241, 101, 20, .2);
    --okd-dialog-tip-warn-icon-bg: var(--okd-color-semantic-notice);
    --okd-dialog-tip-alert-icon-bg: rgba(241, 80, 123, .2);
    --okd-dialog-tip-error-icon-bg: var(--okd-color-semantic-negative);
    --okd-dialog-tip-success-icon-color: var(--okd-color-semantic-positive);
    --okd-dialog-tip-info-icon-color: var(--okd-color-semantic-neutral);
    --okd-dialog-tip-prompt-icon-color: var(--okd-color-orange-700);
    --okd-dialog-tip-warn-icon-color: var(--okd-color-semantic-notice);
    --okd-dialog-tip-alert-icon-color: var(--okd-color-fq-red-lv1);
    --okd-dialog-tip-error-icon-color: var(--okd-color-semantic-negative);
    --okd-dialog-tip-icon-bg-size: 48px;
    --okd-dialog-tip-icon-font-size: 48px;
    --okd-dialog-action-close-btn-color: var(--okd-color-blue-700);
    --okd-dialog-footer-box-sm-padding-vertical: 20px;
    --okd-dialog-footer-box-md-padding-vertical: 12px;
    --okd-dialog-tip-footer-box-sm-padding-vertical: 16px;
    --okd-dialog-tip-footer-box-md-padding-vertical: 24px;
    --okd-dialog-container-sm-padding-horizontal: 16px;
    --okd-dialog-container-md-padding-horizontal: 24px;
    --okd-dialog-container-md-padding-vertical: 24px;
    --okd-dialog-container-sm-padding-vertical: 16px;
    --okd-dialog-window-close-icon-size: 24px;
    --okd-dialog-window-back-icon-size: 24px;
    --okd-dialog-tip-container-md-padding-top: 28px;
    --okd-dialog-tip-container-md-padding-bottom: 24px;
    --okd-dialog-tip-container-sm-padding-top: 20px;
    --okd-dialog-tip-container-sm-padding-bottom: 24px;
    --okd-dialog-window-action-padding: 16px;
    --okd-dialog-footer-action-cancel-type: secondary;
    --okd-dialog-footer-action-confirm-type: highlight;
    --okd-dialog-footer-action-cancel-size: sm;
    --okd-dialog-footer-action-confirm-size: sm;
    --okd-dialog-window-sm-border-radius: 12px;
    --okd-dialog-title-font-weight: 700;
    --okd-dialog-footer-btn-full-sm-margin-top: 8px;
    --okd-dialog-footer-btn-md-margin-left: 12px;
    --okd-dialog-footer-btn-sm-margin-left: 12px;
    --okd-dialog-confirm-footer-sm-button-border-color: var(--okd-color-border-primary);
    --okd-dialog-confirm-footer-padding-top: 0;
    --okd-dialog-confirm-footer-padding-bottom: 24px;
    --okd-dialog-confirm-title-padding-top: 24px;
    --okd-dialog-confirm-no-title-padding-top: 24px;
    --okd-dialog-confirm-title-padding-bottom: 0px;
    --okd-dialog-confirm-max-width: 520px;
    --okd-dialog-confirm-min-width: 280px;
    --okd-dialog-confirm-container-color: var(--okd-color-content-secondary);
    --okd-dialog-confirm-container-line-height: 20px;
    --okd-dialog-confirm-container-font-size: 14px;
    --okd-dialog-confirm-container-sm-padding-bottom: 24px;
    --okd-dialog-confirm-icon-font-size: 22px;
    --okd-dialog-confirm-icon-margin-right: 10px;
    --okd-dialog-confirm-icon-line-height: 22px;
    --okd-dialog-title-icon-close-color: var(--okd-color-content-contrast);
    --okd-dialog-title-icon-back-color: var(--okd-color-content-primary);
    --okd-dialog-title-icon-close-hover-color: var(--okd-color-content-primary);
    --okd-dialog-title-icon-hover-background-color: hsla(0, 0%, 95%, 0);
    --okd-dialog-title-icon-hover-border-radius: 4px;
    --okd-dialog-title-icon-close-margin-left: 32px;
    --okd-dialog-title-icon-back-margin-right: 8px;
    --okd-dialog-window-back-btn-color: var(--okd-color-container-inverse);
    --okd-dialog-window-back-btn-margin-right: 12px;
    --okd-dialog-window-close-btn-margin-left: 12px;
    --okd-dialog-confirm-container-sm-padding-top: 8px;
    --okd-dialog-confirm-container-sm-padding-horizontal: 24px;
    --okd-dialog-confirm-title-padding-horizontal: 24px;
    --okd-dialog-footer-box-sm-padding-top: 12px;
    --okd-dialog-footer-box-sm-padding-bottom: 20px;
    --okd-dialog-confirmation-header-padding-top: 24px;
    --okd-dialog-confirmation-footer-padding-bottom: 24px;
    --okd-dialog-confirmation-padding-left: 24px;
    --okd-dialog-confirmation-padding-right: 24px;
    --okd-dialog-confirmation-container-padding-top: 32px;
    --okd-dialog-confirmation-container-padding-bottom: 32px;
    --okd-dialog-confirm-footer-sm-button-color: var(--okd-color-content-primary);
    --okd-dialog-window-min-width: 392px;
    --okd-dialog-confirm-container-padding-top: 32px;
    --okd-dialog-confirm-container-padding-bottom: 32px;
    --okd-dialog-confirm-window-background: var(--okd-color-modal-tertiary);
    --okd-dialog-confirmation-window-background: var(--okd-color-modal-primary);
    --okd-dialog-window-border-color: var(--okd-color-border-primary)
}

.theme-dark {
    --okd-dialog-window-background: var(--okd-color-modal-primary);
    --okd-dialog-window-close-btn-color: var(--okd-color-content-contrast);
    --okd-dialog-window-split-line-border-color: var(--okd-color-border-primary);
    --okd-dialog-title-color: var(--okd-color-content-primary);
    --okd-dialog-sub-title-color: var(--okd-color-content-contrast);
    --okd-dialog-window-mask-color: var(--okd-color-background-scrim);
    --okd-dialog-window-default-text-color: var(--okd-color-content-primary);
    --okd-dialog-window-box-shadow: 0px 0px 0px 0px #2e2e2e, 0px 13px 20px -15px #000;
    --okd-dialog-tip-title-color: var(--okd-color-gray-900);
    --okd-dialog-tip-detail-color: var(--okd-color-gray-700);
    --okd-dialog-tip-success-icon-bg: var(--okd-color-semantic-positive);
    --okd-dialog-tip-info-icon-bg: var(--okd-color-semantic-neutral);
    --okd-dialog-tip-prompt-icon-bg: var(--okd-color-orange-100);
    --okd-dialog-tip-warn-icon-bg: var(--okd-color-semantic-notice);
    --okd-dialog-tip-alert-icon-bg: var(--okd-color-red-100);
    --okd-dialog-tip-error-icon-bg: var(--okd-color-semantic-negative);
    --okd-dialog-tip-success-icon-color: var(--okd-color-semantic-positive);
    --okd-dialog-tip-info-icon-color: var(--okd-color-semantic-neutral);
    --okd-dialog-tip-prompt-icon-color: var(--okd-color-orange-800);
    --okd-dialog-tip-warn-icon-color: var(--okd-color-semantic-notice);
    --okd-dialog-tip-alert-icon-color: var(--okd-color-fq-critical);
    --okd-dialog-tip-error-icon-color: var(--okd-color-semantic-negative);
    --okd-dialog-tip-icon-bg-size: 48px;
    --okd-dialog-tip-icon-font-size: 48px;
    --okd-dialog-tip-title-font-size: 18px;
    --okd-dialog-tip-title-line-height: 24px;
    --okd-dialog-tip-detail-font-size: 14px;
    --okd-dialog-tip-detail-line-height: 20px;
    --okd-dialog-action-close-btn-color: var(--okd-color-blue-700);
    --okd-dialog-window-border-radius: 8px;
    --okd-dialog-title-font-size: 16px;
    --okd-dialog-title-line-height: 20px;
    --okd-dialog-sub-title-font-size: var(--okd-font-size-md);
    --okd-dialog-sub-title-line-height: 16px;
    --okd-dialog-window-close-size: 32px;
    --okd-dialog-container-sm-padding-horizontal: 16px;
    --okd-dialog-title-box-sm-padding-vertical: 14px;
    --okd-dialog-container-sm-padding-vertical: 16px;
    --okd-dialog-footer-box-sm-padding-vertical: 12px;
    --okd-dialog-container-md-padding-horizontal: 24px;
    --okd-dialog-title-box-md-padding-vertical: 12px;
    --okd-dialog-container-md-padding-vertical: 24px;
    --okd-dialog-footer-box-md-padding-vertical: 12px;
    --okd-dialog-tip-window-min-width: 344px;
    --okd-dialog-tip-window-2btn-min-width: 448px;
    --okd-dialog-tip-footer-box-sm-padding-vertical: 16px;
    --okd-dialog-tip-footer-box-md-padding-vertical: 24px;
    --okd-dialog-window-close-icon-size: 24px;
    --okd-dialog-window-back-icon-size: 24px;
    --okd-dialog-tip-container-md-padding-top: 28px;
    --okd-dialog-tip-container-md-padding-bottom: 24px;
    --okd-dialog-tip-container-sm-padding-top: 20px;
    --okd-dialog-tip-container-sm-padding-bottom: 24px;
    --okd-dialog-window-action-padding: 16px;
    --okd-dialog-footer-action-cancel-type: primary;
    --okd-dialog-footer-action-cancel-size: sm;
    --okd-dialog-footer-action-confirm-type: highlight;
    --okd-dialog-footer-action-confirm-size: sm;
    --okd-dialog-window-sm-border-radius: 12px;
    --okd-dialog-title-font-weight: 700;
    --okd-dialog-footer-btn-full-sm-margin-top: 8px;
    --okd-dialog-footer-btn-md-margin-left: 12px;
    --okd-dialog-footer-btn-sm-margin-left: 12px;
    --okd-dialog-confirm-footer-sm-button-border-color: var(--okd-color-border-secondary);
    --okd-dialog-confirm-footer-padding-top: 0;
    --okd-dialog-confirm-footer-padding-bottom: 24px;
    --okd-dialog-confirm-title-padding-top: 24px;
    --okd-dialog-confirm-no-title-padding-top: 24px;
    --okd-dialog-confirm-title-padding-bottom: 0;
    --okd-dialog-confirm-max-width: 520px;
    --okd-dialog-confirm-min-width: 280px;
    --okd-dialog-confirm-container-color: var(--okd-color-content-secondary);
    --okd-dialog-confirm-container-line-height: 20px;
    --okd-dialog-confirm-container-font-size: 14px;
    --okd-dialog-confirm-container-sm-padding-bottom: 24px;
    --okd-dialog-confirm-icon-font-size: 22px;
    --okd-dialog-confirm-icon-margin-right: 10px;
    --okd-dialog-confirm-icon-line-height: 22px;
    --okd-dialog-title-icon-close-color: var(--okd-color-content-contrast);
    --okd-dialog-title-icon-back-color: var(--okd-color-content-primary);
    --okd-dialog-title-icon-close-hover-color: var(--okd-color-content-primary);
    --okd-dialog-title-icon-hover-background-color: rgba(29, 29, 29, 0);
    --okd-dialog-title-icon-hover-border-radius: 4px;
    --okd-dialog-title-icon-close-margin-left: 32px;
    --okd-dialog-title-icon-back-margin-right: 8px;
    --okd-dialog-confirm-container-sm-padding-top: 8px;
    --okd-dialog-confirm-container-sm-padding-horizontal: 24px;
    --okd-dialog-confirm-title-padding-horizontal: 24px;
    --okd-dialog-footer-box-sm-padding-top: 12px;
    --okd-dialog-footer-box-sm-padding-bottom: 20px;
    --okd-dialog-confirmation-header-padding-top: 24px;
    --okd-dialog-confirmation-footer-padding-bottom: 24px;
    --okd-dialog-confirmation-padding-left: 24px;
    --okd-dialog-confirmation-padding-right: 24px;
    --okd-dialog-confirmation-container-padding-top: 32px;
    --okd-dialog-confirmation-container-padding-bottom: 32px;
    --okd-dialog-confirm-footer-sm-button-color: var(--okd-color-content-primary);
    --okd-dialog-window-min-width: 392px;
    --okd-dialog-window-back-btn-color: var(--okd-color-container-inverse);
    --okd-dialog-confirm-container-padding-top: 32px;
    --okd-dialog-confirm-container-padding-bottom: 32px;
    --okd-dialog-confirm-window-background: var(--okd-color-modal-tertiary);
    --okd-dialog-confirmation-window-background: var(--okd-color-modal-primary);
    --okd-dialog-window-border-color: var(--okd-color-border-primary)
}

:root {
    --okd-notification-success-icon-color: var(--okd-color-semantic-positive);
    --okd-notification-info-icon-color: var(--okd-color-content-primary);
    --okd-notification-warn-icon-color: var(--okd-color-semantic-notice);
    --okd-notification-error-icon-color: var(--okd-color-semantic-negative);
    --okd-notification-title-color: var(--okd-color-content-primary);
    --okd-notification-text-color: var(--okd-color-content-secondary);
    --okd-notification-action-confirm-btn-color: var(--okd-color-content-primary);
    --okd-notification-action-cancel-btn-color: var(--okd-color-content-primary);
    --okd-notification-box-close-icon-color: var(--okd-color-content-contrast);
    --okd-notification-box-shadow: var(--okd-shadow-xl);
    --okd-notification-box-background: var(--okd-color-modal-tertiary);
    --okd-notification-box-border-color: var(--okd-color-border-primary);
    --okd-notification-box-border-radius: var(--okd-border-radius-md);
    --okd-notification-box-padding: 16px;
    --okd-notification-box-each-margin: 14px;
    --okd-notification-box-max-width: 700px;
    --okd-notification-box-min-width: 451px;
    --okd-notification-box-auto-width-min-width: 100px;
    --okd-notification-box-icon-text-margin: 15px;
    --okd-notification-title-font-size: var(--okd-font-size-md);
    --okd-notification-title-line-height: var(--okd-line-height-md);
    --okd-notification-text-font-size: var(--okd-font-size-md);
    --okd-notification-text-line-height: var(--okd-line-height-md);
    --okd-notification-action-font-size: var(--okd-font-size-md);
    --okd-notification-action-line-height: var(--okd-line-height-md);
    --okd-notification-pending-icon-color: var(--okd-color-content-primary)
}

.theme-dark {
    --okd-notification-success-icon-color: var(--okd-color-semantic-positive);
    --okd-notification-info-icon-color: var(--okd-color-content-primary);
    --okd-notification-warn-icon-color: var(--okd-color-semantic-notice);
    --okd-notification-error-icon-color: var(--okd-color-semantic-negative);
    --okd-notification-title-color: var(--okd-color-content-primary);
    --okd-notification-text-color: var(--okd-color-content-secondary);
    --okd-notification-action-confirm-btn-color: var(--okd-color-content-primary);
    --okd-notification-action-cancel-btn-color: var(--okd-color-content-primary);
    --okd-notification-box-close-icon-color: var(--okd-color-content-contrast);
    --okd-notification-box-shadow: var(--okd-shadow-xl);
    --okd-notification-box-background: var(--okd-color-modal-tertiary);
    --okd-notification-box-border-color: var(--okd-color-border-secondary);
    --okd-notification-box-border-radius: var(--okd-border-radius-md);
    --okd-notification-box-padding: 16px;
    --okd-notification-box-each-margin: 14px;
    --okd-notification-box-max-width: 700px;
    --okd-notification-box-min-width: 451px;
    --okd-notification-box-auto-width-min-width: 100px;
    --okd-notification-box-icon-text-margin: 15px;
    --okd-notification-title-font-size: var(--okd-font-size-md);
    --okd-notification-title-line-height: var(--okd-line-height-md);
    --okd-notification-text-font-size: var(--okd-font-size-md);
    --okd-notification-text-line-height: var(--okd-line-height-md);
    --okd-notification-action-font-size: var(--okd-font-size-md);
    --okd-notification-action-line-height: var(--okd-line-height-md);
    --okd-notification-pending-icon-color: var(--okd-color-content-primary)
}

:root {
    --okd-imageviewer-mask-color: var(--okd-color-content-inverse);
    --okd-imageviewer-mask-font-size: 14px;
    --okd-imageviewer-mask-font-weight: 500;
    --okd-imageviewer-mask-eye-font-size: 16px;
    --okd-imageviewer-mask-eye-margin-right: 8px;
    --okd-imageviewer-preview-close-btn-width: 40px;
    --okd-imageviewer-preview-close-btn-height: 40px;
    --okd-imageviewer-preview-close-btn-top: 16px;
    --okd-imageviewer-preview-close-btn-right: 16px;
    --okd-imageviewer-preview-close-btn-color: var(--okd-color-content-inverse);
    --okd-imageviewer-preview-close-btn-background-color: hsla(0, 0%, 5%, .2);
    --okd-imageviewer-preview-close-btn-icon-font-size: 24px;
    --okd-imageviewer-preview-toolbar-bottom: 24px;
    --okd-imageviewer-preview-toolbar-margin-left: 24px;
    --okd-imageviewer-preview-toolbar-height: 48px;
    --okd-imageviewer-preview-toolbar-padding-horizontal: 24px;
    --okd-imageviewer-preview-toolbar-border-radius: 24px;
    --okd-imageviewer-preview-toolbar-background-color: hsla(0, 0%, 5%, .2);
    --okd-imageviewer-preview-toolbar-color: var(--okd-color-content-inverse);
    --okd-imageviewer-preview-toolbar-disabled-color: var(--okd-color-content-disabled);
    --okd-imageviewer-preview-toolbar-icon-font-size: 24px
}

.theme-dark {
    --okd-imageviewer-mask-color: var(--okd-color-content-inverse);
    --okd-imageviewer-mask-font-size: 14px;
    --okd-imageviewer-mask-font-weight: 500;
    --okd-imageviewer-mask-eye-font-size: 16px;
    --okd-imageviewer-mask-eye-margin-right: 8px;
    --okd-imageviewer-preview-close-btn-width: 40px;
    --okd-imageviewer-preview-close-btn-height: 40px;
    --okd-imageviewer-preview-close-btn-top: 16px;
    --okd-imageviewer-preview-close-btn-right: 16px;
    --okd-imageviewer-preview-close-btn-color: var(--okd-color-content-inverse);
    --okd-imageviewer-preview-close-btn-background-color: hsla(0, 0%, 98%, .2);
    --okd-imageviewer-preview-close-btn-icon-font-size: 24px;
    --okd-imageviewer-preview-toolbar-bottom: 24px;
    --okd-imageviewer-preview-toolbar-margin-left: 24px;
    --okd-imageviewer-preview-toolbar-height: 48px;
    --okd-imageviewer-preview-toolbar-padding-horizontal: 24px;
    --okd-imageviewer-preview-toolbar-border-radius: 24px;
    --okd-imageviewer-preview-toolbar-background-color: hsla(0, 0%, 98%, .2);
    --okd-imageviewer-preview-toolbar-color: var(--okd-color-content-inverse);
    --okd-imageviewer-preview-toolbar-disabled-color: var(--okd-color-content-disabled);
    --okd-imageviewer-preview-toolbar-icon-font-size: 24px
}