/*
 * Chrome that Syncfusion's SfDialog renders around the Daily Brief feedback dialog.
 *
 * These elements (.e-dialog, .e-dlg-*, .e-footer-content and the footer SfButtons)
 * are created by the control itself and sit ABOVE the dialog component's markup in
 * the DOM, so no element carrying its CSS-isolation scope attribute is an
 * ancestor of them and ::deep can never reach them. Everything the dialog renders
 * itself is styled in DailyBriefFeedbackDialog.razor.css.
 *
 * Loaded after the Syncfusion theme and theme.css so these rules win the cascade.
 */

.daily-brief-feedback-dialog.e-dialog {
    background: var(--theme-surface-default-color);
    border: 1px solid color-mix(in srgb, var(--theme-surface-default-color) 92%, transparent) !important;
    border-radius: 24px;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--theme-border-muted-color) 95%, transparent),
        0 0 0 10px color-mix(in srgb, var(--theme-surface-default-color) 16%, transparent),
        0 24px 60px color-mix(in srgb, var(--theme-text-primary-color) 32%, transparent) !important;
    color: var(--theme-text-secondary-color);
    outline: 1px solid color-mix(in srgb, var(--theme-surface-default-color) 62%, transparent) !important;
    outline-offset: 7px !important;
    overflow: hidden;
}

.e-dlg-overlay {
    background: color-mix(in srgb, var(--theme-text-primary-color) 46%, transparent);
}

.daily-brief-feedback-dialog .e-dlg-header-content {
    border-bottom: 1px solid var(--theme-border-muted-color);
    padding: 28px 28px 14px;
}

.daily-brief-feedback-dialog .e-dlg-header {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: normal;
    padding-right: 48px;
    white-space: normal;
}

.daily-brief-feedback-dialog .e-dlg-closeicon-btn {
    align-items: center;
    background: var(--theme-surface-default-color);
    border: 1px solid var(--theme-border-default-color);
    border-radius: 8px;
    box-shadow: none;
    color: var(--theme-text-disabled-color);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    right: 28px;
    top: 28px;
    width: 32px;
}

.daily-brief-feedback-dialog .e-dlg-closeicon-btn:hover,
.daily-brief-feedback-dialog .e-dlg-closeicon-btn:focus {
    background: var(--theme-surface-subtle-color);
    border-color: var(--theme-text-disabled-color);
    color: var(--theme-text-secondary-color);
}

.daily-brief-feedback-dialog .e-dlg-content {
    color: var(--theme-text-secondary-color);
    padding: 24px 28px 18px;
}

.daily-brief-feedback-dialog .e-footer-content {
    border-top: 0;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 0 28px 28px;
}

.daily-brief-feedback-dialog__button.e-btn {
    align-items: center;
    background: var(--theme-surface-default-color);
    border: 1px solid var(--theme-border-default-color);
    border-radius: 5px;
    color: var(--theme-text-secondary-color);
    display: inline-flex;
    font-size: 18px;
    font-weight: 500;
    height: 44px;
    justify-content: center;
    min-width: 102px;
    padding: 0 18px;
}

.daily-brief-feedback-dialog__button.e-btn:not(:disabled):hover,
.daily-brief-feedback-dialog__button.e-btn:not(:disabled):focus {
    background: var(--theme-surface-subtle-color);
    border-color: var(--theme-text-disabled-color);
    color: var(--theme-text-primary-color);
}

/* The theme sets cursor: default on a disabled button. */
.daily-brief-feedback-dialog__button.e-btn:disabled {
    cursor: not-allowed;
}

/*
 * These rules use !important, so they also beat the theme's .e-btn.e-primary:disabled
 * rule, which does not. Excluding :disabled lets that theme rule through, and it already
 * resolves to our own muted surface and disabled text tokens via theme.css. The theme
 * also sets opacity: 1 on disabled buttons, so without this the button would stay fully
 * primary-coloured and only its cursor would change.
 */
.daily-brief-feedback-dialog__button--primary.e-btn.e-primary:not(:disabled),
.daily-brief-feedback-dialog__button--primary.e-btn.e-primary:not(:disabled):active,
.daily-brief-feedback-dialog__button--primary.e-btn.e-primary:not(:disabled):focus {
    background: var(--theme-action-primary-rest-color) !important;
    background-color: var(--theme-action-primary-rest-color) !important;
    border-color: var(--theme-action-primary-rest-color) !important;
    box-shadow: none !important;
    color: var(--theme-text-inverse-color) !important;
}

.daily-brief-feedback-dialog__button--primary.e-btn.e-primary:not(:disabled):hover {
    background: var(--theme-action-primary-emphasis-color) !important;
    background-color: var(--theme-action-primary-emphasis-color) !important;
    border-color: var(--theme-action-primary-emphasis-color) !important;
    color: var(--theme-text-inverse-color) !important;
}

.daily-brief-feedback-dialog__button--primary.e-btn.e-primary:focus-visible {
    box-shadow: none !important;
    outline: 2px solid var(--theme-focus-ring-color) !important;
    outline-offset: 2px !important;
}

@media (max-width: 620px) {
    .daily-brief-feedback-dialog .e-dlg-header-content {
        padding: 22px 20px 14px;
    }

    .daily-brief-feedback-dialog .e-dlg-content {
        padding: 20px 20px 16px;
    }

    .daily-brief-feedback-dialog .e-footer-content {
        padding: 0 20px 22px;
    }

    .daily-brief-feedback-dialog .e-dlg-closeicon-btn {
        right: 20px;
        top: 22px;
    }
}