.toast {
    @include position(2vh, 0, auto, 0);
    @include flex(row, center, center);
    transform: translateY(calc(-100% - 3vh));
    transition: all 0.3s;
    pointer-events: none;
    position: fixed;
    margin: 0 auto;
    z-index: 20;

    > div {
        @include flex(row, center);
        padding: 0.75em 1em;
        border-radius: 0.3em;
        position: relative;
        overflow: hidden;
        pointer-events: all;

        > bc-icon {
            color: var(--c-text-secondary);
            margin-right: 1em;
        }

        > article {
            @include flex(column, center);
            line-height: 0.95em;
            flex-grow: 1;
        }

        > div {
            background: rgba(black, 0.25);
            height: 2px;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;

            &.timeout {
                @include animate(#{var(--timeout) + ' cubic-bezier(0.15, 0, 0.95, 1) forwards'}) {
                    from {
                        transform: scaleX(1);
                    }
                    to {
                        transform: scaleX(0);
                    }
                }
            }
        }

        p, h3 {
            color: var(--c-text-secondary);
        }

        p {
            @include font(600, 0.75em);
            margin-top: 0.25em;
        }

        @include mq-phones {
            h3 {
                font-size: 0.8em;
            }

            p {
                font-size: 0.65em;
            }
        }

        $states: (
                ('success', 'primary'),
                ('warning', 'yellow'),
                ('error', 'red'),
        );

        @each $state in $states {
            $color: nth($state, 2);
            &[data-state=#{nth($state, 1)}] {
                background: var(#{'--c-' + $color});
            }
        }
    }
}

.show {
    transform: none;
}
