// @import "../core/core";

@mixin dc-dialog {
    align-items: center;
    justify-content: center;
    padding: $dc-space100;
    transform: rotateX(0deg) translateY(0) translateZ(0);
    transition: transform 2s cubic-bezier(.25, .46, .45, .94), opacity .2s cubic-bezier(.39, .58, .57, 1);
    box-shadow: 0 5px 10px rgba($dc-black, .2);
    overflow: auto;
    z-index: 10000;
}

@mixin dc-dialog__content {
    margin: $dc-space150;
}

@mixin dc-dialog__body {
    max-height: calc(70vh);
    padding: $dc-space150 $dc-space150 $dc-space100;
    background: $dc-white;
    overflow: auto;
}

@mixin dc-dialog__close {
    margin-top: -1.6rem;
    margin-right: -1rem;
    float: right;

    &:active {
        transform: scale(.85);
    }
}

@mixin dc-dialog__close__icon {
    color: $dc-gray30;
    font-size: 1.2rem;
}

@mixin dc-dialog__actions {
    display: flex;
    justify-content: flex-end;
    padding: $dc-space150;
    border-top: 1px solid $dc-gray70;
    border-radius: 0 0 $dc-radius100 $dc-radius100;
    background: $dc-gray80;
}

@mixin dc-dialog__actions__link {
    // Ensure links align and space to buttons correctly;
    display: block;
    margin: 0 $dc-space100;
    padding: $dc-space75 0;
}

@mixin dc-dialog__title {
    @include dc-h3;
    display: inline-block;
    margin: 0 0 $dc-space50;
    color: $dc-gray10;
    font-size: 2.2rem;
    font-weight: 300;
}

@mixin dc-dialog__subtitle {
    @include dc-h4;
    display: inline-block;
    margin: 0 0 $dc-space50;
    color: $dc-gray50;
    font-size: 1.4rem;
    font-weight: 300;
}

@mixin dc-dialog-selectors {
    .dc-dialog {
        @include dc-dialog;
    }

    .dc-dialog__content {
        @include dc-dialog__content;
    }

    .dc-dialog__body {
        @include dc-dialog__body;
    }

    .dc-dialog__actions {
        @include dc-dialog__actions;
    }

    .dc-dialog__actions__link {
        @include dc-dialog__actions__link;
    }

    .dc-dialog__close {
        @include dc-dialog__close;
    }

    .dc-dialog__close__icon {
        @include dc-dialog__close__icon;
    }

    .dc-dialog__title {
        @include dc-dialog__title;
    }

    .dc-dialog__subtitle {
        @include dc-dialog__subtitle;
    }

    .dc-dialog__actions {
        @include dc-dialog__actions;
    }
}