@import "variables_dark";

body.dark {
  background: $colorBG;

  ::selection {
    background: $colorSelection;
    color: white;
  }

  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px $colorScrollbarShadow;
    -moz-box-shadow: inset 0 0 6px $colorScrollbarShadow;
    box-shadow: inset 0 0 6px $colorScrollbarShadow;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $colorScrollbarBG;
    outline: 1px solid $colorScrollbarColor;
  }

  a {
    color: $colorTitle;

    &:hover {
      color: $colorLinkTitle;
    }
  }

  .DPXGithubRatingButton { 
    background: $dpxgithubrating-bg;
    color: $dpxgithubrating-color;
    border: 1px solid $dpxgithubrating-border;

    b {
      border-right: 2px solid $dpxgithubrating-border;
    }

  }

  header {

    #section-right {

      img {
        filter: invert(1);
      }

      p {
        color: $colorSubtitle;
      }

    }

    #section-left {

      #mode-switch span {
        background-color: $colorModeLightSwitchBG;
        box-shadow: 0 2px 10px $colorSpanBoxShadow;
      }

      #mode-switch span:before {
        background-color: $colorModeLightSwitchBG;
      }

      #mode-switch span:after {
        background-color: $colorModeSwitchBG;
      }

      #mode-switch input[type="checkbox"]:checked + span {
        background-color: $colorModeSwitchBG;
      }

      #mode-switch input[type="checkbox"]:checked + span:before {
        background-color: $colorModeSwitchBG;
      }

      #mode-switch input[type="checkbox"]:checked + span:after {
        background-color: $colorModeLightSwitchBG;
      }

    }

  }

  #main-container {

    header {

      p {
        color: $colorSubtitle;
      }

      .hint {
        color: $colorParagraph;
      }

    }

    section.section-holder {
      border-bottom: 2px solid $colorSectionHolderBorder;

      h1, h2 {
        color: $colorParagraph;

        &:hover {
          color: $colorLinkTitle;
        }
      }

      h1 {
        color: $colorSubtitle;
      }

      &.subject {
        span {
          border-top: 6px dotted $colorBorderDividerSubject;
        }
      }

      p {
        color: $colorParagraph;
      }

      .section-container {

        .section-code {

          span.caption {
            background: $colorSectionCaptionBG;
            color: $colorSectionCaptionText;
          }

        }

      }
    }

  }

  kbd {
    background: $colorKBDBg;
    color: $colorKBDText;
  }

  .terminal {
    background: $colorTerminalBG;

    .widgets {

      &:before {
        background: $colorWidgetsGreen;
        box-shadow: 20px 0 0 $colorWidgetsYellow, 40px 0 0 $colorWidgetsRed;
      }

    }

  }

  span.divider {
    color: $colorParagraph;
  }

  .caution {
    color: $colorParagraph;
    border-top: 6px dotted $colorBorderDividerSubject;
  }

  footer {

    p {
      color: $colorParagraph;

      b {
        color: $colorRedCopyright;
      }
    }

    #contribute {
      color: $colorLinkTitle;
    }

    #EM-Copyright {
      background: $colorWhiteCopyright;
      border: 1px solid $colorRedCopyright;

      svg {

        path {
          transition: 0.15s all;
          fill: $colorRedCopyright;
        }

      }

      &:hover {
        background: $colorRedCopyright;
        color: $colorWhiteCopyright;
        border-color: $colorWhiteCopyright;

        svg {
          path {
            fill: $colorWhiteCopyright;
          }
        }

      }
    }

  }

  @import "electron-light";

}