@import "../variables/variables";
@import "../mixins/private/dialog-mixins";
@import "../mixins/public/typography-mixins";
@import "../mixins/private/token-mixins";

.confirm-dialog[role="dialog"] {
    @include lightbox-dialog-base();
}

.confirm-dialog__window {
    @include lightbox-dialog-window();

    margin-left: var(--spacing-200);
    margin-right: var(--spacing-200);
    padding: var(--spacing-200);
}

.confirm-dialog__title {
    @include typography-large-1();

    margin: 0;
}

.confirm-dialog__main {
    margin: var(--spacing-200) 0;
    min-height: var(--spacing-200);

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

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

.confirm-dialog__footer {
    text-align: right;
}

a.confirm-dialog__confirm,
button.confirm-dialog__confirm {
    margin-left: var(--spacing-100);
}

.confirm-dialog--show,
.confirm-dialog--hide {
    &.confirm-dialog--mask-fade {
        transition: background-color 0.16s ease-out;
    }

    &.confirm-dialog--mask-fade-slow {
        transition: background-color 0.32s ease-out;
    }

    .confirm-dialog__window--fade {
        transition: opacity 0.16s ease-out;
    }
}

.confirm-dialog--hide,
.confirm-dialog--show-init {
    &.confirm-dialog--hide,
    &.confirm-dialog--show-init {
        display: flex;
    }

    &.confirm-dialog--mask-fade,
    &.confirm-dialog--mask-fade-slow {
        background-color: var(--dialog-scrim-color-hide);
    }

    .confirm-dialog__window--fade {
        opacity: 0;
    }
}

.confirm-dialog--show,
.confirm-dialog--hide-init {
    &.confirm-dialog--show,
    &.confirm-dialog--hide-init {
        display: flex;
    }

    &.confirm-dialog--mask-fade,
    &.confirm-dialog--mask-fade-slow {
        background-color: var(--dialog-scrim-color-show);
    }

    .confirm-dialog__window--fade {
        opacity: 1;
    }
}

@media (min-width: $_screen-size-MD) {
    .confirm-dialog__window {
        @include lightbox-dialog-window-large();

        max-width: calc(88% - var(--spacing-400));
    }
}

@media (min-width: $_screen-size-LG) {
    .confirm-dialog__window {
        max-width: var(--dialog-lightbox-max-width);
    }
}
