@use "variables" as *;

:host {
    position: relative;
    height: 100%;
    width: 100%;
    max-height: 100%;
    min-height: 0;

    &.active {
        &::after,
        .message {
            opacity: 1;
            visibility: visible;
        }
    }

    &::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1000;
        border: 1px dashed $color-palette-primary-500;
        border-radius: $border-radius-xl;
        background-color: rgba(246, 249, 252, 0.8);
        opacity: 0;
        visibility: visible;
        transition: all $content-drive-animation-speed $content-drive-animation-ease;
        pointer-events: none;
    }

    .message {
        display: flex;
        align-items: center;
        justify-content: center;
        width: inherit;
        height: inherit;
        position: absolute;
        inset: 0;
        z-index: 1001;
        transition: all $content-drive-animation-speed $content-drive-animation-ease;
        opacity: 0;
        visibility: visible;
        pointer-events: none;
    }

    .message__content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: $spacing-3;

        .pi {
            height: calc($icon-xl + $spacing-4);
            width: calc($icon-xl + $spacing-4);
            font-size: $font-size-xxxxl;
            color: $color-palette-primary-500;
            background-color: $color-palette-primary-200;
            border-radius: $border-radius-circular;
        }
    }

    .message__content-text {
        font-size: $font-size-slg;
        line-height: 140%;
    }
}
