@use '../../scss/config.scss' as *;

.toast {
    @include background(primary-70);
    @include position(fixed, r20px, b20px);
    @include layer(header);

    transform: translateY(calc(100% + 25px));

    &[data-show] {
        @include transition(transform);
    }

    &[data-show="true"] {
        transform: translateY(0);
    }

    &[data-position="bottom-left"],
    &[data-position="top-left"] {
        @include position(l20px);
        right: auto;
    }

    &[data-position="top-left"],
    &[data-position="top-right"],
    &[data-position="top-full"] {
        @include position(t20px);
        bottom: auto;
        transform: translateY(calc(-100% - 25px));

        &[data-show="true"] {
            transform: translateY(0);
        }
    }

    &[data-position="bottom-full"],
    &[data-position="top-full"] {
        @include position(l20px);
    }
}