@import 'variables';

$main-text: map-get($theme-colours, 'main');
$modal-text: map-get($modal, 'text');
$background: map-get($modal, 'background');
$sidebar: map-get($modal, 'sidebar');
$tab-active: map-get($modal, 'tab-active');
$photo-info: map-get($theme-colours, 'photo-info');
$modal-link: map-get($modal, 'modal-link');

$main-text-dark: map-get($theme-colours, 'secondary');
$modal-text-dark: map-get($theme-colours, 'main');
$background-dark: map-get($modal, 'background-dark');
$sidebar-dark: map-get($modal, 'sidebar-dark');
$tab-active-dark: map-get($modal, 'tab-active-dark');
$photo-info-dark: map-get($theme-colours, 'photo-info-dark');
$modal-link-dark: map-get($modal, 'modal-link-dark');

:root {
  --main-text: #{$main-text};
  --modal-text: #{$modal-text};
  --background: #{$background};
  --sidebar: #{$sidebar};
  --tab-active: #{$tab-active};
  --photo-info: #{$photo-info};
  --modal-link: #{$modal-link};
}

.dark {
  --main-text: #{$main-text-dark};
  --modal-text: #{$modal-text-dark};
  --background: #{$background-dark};
  --sidebar: #{$sidebar-dark};
  --tab-active: #{$tab-active-dark};
  --photo-info: #{$photo-info-dark};
  --modal-link: #{$modal-link-dark};
}
