getlackey/lackey-cms

@import "../vars";

[data-lky-growl] {
    position: fixed;
    z-index: 1000000;
    right: 1em;
    top: calc(#{$header-height} + 1rem);
    padding: 1em 2.5em;

    font-family: sans-serif;
    font-weight: 300;
    font-size: 1.25rem;

    color: $color-white;
    background-color: $color-black;
    border-radius: 0.2em;
    //pointer-events: none;
    user-select: none;

    &:not([data-visible]) {
        transform: translateY(-100%);
        opacity: 0;

        transition:
            transform 0.2s cubic-bezier(0.4, 0.0, 0.6, 1),
            opacity 0.2s;
    }
    &[data-visible] {
        transform: none;
        opacity: 1;

        transition:
            transform 0.3s cubic-bezier(0.0, 0.0, 0.2, 1),
            opacity 0.3s;
    }

    &[data-lky-growl="success"]:before {
        content: "Success: ";

        color: $color-green;
    }
    &[data-lky-growl="error"]:before {
        content: "Error: ";

        color: $color-red;
    }

    div {
        text-align: center;
        margin-top: 10px;
    }

    button {
        margin-left: 15px;
        padding: 6px 10px;
        border: none;
        background: #00CBFF;
        color: white;
        min-width: 80px;

        &:first-of-type {
            margin-left: 0;
        }
    }

    input {
        width: 100%;
        margin-bottom: 15px;
        padding: 5px 10px;
    }
}