

@mixin addThemeDefinition($theme) {
  #tutorial-pointer {
    background: #{map-get($theme, themeColor)};
  }

  #level-number-container {
    &.in-main-menu {
      background: #{map-get($theme, background)};
      border-color: #{map-get($theme, textColor)};
    }
  }
  .segment.segment-parent {
    border-color: #{map-get($theme, textColor2)};
    &.layer-2 {
      border-color: #{map-get($theme, textColor)};
    }
  }

  #site-content > :not(.won) .segment.locked {
    border-color: #{map-get($theme, lightThemeColor)};
    background-color: #{map-get($theme, themeColor)} !important;
    > .child-container > .segment-leaf {
      //border-color:  #{map-get($theme, lightThemeColor)};
      //background-color:#{map-get($theme, themeColor)} !important;
    }
  }
  .segment:not(.segment-row):not(.segment-triangle) {
    @for $i from 1 through length($rotationDegrees) {
      &.rotate-#{nth($rotationDegrees, $i)} {
        background-color: #{map-get($theme, background)};;
        > .child-container {
          > .segment {
            background-color: #{map-get($theme, background)};;

            @for $j from 1 through length($rotationDegrees) {
              $animationName: ((nth($rotationDegrees, $j)- nth($rotationDegrees, $i)+360)%360);
              @if $animationName==0 {
                $animationName: 360;
              }

              &.rotate-#{nth($rotationDegrees, $j)} {
                background-color: #{map-get($theme, background)};
              }
            }
          }
        }
      }
    }
  }
  //.setting-row{
  //  border-bottom: 1px solid  #{map-get($theme, textColor)};
  //  &:not(.hidden):first-child{
  //    border-top: 1px solid  #{map-get($theme, textColor)};
  //  }
  //}
}

body {
  @each $theme, $values in $themes {
    @if (map-get($values, class) == '') {
      @include addThemeDefinition($values)
    } @else {
      &.#{map-get($values, class)} {
        @include addThemeDefinition($values)
      }
    }
  }

  &.dark{
    .switch {
      input:checked + .slider{
        border-color:black;
      }
      .slider {
        border: solid 1px white;
        background-color: inherit;
        padding: 1px;
      }
    }
    #site-content > :not(.won) .segment.locked.layer-2 {
      border-color: #565656;
    }
    .modal{
      border: 1px solid white;
      border-radius: 2px;
    }
  }
  &.black{
    #site-content > :not(.won) .segment.locked {
      background-color: #9d9d9d !important;
      border-color: #6e6e6e !important;
      > .child-container > .segment-leaf {
        background-color: transparent !important;
      }
    }

    #logo{
      border: 1px solid grey;
      border-radius: 50%;
    }
  }
  label{
    font-size: 1em !important;

  }
  .setting-row:not(.hidden){
    line-height: 1;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    width: 100%;
    cursor: pointer;
    background: rgba(195, 195, 195, 0.13);
    display: inline-block;
  }
}
