@use "../public/utility-mixins" as *;

:root {
    --dialog-scrim-color-hide: rgba(17, 24, 32, 0);
    --dialog-scrim-color-show: rgba(17, 24, 32, 0.7);
    --dialog-lightbox-max-width: 616px;
}

@mixin dialog-base() {
    background-color: var(--dialog-scrim-color-show);
    bottom: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
    position: fixed;
    right: 0;
    top: 0;
    will-change: background-color;
    z-index: 100000; /* because global header has an element with 99999 */

    &:not([hidden]) {
        display: flex;
    }
}

@mixin lightbox-dialog-base() {
    @include dialog-base();

    align-items: flex-start;
    justify-content: center;
}

@mixin dialog-window() {
    @include background-color-token(
        dialog-window-background-color,
        color-background-primary
    );

    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    min-height: 55px;
    will-change: opacity, transform;
}

@mixin lightbox-dialog-window() {
    @include dialog-window();
    @include border-radius-token(lightbox-border-radius, border-radius-150);

    margin: auto auto 16px;
    max-height: 90%;
    max-width: calc(100% - 32px);
    min-width: 208px;
}

@mixin lightbox-dialog-window-large() {
    margin: auto;
    @include border-radius-token(lightbox-border-radius, border-radius-100);
}

@mixin dialog-header-content($top-margin: var(--spacing-200)) {
    display: flex;
    /* Fix for Safari not honoring min-height */
    flex-shrink: 0;
    margin: $top-margin var(--spacing-200) 0;
    position: relative;

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        align-self: center;
        flex: 1 1 auto;
        margin: 0;
        overflow-wrap: anywhere;
    }

    & > :last-child:not(:only-child) {
        margin-inline-start: var(--spacing-200);
    }
}

@mixin dialog-body-content() {
    box-sizing: border-box;
    flex: 1 1 auto;
    padding: var(--spacing-200);
    position: relative;

    & > :first-child {
        margin-top: 0;
    }

    & > :last-child {
        margin-bottom: 0;
    }
}

@mixin dialog-footer-content() {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: var(--spacing-200);
    position: relative;

    & > :not(:first-child) {
        margin-top: var(--spacing-200);
    }
}

/* Unused, small and large are the same now */
@mixin dialog-header-content-large() {
    margin: var(--spacing-200) var(--spacing-200) 0;
}

/* Unused, small and large are the same now */
@mixin dialog-body-content-large() {
    margin: var(--spacing-200);
}

@mixin dialog-footer-content-large() {
    flex-direction: row;
    justify-content: flex-end;

    & > :not(:first-child) {
        margin-left: var(--spacing-100);
        margin-top: initial;
    }
}
