.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: 0;
    margin: 0;
    list-style: none;
    outline: none;
    z-index: 999999999;
    position: fixed;
    padding: 5px;
}

.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{
    flex-direction: column-reverse;
}

.toaster.top-left ol.rack{
    flex-direction: column-reverse;
}

.toaster.top-right ol.rack{
    flex-direction: column-reverse;
}

.toaster.bottom-center ol.rack{
    flex-direction: column;
}

.toaster.bottom-left ol.rack{
    flex-direction: column;
}

.toaster.bottom-right ol.rack{
    flex-direction: column;
}

ol.rack{
    list-style: none;
    padding: 0;
    margin: 0;
    /* reverse the list order so that the newest items are at the top */
    display: flex;
}

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

/* Stacked Toasts Enabled */
ol.rack.upperstack li{
    margin-bottom: -35px;
    transition: all 0.3s ease-in-out;
}

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

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


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

.butteruptoast{
    border-radius: 8px;
    box-shadow: 0 4px 12px #0000001a;
    font-size: 13px;
    display: flex;
    padding: 16px;
    border: 1px solid hsl(0, 0%, 93%);
    background-color: white;
    gap: 6px;
    color: #282828;
    width: 325px;
}

.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: hsl(140, 100%, 27%);
    border: solid 1px hsl(145, 92%, 91%);
}

.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: hsl(0, 100%, 27%);
    border: solid 1px hsl(0, 92%, 91%);
}

.butteruptoast.warning{
    background-color: #fffdf0;
    color: hsl(50, 100%, 27%);
    border: solid 1px hsl(50, 92%, 91%);
}

.butteruptoast.info{
    background-color: #f0f8ff;
    color: hsl(210, 100%, 27%);
    border: solid 1px hsl(210, 92%, 91%);
}

/* Buttons */
.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: white;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    width: 100%;
}

.toast-buttons .toast-button.secondary{
    background-color: #f0f8ff;
    color: hsl(210, 100%, 27%);
    border: solid 1px hsl(210, 92%, 91%);
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
}

/* Success toast buttons */
.butteruptoast.success .toast-button.primary {
    background-color: hsl(145, 63%, 42%);
    color: white;
}

.butteruptoast.success .toast-button.secondary {
    background-color: hsl(145, 45%, 90%);
    color: hsl(145, 63%, 32%);
    border: solid 1px hsl(145, 63%, 72%);
}

/* Error toast buttons */
.butteruptoast.error .toast-button.primary {
    background-color: hsl(354, 70%, 54%);
    color: white;
}

.butteruptoast.error .toast-button.secondary {
    background-color: hsl(354, 30%, 90%);
    color: hsl(354, 70%, 44%);
    border: solid 1px hsl(354, 70%, 74%);
}

/* Warning toast buttons */
.butteruptoast.warning .toast-button.primary {
    background-color: hsl(45, 100%, 51%);
    color: hsl(45, 100%, 15%);
}

.butteruptoast.warning .toast-button.secondary {
    background-color: hsl(45, 100%, 96%);
    color: hsl(45, 100%, 31%);
    border: solid 1px hsl(45, 100%, 76%);
}

/* Info toast buttons */
.butteruptoast.info .toast-button.primary {
    background-color: hsl(207, 90%, 54%);
    color: white;
}

.butteruptoast.info .toast-button.secondary {
    background-color: hsl(207, 90%, 94%);
    color: hsl(207, 90%, 34%);
    border: solid 1px hsl(207, 90%, 74%);
}




/* Entrance animations */
/*  Note: These animations need to differ depending on the location of the toaster
    Elements that are in the top should slide and fade down from the top
    Elemennts that are in the bottom should slide and fade up from the bottom
*/

.toastUp{
    animation: slideUp 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

.toastDown{
    animation: slideDown 0.5s ease-in-out;
    animation-fill-mode: forwards;
}

@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: fadeOut 0.3s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/*  Additional Styles
    These styles are an alternative to the standard option. A user can choose to use these
    styles by setting the theme: variable per toast
*/

/* Glass */

.butteruptoast.glass{
    background-color: rgba(255, 255, 255, 0.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, 0.42) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 12px #0000001a;
    color: hsl(140, 100%, 27%);
}

.butteruptoast.glass.error{
    background-color: rgba(254, 240, 240, 0.42) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 12px #0000001a;
    color: hsl(0, 100%, 27%);
}

.butteruptoast.glass.warning{
    background-color: rgba(255, 253, 240, 0.42) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: none;
    box-shadow: 0 4px 12px #0000001a;
    color: hsl(50, 100%, 27%);
}

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

/* brutalist */
.butteruptoast.brutalist{
    border-radius: 0px;
    box-shadow: 0 4px 12px #0000001a;
    border: solid 2px #282828;
    font-size: 13px;
    align-items: center;
    display: flex;
    padding: 16px;
    background-color: white;
    gap: 6px;
    color: #282828;
    width: 325px;
}

.butteruptoast.brutalist.success{
    background-color: #ebfef2;
    color: hsl(140, 100%, 27%);
    border: solid 2px hsl(140, 100%, 27%);
}

.butteruptoast.brutalist.error{
    background-color: #fef0f0;
    color: hsl(0, 100%, 27%);
    border: solid 2px hsl(0, 100%, 27%);
}

.butteruptoast.brutalist.warning{
    background-color: #fffdf0;
    color: hsl(50, 100%, 27%);
    border: solid 2px hsl(50, 100%, 27%);
}

.butteruptoast.brutalist.info{
    background-color: #f0f8ff;
    color: hsl(210, 100%, 27%);
    border: solid 2px hsl(210, 100%, 27%);
}