.toasted-container.top-right {
    top: 32px !important;
    right: 32px !important;
}

.toasted-container.top-left {
    top: 32px !important;
    left: 32px !important;
}

.toasted-container.bottom-right {
    bottom: 32px !important;
    right: 32px !important;
}

.toasted-container.bottom-left {
    bottom: 32px !important;
    left: 32px !important;
}

.toasted-container {
    @apply items-end;
}

.toasted-container .toasted.statamic {
    @apply bg-white text-grey-80 mt-2 text-base rounded shadow p-0;
    height: 48px;

    i {
        @apply flex items-center rounded-l mr-2 h-full px-4 text-white;
    }

    &.success i {
        @apply bg-green-light;
    }

    &.error i {
        @apply bg-red-600;
    }

    &.default i {
        @apply bg-grey-80;
    }

    .action {
        @apply font-normal text-xl px-2 h-full text-grey-60 m-0 ml-1 flex items-center;
        &:hover {
            @apply no-underline text-grey-90;
        }
    }
}