.core-error-info {
    background: var(--gray-200);
    border-radius: var(--small-radius);
    font-size: var(--font-size-sm);
    color: var(--gray-900);

    p:first-child {
        margin-top: 0;
    }

    p:last-child {
        margin-bottom: 0;
    }

    .core-error-info--code {
        padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
        font-size: var(--font-size-normal);
    }

    .core-error-info--details p {
        padding: var(--spacing-2) var(--spacing-2) 0 var(--spacing-2);
        color: var(--gray-500);
    }

    .core-error-info--checkbox {
        display: none;

        & + .core-error-info--details,
        & + .core-error-info--code + .core-error-info--details {
            max-height: 0;
            overflow: hidden;
            transition: max-height 600ms ease-in-out;

            & + .core-error-info--toggle {
                display: flex;
                padding: var(--spacing-2);
                min-height: var(--a11y-min-target-size);
                align-items: center;

                span {
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                }

                svg {
                    fill: currentColor;
                    width: 11px;
                }

                .core-error-info--hide-content {
                    display: none;
                }

            }

        }

        &:checked + .core-error-info--details,
        &:checked + .core-error-info--code + .core-error-info--details {
            max-height: 110px;

            & + .core-error-info--toggle .core-error-info--hide-content {
                display: flex;
            }

            & + .core-error-info--toggle .core-error-info--show-content {
                display: none;
            }

        }

    }

}
