/*
  Light Mode for Dashboards
  ------------------------------------------------------------------------------
*/

.clockface--app-wrapper.dashboard-light-mode {
  background-color: $g18-cloud;
  color: $g8-storm;

  .cf-page-contents > .cf-dapper-scrollbars--track-y {
    background-color: $g15-platinum !important;
  }

  .cf-page--sub-title {
    color: $g13-mist;
  }

  .cell {
    background-color: $g20-white;
  }

  .cell--dot-grid,
  .cell--dot-grid:before,
  .cell--dot-grid:after {
    background-color: $g13-mist;
  }

  .cell:hover .cell--dot-grid,
  .cell:hover .cell--dot-grid:before,
  .cell:hover .cell--dot-grid:after {
    background-color: $g8-storm;
  }

  .cell:hover .cell--draggable:hover .cell--dot-grid,
  .cell:hover .cell--draggable:hover .cell--dot-grid:before,
  .cell:hover .cell--draggable:hover .cell--dot-grid:after {
    background-color: $c-pool;
  }

  .cell--context  {
    color: $g13-mist;
  }
  .cell:hover .cell--context {
    color: $g8-storm;
  }
  .cell:hover .cell--context:hover,
  .cell .cell--context.cell--context__active,
  .cell:hover .cell--context.cell--context__active {
    color: $c-pool;
  }

  .cell--note-indicator {
    color: $g13-mist;

    &.cell--note-indicator__active,
    &:hover,
    .cell:hover &:hover {
      color: $c-pool;
    }
  }

  .markdown-format {
    color: $g7-graphite;

    code {
      background-color: $g19-ghost;
      color: $c-star;
    }

    pre {
      background-color: $g19-ghost;
    }
  }

  .markdown-cell .cf-dapper-scrollbars--track-y {
    background-color: $g17-whisper !important;
  }

  .cell--view-empty {
    color: $g11-sidewalk;
  }
  .variables-control-bar--empty,
  .variables-control-bar--full {
    background-color: $g20-white;
  }
}

/*
  Light Mode Cells
  ------------------------------------------------------------------------------
*/

.clockface--app-wrapper.dashboard-light-mode {
  .react-resizable-handle {
    border-right-color: $g14-chromium;
    border-bottom-color: $g14-chromium;

    &:before,
    &:after {
      background-color: $g20-white;
    }

    &:hover {
      border-right-color: $c-comet;
      border-bottom-color: $c-comet;
    }
  }
  .react-grid-item.resizing .react-resizable-handle,
  .react-grid-item.react-draggable-dragging .react-resizable-handle {
    opacity: 1;
    border-right-color: $c-comet;
    border-bottom-color: $c-comet;
  }
}
