@layer components {
    .rtds-note {
        @apply rtds-p-4 md:rtds-p-6 rtds-rounded-lg rtds-content-01;
    }

    .rtds-note__header {
        @apply rtds-border-b rtds-border-gray-01 rtds-pb-3 rtds-flex rtds-items-baseline;
    }

    .rtds-note__content {
        @apply rtds-py-3;
    }

    .rtds-note__content-item {
        @apply rtds-grid rtds-gap-2.5 rtds-py-3 first:rtds-pt-0 last:rtds-pb-0;
    }

    .rtds-note__content-item-title {
        @apply rtds-text-sm rtds-font-bold;
    }

    .rtds-note__content-item-description {
        @apply rtds-text-sm;
    }

    .rtds-note__content-item-description a {
        @apply rtds-underline rtds-content-02;
    }

    /* Callout */

    .rtds-note__icon {
        flex-shrink: 0;
        width: var(--spacing-5, 1.25rem);
        height: var(--spacing-5, 1.25rem);
        color: currentColor;
    }

    .rtds-note--callout {
        background-color: var(--note-callout-bg, var(--color-neutral-100));
        border-left: 4px solid var(--note-callout-border-color, var(--color-neutral-400));
        border-radius: 0 var(--border-radius-lg, 0.5rem) var(--border-radius-lg, 0.5rem) 0;
    }

    .rtds-note--callout-info {
        --note-callout-border-color: var(--color-info);
        --note-callout-icon-color: var(--color-content-info);
    }

    .rtds-note--callout-avviso {
        --note-callout-border-color: var(--color-warn);
        --note-callout-icon-color: var(--color-content-warn);
    }

    .rtds-note--callout-pericolo {
        --note-callout-border-color: var(--color-error);
        --note-callout-icon-color: var(--color-content-error);
    }

    .rtds-note--callout .rtds-note__icon {
        color: var(--note-callout-icon-color, var(--color-neutral-700));
    }

    .rtds-note--callout .rtds-note__header {
        @apply rtds-flex rtds-flex-row rtds-items-center rtds-gap-2;
    }
}