@import '../styles/variables';

$light-color: white;
$dark-color: #394347;
$light-shadow-color: rgba(159, 154, 154, 0.5);
$dark-shadow-color: rgba(0, 0, 0, 0.3);

.container {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, 0);
    pointer-events: none;

    .text-wrapper {
        display: flex;
        align-items: center;
        padding-block-start: 0;
        padding-inline-end: 57px;
        padding-block-end: 0;
        padding-inline-start: 57px;
        border-radius: 10% 10% / 50% 50%;
        box-shadow: 0 2px 8px 0 $light-shadow-color;
        background-color: $dark-color;
        transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
        transform: translate(0, -10px);
        opacity: 0;

        .text {
            font-family: $duda-title-font;
            color: $light-color;
            text-align: center;
        }

        &.light {
            background-color: $light-color;
            box-shadow: 0 2px 8px 0 $dark-shadow-color;
            .text {
                color: $dark-color;
            }
        }

        &.dark {
            background-color: $dark-color;
            .text {
                color: $light-color;
            }
        }

        &.message-visible {
            opacity: 0.85;
            transform: translate(0, 0);
        }
    }

    &.message-visible {
        pointer-events: auto;
    }
}