[data-sonner-toast] {
    --gray1: hsl(0, 0%, 99%);
    --gray2: hsl(0, 0%, 97.3%);
    --gray3: hsl(0, 0%, 95.1%);
    --gray4: hsl(0, 0%, 93%);
    --gray5: hsl(0, 0%, 90.9%);
    --gray6: hsl(0, 0%, 88.7%);
    --gray7: hsl(0, 0%, 85.8%);
    --gray8: hsl(0, 0%, 78%);
    --gray9: hsl(0, 0%, 56.1%);
    --gray10: hsl(0, 0%, 52.3%);
    --gray11: hsl(0, 0%, 43.5%);
    --gray12: hsl(0, 0%, 9%);
    --border-radius: 12px;
    --padding: 16px;
    --width: 300px;
    --x-offset: 12px;
    --y-offset: 12px;
    --opacity: 1;
    --y: 0%;
    --x: 0%;
    --scale: 1;
    --gap: 10px;
    --lift: 1;
    --close-button-hidden-display: none;
    --close-button-visible-display: flex;
    --close-button-display: var(--close-button-hidden-display);
    width: var(--width);
    position: fixed;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin: 0;
    list-style: none;
    outline: none;
    z-index: calc(999999999 - var(--index));
    box-shadow: 0 4px 12px #0000001a;
    background-color: var(--normal-bg);
    color: var(--normal-text);
    border: 1px solid var(--normal-border);
    transform: translate(var(--x)) translateY(var(--y)) scale(var(--scale));
    transition: transform, opacity;
    transition-duration: 0ms;
    padding: var(--padding);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
    font-size: .85rem
}

[data-sonner-toast][data-theme=light] {
    --normal-bg: #fff;
    --normal-border: var(--gray4);
    --normal-text: var(--gray12);
    --action-button-bg: var(--normal-bg);
    --action-button-border: var(--normal-bg);
    --action-button-text: var(--normal-text);
    --action-button-hover-bg: var(--normal-bg);
    --action-button-hover-border: var(--normal-bg);
    --action-button-hover-text: var(--normal-text);
    --close-button-bg: var(--action-button-bg);
    --close-button-border: var(--action-button-bg);
    --close-button-text: var(--action-button-text);
    --success-bg: hsl(143, 85%, 96%);
    --success-border: hsl(145, 92%, 91%);
    --success-text: hsl(140, 100%, 27%);
    --success-action-button-bg: var(--success-bg);
    --success-action-button-border: var(--success-bg);
    --success-action-button-text: var(--success-text);
    --success-action-button-hover-bg: var(--success-text);
    --success-action-button-hover-border: var(--success-text);
    --success-action-button-hover-text: var(--success-bg);
    --info-bg: hsl(208, 100%, 97%);
    --info-border: hsl(221, 91%, 91%);
    --info-text: hsl(210, 92%, 45%);
    --info-action-button-bg: var(--info-bg);
    --info-action-button-border: var(--info-bg);
    --info-action-button-text: var(--info-text);
    --info-action-button-hover-bg: var(--info-text);
    --info-action-button-hover-border: var(--info-text);
    --info-action-button-hover-text: var(--info-bg);
    --warning-bg: hsl(49, 100%, 97%);
    --warning-border: hsl(49, 91%, 91%);
    --warning-text: hsl(31, 92%, 45%);
    --warning-action-button-bg: var(--warning-bg);
    --warning-action-button-border: var(--warning-bg);
    --warning-action-button-text: var(--warning-text);
    --warning-action-button-hover-bg: var(--warning-text);
    --warning-action-button-hover-border: var(--warning-text);
    --warning-action-button-hover-text: var(--warning-bg);
    --error-bg: hsl(359, 100%, 97%);
    --error-border: hsl(359, 100%, 94%);
    --error-text: hsl(360, 100%, 45%);
    --error-action-button-bg: var(--error-bg);
    --error-action-button-border: var(--error-bg);
    --error-action-button-text: var(--error-text);
    --error-action-button-hover-bg: var(--error-text);
    --error-action-button-hover-border: var(--error-text);
    --error-action-button-hover-text: var(--error-bg)
}

[data-sonner-toast][data-theme=dark] {
    --normal-bg: #000;
    --normal-border: hsl(0, 0%, 20%);
    --normal-text: var(--gray1);
    --action-button-bg: var(--normal-bg);
    --action-button-border: var(--normal-bg);
    --action-button-text: var(--normal-text);
    --action-button-hover-bg: var(--normal-bg);
    --action-button-hover-border: var(--normal-bg);
    --action-button-hover-text: var(--normal-text);
    --close-button-bg: var(--action-button-bg);
    --close-button-border: var(--action-button-bg);
    --close-button-text: var(--action-button-text);
    --success-bg: hsl(150, 100%, 6%);
    --success-border: hsl(147, 100%, 12%);
    --success-text: hsl(150, 86%, 65%);
    --success-action-button-bg: var(--success-bg);
    --sucesss-button-border: var(--success-bg);
    --success-action-button-text: var(--success-text);
    --success-action-button-hover-bg: var(--success-text);
    --success-action-button-hover-border: var(--success-text);
    --success-action-button-hover-text: var(--success-bg);
    --info-bg: hsl(215, 100%, 6%);
    --info-border: hsl(223, 100%, 12%);
    --info-text: hsl(216, 87%, 65%);
    --info-action-button-bg: var(--info-bg);
    --info-action-button-border: var(--info-bg);
    --info-action-button-text: var(--info-text);
    --info-action-button-hover-bg: var(--info-text);
    --info-action-button-hover-border: var(--info-text);
    --info-action-button-hover-text: var(--info-bg);
    --warning-bg: hsl(64, 100%, 6%);
    --warning-border: hsl(60, 100%, 12%);
    --warning-text: hsl(46, 87%, 65%);
    --warning-action-button-bg: hsl(64, 100%, 6%);
    --warning-action-button-border: hsl(64, 100%, 6%);
    --warning-action-button-text: var(--warning-text);
    --warning-action-button-hover-bg: var(--warning-text);
    --warning-action-button-hover-border: var(--warning-text);
    --warning-action-button-hover-text: var(--warning-bg);
    --error-bg: hsl(358, 76%, 10%);
    --error-action-button-bg: hsl(358, 76%, 18%);
    --error-border: hsl(357, 89%, 16%);
    --error-text: hsl(358, 100%, 81%);
    --error-action-button-bg: hsl(358, 76%, 10%);
    --error-action-button-border: hsl(358, 76%, 10%);
    --error-action-button-text: var(--error-text);
    --error-action-button-hover-bg: var(--error-text);
    --error-action-button-hover-border: var(--error-text);
    --error-action-button-hover-text: var(--error-bg)
}

[data-sonner-toast][data-rich-colors=true][data-type=success] {
    background-color: var(--success-bg);
    border-color: var(--success-border);
    color: var(--success-text);
    --action-button-bg: var(--success-action-button-bg);
    --action-button-border: var(--success-action-button-border);
    --action-button-text: var(--success-action-button-text);
    --action-button-hover-bg: var(--success-action-button-hover-bg);
    --action-button-hover-border: var(--success-action-button-hover-border);
    --action-button-hover-text: var(--success-action-button-hover-text)
}

[data-sonner-toast][data-rich-colors=true][data-type=info] {
    background-color: var(--info-bg);
    border-color: var(--info-border);
    color: var(--info-text);
    --action-button-bg: var(--info-action-button-bg);
    --action-button-border: var(--info-action-button-border);
    --action-button-text: var(--info-action-button-text);
    --action-button-hover-bg: var(--info-action-button-hover-bg);
    --action-button-hover-border: var(--info-action-button-hover-border);
    --action-button-hover-text: var(--info-action-button-hover-text)
}

[data-sonner-toast][data-rich-colors=true][data-type=warning] {
    background-color: var(--warning-bg);
    border-color: var(--warning-border);
    color: var(--warning-text);
    --action-button-bg: var(--warning-action-button-bg);
    --action-button-border: var(--warning-action-button-border);
    --action-button-text: var(--warning-action-button-text);
    --action-button-hover-bg: var(--warning-action-button-hover-bg);
    --action-button-hover-border: var(--warning-action-button-hover-border);
    --action-button-hover-text: var(--warning-action-button-hover-text)
}

[data-sonner-toast][data-rich-colors=true][data-type=error] {
    background-color: var(--error-bg);
    border-color: var(--error-border);
    color: var(--error-text);
    --action-button-bg: var(--error-action-button-bg);
    --action-button-border: var(--error-action-button-border);
    --action-button-text: var(--error-action-button-text);
    --action-button-hover-bg: var(--error-action-button-hover-bg);
    --action-button-hover-border: var(--error-action-button-hover-border);
    --action-button-hover-text: var(--error-action-button-hover-text)
}

[data-sonner-toast][data-x-position=left] {
    left: max(var(--x-offset), env(safe-area-inset-left))
}

[data-sonner-toast][data-x-position=right] {
    right: max(var(--x-offset), env(safe-area-inset-right))
}

[data-sonner-toast][data-x-position=center] {
    --x: -50%;
    left: 50%
}

[data-sonner-toast][data-y-position=top] {
    top: max(var(--y-offset), env(safe-area-inset-top));
    --lift: -1
}

[data-sonner-toast][data-y-position=bottom] {
    bottom: max(var(--y-offset), env(safe-area-inset-bottom));
    --lift: 1
}

[data-sonner-toast][data-mounted=false] {
    opacity: 0;
    --y: calc(var(--lift) * 100%);
    transition: none;
    transition-duration: 0ms
}

[data-sonner-toast][data-mounted=true] {
    --y: calc(var(--lift) * -1 * var(--gap));
    opacity: 1;
    transition-duration: .4s
}

[data-sonner-toast][data-hidden=true][data-expanded=true], [data-sonner-toast][data-hidden=true][data-expanded=false][data-front=true] {
    transform: translate(var(--x)) translateY(calc(var(--lift) * 100%));
    opacity: 0;
    transition-property: transform, opacity;
    transition-duration: .4s
}

[data-sonner-toast][data-front=true][data-hidden=true] {
    --y: 0;
    opacity: 0
}

[data-sonner-toast][data-front=false][data-expanded=false] {
    --scale: calc(1 - ((var(--index) - 1) * .05));
    --y: calc(var(--lift) * -1 * var(--gap) * var(--index));
    height: var(--collapsed-height)
}

[data-sonner-toast][data-front=false][data-expanded=false]>* {
    opacity: 0;
    transition: opacity .4s
}

[data-sonner-toast][data-front=false][data-expanded=false][data-hidden=true] {
    opacity: 0
}

[data-sonner-toast][data-front=false][data-expanded=true] {
    --y: calc(var(--lift) * -1 * (var(--gap) + var(--space-above)));
    height: auto
}

.sonner-toast-content-container {
    display: flex;
    flex-direction: row;
    gap: 2px;
    justify-content: space-between
}

.sonner-toast-close {
    width: 20px;
    height: 20px;
    color: var(--close-button-text);
    background-color: var(--close-button-bg);
    border: 1px solid var(--close-button-border);
    border-radius: 50%;
    display: var(--close-button-display);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    top: -8px;
    left: -8px;
    transition: background-color .1s;
    z-index: calc(9999999999 - var(--index))
}

.sonner-toast-close:hover {
    color: var(--action-button-hover-text);
    border-color: var(--action-button-hover-border);
    background-color: var(--action-button-hover-bg)
}

[data-toast-plain] {
    font-weight: 500
}

[data-toast-description] {
    display: flex;
    flex-direction: column;
    gap: 4px
}

[data-toast-description]>[data-title] {
    font-weight: 500
}

[data-toast-description]>[data-description] {
    font-weight: 400
}

[data-toast-container-horizontal] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    justify-content: start
}

[data-toast-level-message] {
    font-weight: 500;
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

[data-toast-promise-running][data-show=false], [data-toast-promise-completed][data-show=false] {
    display: none
}

[data-toast-promise-running][data-show=true] {
    width: 24px;
    height: 24px;
    border: 3px solid var(--info-bg);
    border-bottom-color: var(--info-text);
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite
}

@keyframes rotation {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

[data-toast-promise-completed][data-show=true] {
    display: block
}

[data-sonner-action-button=false] {
    display: none
}

[data-sonner-action-button=true] {
    display: block;
    background-color: var(--action-button-bg);
    color: var(--action-button-text);
    border: 0;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--action-button-border);
    cursor: pointer
}

[data-sonner-action-button=true]:hover {
    background-color: var(--action-button-hover-bg);
    color: var(--action-button-hover-text)
}