/* themes */

$themes: ("orange": $theme-orange, "blue": $theme-blue, "blue-red": $theme-blue-red, "dark": $theme-dark, "darkblue-blue": $theme-darkblue-blue, "violet": $theme-violet)

/* themes */

@each $theme, $map in $themes
  .theme-#{$theme}

    /* variables */

    $body-background-color: map-get($map, 'body-background-color')
    $body-color: map-get($map, 'body-color')
    $tag-a-color: map-get($map, 'tag-a-color')
    $tag-header-background-color: map-get($map, 'tag-header-background-color')
    $tag-input-focus-border-color: map-get($map, 'tag-input-focus-border-color')
    $tag-input-invalid-border-color: map-get($map, 'tag-input-invalid-border-color')
    $sidebar-background-color: map-get($map, 'sidebar-background-color')
    $primary-box-border-color: map-get($map, 'primary-box-border-color')
    $primary-button-background-color: map-get($map, 'primary-button-background-color')
    $primary-button-border-color: map-get($map, 'primary-button-border-color')
    $primary-button-color: map-get($map, 'primary-button-color')
    $primary-button-hover-background-color: map-get($map, 'primary-button-hover-background-color')
    $primary-button-hover-border-color: map-get($map, 'primary-button-hover-border-color')
    $navigation-item-hover-background-color: map-get($map, 'navigation-item-hover-background-color')
    $navigation-item-active-background-color: map-get($map, 'navigation-item-active-background-color')
    $navigation-item-active-border-color: map-get($map, 'navigation-item-active-border-color')
    $navigation-item-active-color: map-get($map, 'navigation-item-active-color')
    $navigation-subitem-border-color: map-get($map, 'navigation-subitem-border-color')
    $navigation-search-border-color: map-get($map, 'navigation-search-border-color')
    $custom-checkbox-background-color: map-get($map, 'custom-checkbox-background-color')
    $custom-checkbox-color: map-get($map, 'custom-checkbox-color')
    $highcharts-graph-color: map-get($map, 'highcharts-graph-color')
    $highcharts-point-color: map-get($map, 'highcharts-point-color')
    $highcharts-label-color: map-get($map, 'highcharts-label-color')
    $highcharts-label-hover-background-color: map-get($map, 'highcharts-label-hover-background-color')
    $highcharts-label-hover-color: map-get($map, 'highcharts-label-hover-color')
    $highcharts-label-active-background-color: map-get($map, 'highcharts-label-active-background-color')
    $highcharts-label-active-color: map-get($map, 'highcharts-label-active-color')
    $login-page-background-color: map-get($map, 'login-page-background-color')
    $terms-page-subheader-color: map-get($map, 'terms-page-subheader-color')
    $dropdown-background-color: map-get($map, 'dropdown-background-color')
    $dropdown-border-color: map-get($map, 'dropdown-border-color')
    $dropdown-item-color: map-get($map, 'dropdown-item-color')
    $dropdown-item-icon-color: map-get($map, 'dropdown-item-icon-color')
    $dropdown-item-hover-background-color: map-get($map, 'dropdown-item-hover-background-color')
    $dropdown-item-hover-color: map-get($map, 'dropdown-item-hover-color')
    $dropdown-item-hover-icon-color: map-get($map, 'dropdown-item-hover-icon-color')
    $dropdown-item-active-background-color: map-get($map, 'dropdown-item-active-background-color')
    $dropdown-item-active-color: map-get($map, 'dropdown-item-active-color')
    $dropdown-item-active-icon-color: map-get($map, 'dropdown-item-active-icon-color')
    $daterangepicker-border-color: map-get($map, 'daterangepicker-border-color')
    $daterangepicker-item-color: map-get($map, 'daterangepicker-item-color')
    $daterangepicker-item-hover-background-color: map-get($map, 'daterangepicker-item-hover-background-color')
    $daterangepicker-item-hover-color: map-get($map, 'daterangepicker-item-hover-color')
    $daterangepicker-item-active-background-color: map-get($map, 'daterangepicker-item-active-background-color')
    $daterangepicker-item-active-color: map-get($map, 'daterangepicker-item-active-color')
    $daterangepicker-cell-in-range-background-color: map-get($map, 'daterangepicker-cell-in-range-background-color')
    $daterangepicker-cell-in-range-color: map-get($map, 'daterangepicker-cell-in-range-color')
    $daterangepicker-cell-hover-background-color: map-get($map, 'daterangepicker-cell-hover-background-color')
    $daterangepicker-cell-hover-color: map-get($map, 'daterangepicker-cell-hover-color')
    $daterangepicker-cell-active-background-color: map-get($map, 'daterangepicker-cell-active-background-color')
    $daterangepicker-cell-active-color: map-get($map, 'daterangepicker-cell-active-color')
    $custom-select-border-color: map-get($map, 'custom-select-border-color')
    $custom-select-item-hover-background-color: map-get($map, 'custom-select-item-hover-background-color')
    $custom-select-item-hover-color: map-get($map, 'custom-select-item-hover-color')
    $custom-select-item-active-background-color: map-get($map, 'custom-select-item-active-background-color')
    $custom-select-item-active-color: map-get($map, 'custom-select-item-active-color')

    /* variables */

    color: $body-color
    background-color: $body-background-color

    header
      background-color: $tag-header-background-color
    a
      color: $tag-a-color

    .form-submitted input.ng-invalid,
    .form-submitted textarea.ng-invalid,
    textarea.ng-dirty.ng-invalid,
    .form-submitted .select-wrapper .select-title.ng-invalid,
    .select-wrapper .select-title.ng-dirty.ng-invalid,
    .form-submitted .row.ng-invalid input
      border-color: $tag-input-invalid-border-color

    .checkbox-list li input[type=checkbox]:checked + span
      color: $custom-checkbox-color

    .checkbox-list li input[type=checkbox]:checked + span
      background-color: $custom-checkbox-background-color

    .btn-primary
      background-color: $primary-button-background-color
      border-color: $primary-button-border-color
      color: $primary-button-color

    .highcharts-graph
      stroke: $highcharts-graph-color
    .highcharts-point
      fill: $highcharts-point-color

    ul.list-select li
      color: $highcharts-label-color

    ul.list-select li.active
      background-color: $highcharts-label-active-background-color
      color: $highcharts-label-active-color

    ul.list-select li:hover
      background-color: $highcharts-label-hover-background-color
      color: $highcharts-label-hover-color

    ul.list-select li.active
      background-color: $highcharts-label-active-background-color
      color: $highcharts-label-active-color

    .dark // TODO: naming ! REFACTOR THIS, it is background class at login page
      background-color: $login-page-background-color

    #aside
      background-color: $sidebar-background-color

    .dropdown-menu
      background-color: $dropdown-background-color
      border-color: $dropdown-border-color

    .dropdown-menu > li > a
      color: $dropdown-item-color

    .dropdown-menu > li > a > i
      color: $dropdown-item-icon-color

    .dropdown-menu > li > a:hover
      background-color: $dropdown-item-hover-background-color
      color: $dropdown-item-hover-color

    .dropdown-menu > li > a:hover > i
      color: $dropdown-item-hover-icon-color

    .dropdown-menu > li.active > a
      background-color: $dropdown-item-active-background-color
      color: $dropdown-item-active-color

    .dropdown-menu > li.active > a > i
      color: $dropdown-item-active-icon-color

    .daterangepicker .ranges li:hover
      background-color: $daterangepicker-item-hover-background-color
      color: $daterangepicker-item-hover-color

    .daterangepicker .ranges li.active
      background-color: $daterangepicker-item-active-background-color
      color: $daterangepicker-item-active-color

    .daterangepicker td.in-range
      background-color: $daterangepicker-cell-in-range-background-color
      color: $daterangepicker-cell-in-range-color

    .daterangepicker td.available:hover, .daterangepicker th.available:hover
      background-color: $daterangepicker-cell-hover-background-color
      color: $daterangepicker-cell-hover-color

    .daterangepicker td.active, .daterangepicker td.active:hover
      background-color: $daterangepicker-cell-active-background-color
      color: $daterangepicker-cell-active-color


    .navigation-sub-menu-content ul li a
      border-color: $navigation-subitem-border-color

    .sidebar-container .nav>li.active-child>a
      border-color: $navigation-subitem-border-color

    .navigation-sub-menu-search
      border-color: $navigation-search-border-color

    .btn-primary:focus,
    .btn-primary.focus,
    .btn-primary:hover
      background-color: $primary-button-hover-background-color
      border-color: $primary-button-hover-border-color

    .policy-page-content .sub-header
      color: $terms-page-subheader-color
