.callout {
    // default color variables for callout
    --rocket-ui-callout-background-color: var(--rocket-color-grey-100);
    --rocket-ui-callout-text-color: var(--rocket-color-grey-700);
    --rocket-ui-callout-color: var(--rocket-color-grey-600);
    --rocket-ui-callout-close-icon-color: var(--rocket-color-grey-600);
    --rocket-ui-callout-title-color: var(--rocket-color-grey-700);

    // theme close color variables
    --rocket-ui-callout-close-button-color: var(--rocket-color-grey-600);
    --rocket-ui-callout-icon-color: var(--rocket-color-grey-700);

    // theme error color variables
    --rocket-ui-callout-error-color: var(--rocket-color-error-300);
    --rocket-ui-callout-icon-error-color: var(--rocket-color-error-400);

    // theme info color variables
    --rocket-ui-callout-info-color: var(--rocket-color-info-300);
    --rocket-ui-callout-icon-info-color: var(--rocket-color-info-400);

    // theme success color variables
    --rocket-ui-callout-success-color: var(--rocket-color-success-300);
    --rocket-ui-callout-icon-success-color: var(--rocket-color-success-400);

    // theme warning color variables
    --rocket-ui-callout-warning-color: var(--rocket-color-warning-300);
    --rocket-ui-callout-icon-warning-color: var(--rocket-color-warning-400);


    display: flex;
    padding: $rocket-spacing-size-3 $rocket-spacing-size-5;
    font-size: 1rem;
    column-gap: 0.75rem;
    background: var(--rocket-ui-callout-background-color);
    border-color: var(--rocket-ui-callout-color);
    border-style: solid;
    border-width: 2px 2px 2px 8px;
    border-radius: 4px;

    &__wrapper-icon {
        display: flex;
        flex-direction: column;
    }

    &__content {
        flex-grow: 1;
        width: 1%;
    }

    &__icon {
        path {
            stroke: var(--rocket-ui-callout-icon-color);
        }
    }

    &__title {
        color: var(--rocket-ui-callout-title-color);
        font-weight: 600;
        font-size: 1rem;
        line-height: 1.5;
    }

    &__text {
        color: var(--rocket-ui-callout-text-color);

        > * + * {
            margin-top: 1rem;
        }

        p, li {
            @extend %base-styles-text;
        }

        a {
            //@extend %base-styles-link;
        }
    }

    &__actions {
        margin-top: 0.625rem;
    }

    &__close {
        @include size(1.5rem);
        @include transition;

        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: var(--rocket-ui-callout-close-icon-color);
        border: none;
        cursor: pointer;

        svg {
            @include size(1em);

            display: block;
        }

        path {
            stroke: currentColor;
        }

        @include event {
            opacity: 0.6;
        }
    }

    &--error {
        --rocket-ui-callout-color: var(--rocket-ui-callout-error-color);
        --rocket-ui-callout-icon-color: var(
            --rocket-ui-callout-icon-error-color
        );
    }

    &--info {
        --rocket-ui-callout-color: var(--rocket-ui-callout-info-color);
        --rocket-ui-callout-icon-color: var(
            --rocket-ui-callout-icon-info-color
        );
    }

    &--success {
        --rocket-ui-callout-color: var(--rocket-ui-callout-success-color);
        --rocket-ui-callout-icon-color: var(
            --rocket-ui-callout-icon-success-color
        );
    }

    &--warning {
        --rocket-ui-callout-color: var(--rocket-ui-callout-warning-color);
        --rocket-ui-callout-icon-color: var(
            --rocket-ui-callout-icon-warning-color
        );
    }
}