/* Reusable centered modal layer with a blurred site backdrop. */

.modal-layer {
    position: fixed;
    z-index: var(--z-index-modal);
    display: grid;
    padding: var(--page-padding-inline);
    inset: 0;
    overflow-y: auto;
    background: var(--color-overlay-backdrop);
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    backdrop-filter: blur(var(--modal-backdrop-blur));
    place-items: center;
}

.modal-card {
    width: 100%;
    max-width: var(--modal-max-width);
    padding: var(--space-6);
    border: var(--card-border-width) solid var(--color-border-active);
    border-radius: var(--radius-modal);
    background: var(--color-background);
}

.modal-card__header {
    display: flex;
    min-height: var(--button-compact-height);
    margin-bottom: var(--space-3);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.modal-card__header .icon-button {
    --interactive-icon-image: var(--icon-image-close-circle);

    border-radius: var(--radius-pill);
    background: transparent;
}

.modal-card__header .icon-button:hover,
.modal-card__header .icon-button:focus-visible {
    color: var(--color-primary);
}

.modal-card__title {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-semibold);
}

.modal-card__options {
    display: grid;
    gap: var(--space-3);
}

.modal-service-button {
    display: flex;
    width: 100%;
    min-height: var(--button-min-height);
    padding: var(--space-4);
    align-items: center;
    gap: var(--space-4);
    border: var(--button-border-width) solid var(--color-border);
    border-radius: var(--button-border-radius);
    background: transparent;
    color: var(--color-secondary);
    cursor: pointer;
    text-align: left;
    transition:
        background-color var(--transition-interactive),
        border-color var(--transition-interactive),
        color var(--transition-interactive);
}

.modal-service-button:hover,
.modal-service-button:focus-visible,
.modal-service-button[aria-pressed="true"] {
    border-color: var(--color-border-active);
    background: var(--color-surface);
    color: var(--color-primary);
    outline: none;
}

.modal-service-button__icon {
    display: none;
}

.modal-service-button::before {
    width: var(--icon-size-md);
    height: var(--icon-size-md);
    flex: 0 0 auto;
    background: currentColor;
    content: "";
    -webkit-mask: var(--interactive-icon-image) center / contain no-repeat;
    mask: var(--interactive-icon-image) center / contain no-repeat;
}

.modal-service-button[data-streaming-modal-option="spotify"] {
    --interactive-icon-image: var(--icon-image-spotify);
}

.modal-service-button[data-streaming-modal-option="apple_music"] {
    --interactive-icon-image: var(--icon-image-apple-music);
}

.modal-service-button[data-streaming-modal-option="youtube_music"] {
    --interactive-icon-image: var(--icon-image-youtube-music);
}

.modal-service-button:disabled {
    cursor: not-allowed;
    opacity: var(--opacity-disabled);
}

.email-preference-form {
    display: grid;
    gap: var(--space-4);
}


@media (min-width: 64rem) {
    .modal-card__header {
        display: flex;
        min-height: var(--button-compact-height);
        margin-bottom: var(--space-3);
        align-items: center;
        justify-content: space-between;
        gap: var(--space-4);
    }
}