export default {
    variables: {
        colorScheme: {
            light: {
                navigator: {
                    backgroundHover: 'rgba(255, 255, 255, 0.1)',
                    color: '{surface.100}'
                },
                thumbnailNavigator: {
                    backgroundHover: '{surface.200}',
                    color: '{surface.600}',
                    colorHover: '{surface.700}'
                },
                thumbnailContainer: {
                    background: '{surface.50}'
                },
                caption: {
                    background: 'rgba(0, 0, 0, 0.5)',
                    textColor: '{surface.100}'
                },
                indicator: {
                    background: '{surface.200}',
                    backgroundHover: '{surface.300}',
                    backgroundActive: '{primary.color}'
                },
                insetIndicators: {
                    background: 'rgba(0, 0, 0, 0.5)'
                },
                insetIndicator: {
                    background: 'rgba(255, 255, 255, 0.4)',
                    backgroundHover: 'rgba(255, 255, 255, 0.4)',
                    backgroundActive: '{primary.color}'
                },
                mask: {
                    background: 'rgba(0,0,0,0.9)'
                },
                close: {
                    backgroundHover: 'rgba(255,255,255,0.1)',
                    color: '{surface.50}',
                    colorHover: '{surface.0}'
                }
            },
            dark: {
                navigator: {
                    backgroundHover: 'rgba(255, 255, 255, 0.1)',
                    color: '{surface.400}'
                },
                thumbnailNavigator: {
                    backgroundHover: '{surface.800}',
                    color: '{surface.400}',
                    colorHover: '{surface.300}'
                },
                thumbnailContainer: {
                    background: '{surface.950}'
                },
                caption: {
                    background: 'rgba(0, 0, 0, 0.5)',
                    textColor: '{surface.100}'
                },
                indicator: {
                    background: '{surface.200}',
                    backgroundHover: '{surface.300}',
                    backgroundActive: '{primary.color}'
                },
                insetIndicators: {
                    background: 'rgba(0, 0, 0, 0.5)'
                },
                insetIndicator: {
                    background: 'rgba(255, 255, 255, 0.4)',
                    backgroundHover: 'rgba(255, 255, 255, 0.4)',
                    backgroundActive: '{primary.color}'
                },
                mask: {
                    background: 'rgba(0,0,0,0.9)'
                },
                close: {
                    backgroundHover: 'rgba(255,255,255,0.1)',
                    color: '{surface.50}',
                    colorHover: '{surface.0}'
                }
            }
        }
    }
};