.notification {
    --color:#666;
    --background:white;
    border:1px solid var(--color);
    position: fixed;
    bottom: 0;
    left: 0;
    margin: 1rem;
    z-index: 9999999999;
    background-color: var(--background);
    color: var(--color);
    width: calc(100% - 2rem);
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    transition: all .5s ease;
    transform: translateX(-200%);
    line-height: 1.3;
    padding: .9rem;
    box-shadow: -2px 1px 5px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.notification span {
    color:#666
}
/* Positioning for top-left, top-right, and bottom-right */
.notification.top-left {
    top: 0;
    left: 0;
    bottom: auto;
}

.notification.top-right {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    transform: translateX(200%); /* Reverse the translate */
}

.notification.bottom-right {
    bottom: 0;
    right: 0;
    left: auto;
    transform: translateX(200%); /* Reverse the translate */
}

/* When visible, reset the transform */
.notification[data-visible="true"] {
    transform: translateX(0);
}

/* Notification types */
.notification[data-type="warning"] {
    --background: white;
    --color:  #ad973c ;
}

.notification .titre:before {
    display: inline-block;
    margin-right: .3em;
}

.notification[data-type="warning"] .titre:before {
    content: '⚠️';
}

.notification[data-type="error"] {
    --background: white;
    --color:  hsl(348, 100%, 61%) ;
}

.notification[data-type="error"] .titre:before {
    content: '😤';
}

.notification[data-type="success"] {
    --color:hsl(141, 83%, 26%);
    --background:white;
    border: 1px solid var(--color);
}

.notification[data-type="success"] .titre:before {
    content: '✅';
}

/* Responsive widths */
@media screen and (min-width: 600px) {
    .notification {
        max-width: 60vw;
    }
}

@media screen and (min-width: 1000px) {
    .notification {
        max-width: 40vw;
    }
}

@media screen and (min-width: 1400px) {
    .notification {
        max-width: 30vw;
    }
}

.notification>div {
    display: flex;
    gap: 1rem;
    flex-direction: column;
    flex: 1;
}

.notification>div>div {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.notification>div>*,
.notification>div>div>* {
    margin: 0;
    padding: 0;
}

.notification figure {
    flex: 0 0 64px;
}

.notification figure>img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.notification figure:has(img[src=""]) {
    display: none;
}

.notification a {
    color: inherit;
    text-decoration: underline;
}

.notification a:hover {
    text-decoration: none;
}

.notification>div>div>p {
    display: flex;
    flex-direction: column;
    gap: .5em;
}

.notification button {
    top: 0;
    right: 0;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    aspect-ratio: 1;
    background: none;
    border: 0;
}

.notification a.button {
    display: inline-block;
    padding: .5rem .8rem;
    background-color: var(--color);
    color: var(--background);
    text-decoration: none;
}

.notification a.button:hover {
    background-color: rgba(0, 0, 0, 0.3);
}

.notification .cta {
    display: flex;
    justify-content: end;
}


@media screen and (max-width: 1000px) {

	body:has(.notification[data-visible="true"]) .brevo-conversations {
		display:none !important;
	}
}