.toaster,
ol.rack {
    list-style: none;
    margin: 0
}

.toaster {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    box-sizing: border-box;
    padding: 5px;
    outline: 0;
    z-index: 999999999;
    position: fixed
}

.butteruptoast,
.butteruptoast.brutalist {
    font-size: 13px;
    display: flex;
    padding: 16px;
    width: 325px
}

.toaster.bottom-right {
    bottom: 20px;
    right: 20px
}

.toaster.bottom-left {
    bottom: 20px;
    left: 20px
}

.toaster.top-right {
    top: 20px;
    right: 20px
}

.toaster.top-left {
    top: 20px;
    left: 20px
}

.toaster.bottom-center {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%)
}

.toaster.top-center {
    top: 20px;
    left: 50%;
    transform: translateX(-50%)
}

.toaster.top-center ol.rack,
.toaster.top-left ol.rack,
.toaster.top-right ol.rack {
    flex-direction: column-reverse
}

.toaster.bottom-center ol.rack,
.toaster.bottom-left ol.rack,
.toaster.bottom-right ol.rack {
    flex-direction: column
}

ol.rack {
    padding: 0;
    display: flex
}

ol.rack li {
    margin-bottom: 16px
}

ol.rack.upperstack li {
    margin-bottom: -35px;
    transition: .3s ease-in-out
}

ol.rack.upperstack li:hover {
    margin-bottom: 16px;
    scale: 1.03;
    transition: .3s ease-in-out
}

ol.rack.lowerstack li {
    margin-top: -35px
}

ol.rack.lowerstack {
    margin-bottom: 0
}

.butteruptoast {
    border-radius: 8px;
    box-shadow: 0 4px 12px #0000001a;
    border: 1px solid #ededed;
    background-color: #fff;
    gap: 6px;
    color: #282828
}

.butteruptoast.dismissable {
    cursor: pointer
}

.butteruptoast .icon {
    display: flex;
    align-items: start;
    flex-direction: column
}

.butteruptoast .icon svg {
    width: 20px;
    height: 20px;
    fill: #282828
}

.notif .desc {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.notif .desc .title {
    font-weight: 600;
    line-height: 1.5
}

.notif .desc .message {
    font-weight: 400;
    line-height: 1.4
}

.butteruptoast.success {
    background-color: #ebfef2;
    color: #00892d;
    border: 1px solid #d2fde4
}

.butteruptoast.success .icon svg {
    fill: hsl(140, 100%, 27%)
}

.butteruptoast.error .icon svg {
    fill: hsl(0, 100%, 27%)
}

.butteruptoast.warning .icon svg {
    fill: hsl(50, 100%, 27%)
}

.butteruptoast.info .icon svg {
    fill: hsl(210, 100%, 27%)
}

.butteruptoast.error {
    background-color: #fef0f0;
    color: #890000;
    border: 1px solid #fdd2d2
}

.butteruptoast.warning {
    background-color: #fffdf0;
    color: #897200;
    border: 1px solid #fdf6d2
}

.butteruptoast.info {
    background-color: #f0f8ff;
    color: #004489;
    border: 1px solid #d2e8fd
}

.toast-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
    align-items: center;
    flex-direction: row;
    margin-top: 16px
}

.toast-buttons .toast-button.primary {
    background-color: #282828;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    width: 100%
}

.toast-buttons .toast-button.secondary {
    background-color: #f0f8ff;
    color: #004489;
    border: 1px solid #d2e8fd;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%
}

.butteruptoast.success .toast-button.primary {
    background-color: #27ae5f;
    color: #fff
}

.butteruptoast.success .toast-button.secondary {
    background-color: #daf0e3;
    color: #1e8549;
    border: 1px solid #8ae4b0
}

.butteruptoast.error .toast-button.primary {
    background-color: #db3748;
    color: #fff
}

.butteruptoast.error .toast-button.secondary {
    background-color: #eddddf;
    color: #be2131;
    border: 1px solid #eb8e97
}

.butteruptoast.warning .toast-button.primary {
    background-color: #ffc005;
    color: #4c3900
}

.butteruptoast.warning .toast-button.secondary {
    background-color: #fff9ea;
    color: #9e7600;
    border: 1px solid #ffe084
}

.butteruptoast.info .toast-button.primary {
    background-color: #2094f3;
    color: #fff
}

.butteruptoast.info .toast-button.secondary {
    background-color: #e1f1fd;
    color: #085ea4;
    border: 1px solid #81c2f8
}

.toastUp {
    animation: .5s ease-in-out forwards slideUp
}

.toastDown {
    animation: .5s ease-in-out forwards slideDown
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(100%)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.fadeOutToast {
    animation: .3s ease-in-out forwards fadeOut
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    100% {
        opacity: 0
    }
}

.butteruptoast.glass {
    background-color: rgba(255, 255, 255, .42) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 12px #0000001a;
    color: #282828
}

.butteruptoast.glass.success {
    background-color: rgba(235, 254, 242, .42) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 12px #0000001a;
    color: #00892d
}

.butteruptoast.glass.error,
.butteruptoast.glass.warning {
    backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 12px #0000001a
}

.butteruptoast.glass.error {
    background-color: rgba(254, 240, 240, .42) !important;
    -webkit-backdrop-filter: blur(10px);
    color: #890000
}

.butteruptoast.glass.warning {
    background-color: rgba(255, 253, 240, .42) !important;
    -webkit-backdrop-filter: blur(10px);
    color: #897200
}

.butteruptoast.glass.info {
    background-color: rgba(240, 248, 255, .42) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 12px #0000001a;
    color: #004489
}

.butteruptoast.brutalist {
    border-radius: 0;
    box-shadow: 0 4px 12px #0000001a;
    border: 2px solid #282828;
    align-items: center;
    background-color: #fff;
    gap: 6px;
    color: #282828
}

.butteruptoast.brutalist.success {
    background-color: #ebfef2;
    color: #00892d;
    border: 2px solid #00892d
}

.butteruptoast.brutalist.error {
    background-color: #fef0f0;
    color: #890000;
    border: 2px solid #890000
}

.butteruptoast.brutalist.warning {
    background-color: #fffdf0;
    color: #897200;
    border: 2px solid #897200
}

.butteruptoast.brutalist.info {
    background-color: #f0f8ff;
    color: #004489;
    border: 2px solid #004489
}