/* Business form panels can be switched between the existing drawer and a centered modal. */
html.ds-admin-modal-panels .ant-drawer:not([data-ds-preferences]) {
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    visibility: hidden;
    pointer-events: none;
}

html.ds-admin-modal-panels .ant-drawer:not([data-ds-preferences]).ant-drawer-open {
    visibility: visible;
    pointer-events: auto;
}

html.ds-admin-modal-panels
    .ant-drawer:not([data-ds-preferences])
    .ant-drawer-content-wrapper {
    position: absolute !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: min(760px, calc(100vw - 32px)) !important;
    height: min(86vh, 820px) !important;
    max-height: calc(100vh - 32px) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px)) !important;
    pointer-events: none;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility .2s ease !important;
}

html.ds-admin-modal-panels
    .ant-drawer:not([data-ds-preferences]).ant-drawer-open
    .ant-drawer-content-wrapper {
    opacity: 1;
    transform: translate(-50%, -50%) !important;
    pointer-events: auto;
}

html.ds-admin-modal-panels
    .ant-drawer:not([data-ds-preferences])
    .ant-drawer-content {
    border-radius: inherit !important;
    box-shadow: 0 18px 60px rgb(15 23 42 / 22%), 0 4px 16px rgb(15 23 42 / 10%) !important;
}

html.ds-admin-modal-panels
    .ant-drawer:not([data-ds-preferences])
    .ant-drawer-body {
    overflow: auto !important;
}

html.ds-admin-modal-panels
    .ant-drawer:not([data-ds-preferences])
    .ant-drawer-mask {
    background: rgb(15 23 42 / 42%) !important;
}

.ds-panel-mode-setting {
    margin: 0 16px 16px;
    padding: 14px 16px;
    border: 1px solid rgb(148 163 184 / 22%);
    border-radius: 10px;
    background: rgba(22, 119, 255, .06);
    background: color-mix(in srgb, var(--background, #fff) 94%, var(--primary, #1677ff));
}

.ds-panel-mode-setting__title {
    margin: 0;
    color: var(--foreground, rgb(15 23 42));
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
}

.ds-panel-mode-setting__hint {
    margin: 3px 0 11px;
    color: var(--muted-foreground, rgb(100 116 139));
    font-size: 12px;
    line-height: 18px;
}

.ds-panel-mode-setting__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.ds-panel-mode-setting__option {
    min-height: 36px;
    padding: 7px 11px;
    border: 1px solid rgb(148 163 184 / 34%);
    border-radius: 7px;
    background: transparent;
    color: var(--muted-foreground, rgb(71 85 105));
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease, box-shadow .16s ease;
}

.ds-panel-mode-setting__option:hover {
    border-color: var(--primary, #1677ff);
    color: var(--primary, #1677ff);
}

.ds-panel-mode-setting__option[aria-checked="true"] {
    border-color: var(--primary, #1677ff);
    background: rgba(22, 119, 255, .1);
    background: color-mix(in srgb, var(--primary, #1677ff) 10%, transparent);
    color: var(--primary, #1677ff);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary, #1677ff) 18%, transparent);
}

@media (max-width: 640px) {
    html.ds-admin-modal-panels
        .ant-drawer:not([data-ds-preferences])
        .ant-drawer-content-wrapper {
        width: calc(100vw - 20px) !important;
        height: min(90vh, 760px) !important;
        max-height: calc(100vh - 20px) !important;
    }

    .ds-panel-mode-setting {
        margin-right: 12px;
        margin-left: 12px;
    }
}