@layer components {
    .devices-list {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-6);
        align-items: center;
        justify-content: center;
        padding: var(--spacing-20) 0 var(--spacing-16);

        .device-item {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: var(--spacing-2);

            .device-icon {
                opacity: 0.8;
                height: 2rem;
            }
            .device-msg {
                color: var(--color-text-secondary);
            }
            &.not-available {
                .device-icon {
                    opacity: 0.2;
                }
                .device-msg {
                    color: var(--color-text-muted);
                }
            }
        }
        .device-image-list {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 0;
        }
    }
}