.examples-menu {
    .i-header {
        padding: 0.75em;

        .i-title {
            margin: 0;
            font-size: 1.2em;
        }
        .i-description {
            margin: 0;
        }
    }

    .i-loading,
    .i-error {
        padding: 0.75em;
    }
    .i-error {
        .i-error-text {
            color: var(--P-error-text);
        }

        .i-retry-container {
            text-align: center;
            margin-top: 0.5em;
        }
    }

    .i-items {
        margin: 0;
        padding: 0;
        list-style: none;
        transition: opacity 0.3s;

        &.is-loading-example {
            opacity: 0.5;
            pointer-events: none;
        }

        .i-example-item {
            position: relative;
            padding: 0.5em 0.75em;

            &:not(:last-child)::after {
                position: absolute;
                content: '';
                left: 0.75em;
                right: 0.75em;
                bottom: 0;
                border-top: 1px solid var(--P-separator);
            }

            .i-inner {
                display: flex;
                gap: 0.5em;
                align-items: center;
            }

            .i-details {
                flex: 1;
                flex-basis: 0;

                .i-title {
                    font-weight: bold;
                }
            }
            .i-actions {
                flex-shrink: 0;
            }
        }
    }
}
