.callout {
    --callout-border-color: var(--borders-light, #ddd);
    --callout-border-radius: .75rem;
    --callout-width: 100%;
    --callout-color: var(--text-almost-black, #020610);
    --callout-font-size: var(--text-size, 1rem);
    --callout-padding: 0.75rem;
    --callout-content-gap: 0.25rem;

    width: var(--callout-width);
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: 'icon content';
    grid-gap: var(--callout-padding, 0.75rem);
    border-radius: var(--callout-border-radius);
    padding: var(--callout-padding, 0.75rem);
    position: relative;

    &.neutral {
        border: 1px solid var(--borders-light, #ddd);
        background-color: var(--surface-neutral-lighter, #f4f5f5);
    }
    &.info {
        border: 1px solid var(--system-info, #3daeff);
        background-color: var(--surface-system-info, #e6f8ff);
    }
    &.alert {
        border: 1px solid var(--system-warning, #ffb200);
        background-color: var(--surface-system-warning, #fff9d6);
    }
    &.error {
        border: 1px solid var(--system-error, #e12929);
        background-color: var(--surface-system-error, #ffe5e5);
    }
    &.positive {
        border: 1px solid var(--system-success, #00b24a);
        background-color: var(--surface-system-success, #d9ffee);
    }
}

.open {
    display: none;
}

.content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    grid-area: content;
    gap: var(--callout-content-gap, 0.25rem);
}

.title {
    color: var(--callout-color, #020610);
    font-size: var(--callout-font-size, 1rem);
    line-height: var(--text-line-height);
    font-weight: 700;
}
.description {
    margin: unset;
    display: block;
    color: var(--callout-color, #020610);
    font-size: var(--callout-font-size, 1rem);
    line-height: var(--text-line-height);
    margin-bottom: var(--form-padding-vertical, 0.75rem);
    font-weight: 400;
}

.icon {
    grid-area: icon;
    pointer-events: none;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    &.neutral {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.0005 1.5625C14.6614 1.5625 18.4877 5.31543 18.4877 10C18.4877 14.6598 14.6916 18.4375 10.0005 18.4375C5.31503 18.4375 1.51323 14.6655 1.51323 10C1.51323 5.34363 5.30898 1.5625 10.0005 1.5625ZM10.0005 0.3125C4.61904 0.3125 0.255859 4.65168 0.255859 10C0.255859 15.3514 4.61904 19.6875 10.0005 19.6875C15.3819 19.6875 19.7451 15.3514 19.7451 10C19.7451 4.65168 15.3819 0.3125 10.0005 0.3125ZM8.58592 13.75H9.05743V9.0625H8.58592C8.32552 9.0625 8.1144 8.85262 8.1144 8.59375V8.28125C8.1144 8.02238 8.32552 7.8125 8.58592 7.8125H10.472C10.7324 7.8125 10.9435 8.02238 10.9435 8.28125V13.75H11.415C11.6754 13.75 11.8865 13.9599 11.8865 14.2188V14.5312C11.8865 14.7901 11.6754 15 11.415 15H8.58592C8.32552 15 8.1144 14.7901 8.1144 14.5312V14.2188C8.1144 13.9599 8.32552 13.75 8.58592 13.75ZM10.0005 4.375C9.30604 4.375 8.74309 4.93465 8.74309 5.625C8.74309 6.31535 9.30604 6.875 10.0005 6.875C10.6949 6.875 11.2578 6.31535 11.2578 5.625C11.2578 4.93465 10.6949 4.375 10.0005 4.375Z' fill='%23020610'/%3E%3C/svg%3E");
    }
    &.info {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.0005 1.5625C14.6614 1.5625 18.4877 5.31543 18.4877 10C18.4877 14.6598 14.6916 18.4375 10.0005 18.4375C5.31503 18.4375 1.51323 14.6655 1.51323 10C1.51323 5.34363 5.30898 1.5625 10.0005 1.5625ZM10.0005 0.3125C4.61904 0.3125 0.255859 4.65168 0.255859 10C0.255859 15.3514 4.61904 19.6875 10.0005 19.6875C15.3819 19.6875 19.7451 15.3514 19.7451 10C19.7451 4.65168 15.3819 0.3125 10.0005 0.3125ZM8.58592 13.75H9.05743V9.0625H8.58592C8.32552 9.0625 8.1144 8.85262 8.1144 8.59375V8.28125C8.1144 8.02238 8.32552 7.8125 8.58592 7.8125H10.472C10.7324 7.8125 10.9435 8.02238 10.9435 8.28125V13.75H11.415C11.6754 13.75 11.8865 13.9599 11.8865 14.2188V14.5312C11.8865 14.7901 11.6754 15 11.415 15H8.58592C8.32552 15 8.1144 14.7901 8.1144 14.5312V14.2188C8.1144 13.9599 8.32552 13.75 8.58592 13.75ZM10.0005 4.375C9.30604 4.375 8.74309 4.93465 8.74309 5.625C8.74309 6.31535 9.30604 6.875 10.0005 6.875C10.6949 6.875 11.2578 6.31535 11.2578 5.625C11.2578 4.93465 10.6949 4.375 10.0005 4.375Z' fill='%230277BB'/%3E%3C/svg%3E");
    }
    &.positive {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.0005 0.3125C4.61865 0.3125 0.255859 4.64973 0.255859 10C0.255859 15.3503 4.61865 19.6875 10.0005 19.6875C15.3823 19.6875 19.7451 15.3503 19.7451 10C19.7451 4.64973 15.3823 0.3125 10.0005 0.3125ZM10.0005 18.4375C5.33782 18.4375 1.51323 14.6854 1.51323 10C1.51323 5.36473 5.28749 1.5625 10.0005 1.5625C14.6631 1.5625 18.4877 5.31465 18.4877 10C18.4877 14.6353 14.7134 18.4375 10.0005 18.4375ZM15.5655 7.69684L8.47393 14.6903C8.28906 14.8726 7.99051 14.8714 7.80714 14.6876L4.43275 11.3059C4.24938 11.1221 4.25055 10.8253 4.43543 10.643L4.7702 10.3129C4.95507 10.1306 5.25362 10.1318 5.437 10.3155L8.14725 13.0317L14.5693 6.69848C14.7542 6.51617 15.0527 6.51734 15.2361 6.70113L15.5682 7.03395C15.7516 7.21773 15.7504 7.51453 15.5655 7.69684Z' fill='%2300B24A'/%3E%3C/svg%3E");
    }
    &.error {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10.0005 1.5625C14.6614 1.5625 18.4877 5.31543 18.4877 10C18.4877 14.6598 14.6916 18.4375 10.0005 18.4375C5.31503 18.4375 1.51323 14.6655 1.51323 10C1.51323 5.34363 5.30898 1.5625 10.0005 1.5625ZM10.0005 0.3125C4.61904 0.3125 0.255859 4.65168 0.255859 10C0.255859 15.3514 4.61904 19.6875 10.0005 19.6875C15.3819 19.6875 19.7451 15.3514 19.7451 10C19.7451 4.65168 15.3819 0.3125 10.0005 0.3125ZM9.54898 5H10.4519C10.72 5 10.9342 5.22195 10.923 5.48828L10.648 12.0508C10.6374 12.3019 10.4297 12.5 10.1768 12.5H9.82403C9.57126 12.5 9.36344 12.3018 9.35291 12.0508L9.07786 5.48828C9.06674 5.22195 9.28089 5 9.54898 5ZM10.0005 13.2812C9.39283 13.2812 8.90026 13.7709 8.90026 14.375C8.90026 14.9791 9.39283 15.4688 10.0005 15.4688C10.6081 15.4688 11.1007 14.9791 11.1007 14.375C11.1007 13.7709 10.6081 13.2812 10.0005 13.2812Z' fill='%23E12929'/%3E%3C/svg%3E");
    }
    &.alert {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='20' viewBox='0 0 24 20' fill='none'%3E%3Cpath d='M11.3014 6.25H12.6963C12.8299 6.25 12.936 6.35938 12.932 6.49219L12.6373 14.1484C12.6334 14.2734 12.5273 14.375 12.4016 14.375H11.5961C11.4703 14.375 11.3643 14.2773 11.3603 14.1484L11.0656 6.49219C11.0617 6.35938 11.1678 6.25 11.3014 6.25ZM12.0008 15.1562C11.3918 15.1562 10.9006 15.6445 10.9006 16.25C10.9006 16.8555 11.3918 17.3438 12.0008 17.3438C12.6098 17.3438 13.101 16.8555 13.101 16.25C13.101 15.6445 12.6098 15.1562 12.0008 15.1562ZM23.0617 17.1875L13.6354 0.9375C12.9124 -0.3125 11.0931 -0.3125 10.3662 0.9375L0.939893 17.1875C0.216906 18.4336 1.12064 20 2.57447 20H21.4311C22.877 20 23.7886 18.4375 23.0617 17.1875ZM21.4311 18.75H2.57054C2.08724 18.75 1.78469 18.2305 2.02437 17.8125L11.4546 1.5625C11.6943 1.14844 12.3034 1.14453 12.543 1.5625L21.9733 17.8125C22.2169 18.2266 21.9144 18.75 21.4311 18.75Z' fill='%23FFB200'/%3E%3C/svg%3E");
    }
}
.close {
    border: none;
    background-color: unset;
    cursor: pointer;
    width: 1.25rem;
    height: 1.25rem;
    justify-self: end;
    position: absolute;
    right: var(--callout-padding);
    top: var(--callout-padding);
    margin-right: 1px; //svg offset adjustment
}

.custom-callout {
    padding-bottom: 20px;
}