@import "../_base.scss"

$modal-min-height: 15vh;
$modal-max-height: 55vh;

.modal {
    width: 100%;
    height: 100%;

    position: relative;
    top: -100%;
    margin-bottom: -100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.5);

    &__content {
        $content-width: 70vw;
        $title-height: 3vh;
        $space-height: 1vh;
        $buttons-height: 5vh;
        $icon-width: 10vw;
        $msg-max-width: 50vw;

        $msg-min-height: calc($modal-min-height - $title-height - $space-height - $buttons-height);
        $msg-max-height: calc($modal-max-height - $title-height - $space-height - $buttons-height);

        min-height: $modal-min-height;
        max-height: $modal-max-height;

        width: min-content;

        display: grid;
        grid-template-columns: $icon-width 1vw minmax(max-content, $msg-max-width);
        grid-template-rows: $title-height $space-height max-content $space-height $buttons-height;
        grid-template-areas:
            "icon . title"
            "icon . ."
            "icon . msg"
            ". . ."
            "buttons buttons buttons"
        ;

        padding: 2.5%;

        background: get-color(greyscale, 0);

        border: $border-normal;
        border-radius: $border-radius;
        border-color: get-color(greyscale, 90);

        &__icon {
            grid-area: icon;

            aspect-ratio: 1;

            display: flex;
            align-items: center;
            justify-content: center;

            overflow: hidden;

            border: $border-normal;
            border-radius: $border-radius;

            &__placeholder {
                width: 100%;
                height: 100%;
            }

            svg {
                width: 105%;
            }
        }

        &__title {
            grid-area: title;

            width: max-content;

            font-size: calc($title-height - 0.5vh);
            font-weight: bold;
        }

        &__msg {
            grid-area: msg;

            height: fit-content;

            min-height: $msg-min-height;
            max-height: $msg-max-height;
            max-width: $msg-max-width;

            overflow: scroll;

            font-size: 1.5vh;
            color: get-color(greyscale, 80);
        }

        &__buttons {
            grid-area: buttons;

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