@require '../../../node_modules/@informatica/archipelago-icons/dist/archipelago_icons.css';
@import '../../base/components/dialog.styl';

.dimmer {
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}
.dialog {
    width: 600px;
    min-height: 100px;
    background-color: color--grey--1;
    border-radius: 3px;
    & > * {
        padding: 0 (24 / 16) * 1em;
        &:last-child { padding-bottom: 0.75em; }
    }
    &__icon {
        font-size: (28 / 16) * 1em;
        transform: translateY(10%);
        @extend .aicon;
        &--close {
            &:before { @extend .aicon__close:before; }
        }
        &--help {
            &:before { @extend .aicon__help:before; }
        }
        &:hover,
        &:active { color: color--blue--4; }
    }
    &__header {
        border-bottom: 1px solid color--grey--3;
        background: white;
        padding-left: 1em;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        &__title {
            font-size: 1.25em;
            padding: (10 / 16) * 1em 0;
            font-weight: 300;
        }
        .button-group { border-bottom: 0px; }
    }
    &__content {
        margin-top: 0.5em;
        margin-bottom: 1em;
        & > .panel {
            margin-left: 0;
            margin-right: 0;
        }
        &__text { font-size: 13px; }
    }
}