$close-path: "M9.4,8l6.3-6.3c0.4-0.4,0.4-1,0-1.4s-1-0.4-1.4,0L8,6.6L1.7,0.3c-0.4-0.4-1-0.4-1.4,0s-0.4,1,0,1.4L6.6,8l-6.3,6.3 c-0.4,0.4-0.4,1,0,1.4C0.5,15.9,0.7,16,1,16s0.5-0.1,0.7-0.3L8,9.4l6.3,6.3c0.2,0.2,0.5,0.3,0.7,0.3s0.5-0.1,0.7-0.3 c0.4-0.4,0.4-1,0-1.4L9.4,8z";

$toastrBg: #333;
$toastrColor: #fff;
$startPositionStd: translateY(-8rem);
$startPositionBottom: translateY(8rem);
$endPosition: translateY(0);

.toastr {
    position: relative;
    width: 100%;
    max-width: 25rem;
    padding: 1rem;
    padding-right: 2.5rem;
    background: $toastrBg;
    color: $toastrColor;
    box-shadow: 0 0 .5rem rgba(#000, 0.25);
    opacity: 0;
    margin-top: 1rem;
    transform: $startPositionStd;

    transition: 
        transform 250ms ease-in-out, 
        opacity 250ms ease-out
    ;

    &--enabled {
        transform: $endPosition;
        opacity: 1;
    }

    &--dismiss {
        transform: $startPositionStd;
        opacity: 0;
    }

    &__btn-dismiss {
        cursor: pointer;
        appearance: none;
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        height: 1rem;
        width: 1rem;
        border: 0;
        background: transparent;
        color: #333;

        &:hover,
        &:focus {
            opacity: 0.8;
        }

        .ico {
            display: block;
            height: inherit;
            width: inherit;
            background-color: #fff;
            clip-path: path($close-path);
        }
    }
}

.toastr-wrap {
    position: fixed;
    z-index: 5200;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 100%;

    &--std {
        inset: 0 0 auto 0;
    }

    // Should we ever have this on the bottom or 
    // placed elsewhere
    &--bottom {
        inset: auto 0 0 0;
        flex-flow: column-reverse;

        .toastr {
            transform: $startPositionBottom;
            &--enabled {
                transform: $endPosition;
            }
        }
    }
}