/*
  Cell Styles
  ------------------------------------------------------------------------------
*/

$cell--header-size: 26px;
$cell--header-button-color: $g5-pepper;
$cell--header-button-hover-color: $g13-mist;
$cell--header-button-active-color: $c-pool;

.cell {
  background-color: $g0-obsidian;
  border-radius: $radius;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
}

.cell--view {
  flex: 1 0 0;
  position: relative;
  overflow: hidden;
  height: 100%;

  > .single-stat {
    border-radius: $radius;
  }

  .time-series-container {
    padding-top: 0;
  }
}

.empty-graph-error--copy {
  z-index: 1;
  float: right;
}

.cell--view-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: $empty-state-text;
  @extend %no-user-select;
  overflow: hidden;

  &.error {
    font-size: 40px;
    color: $c-dreamsicle;
  }
}

.cell--error-message {
  white-space: normal;
}

.dashboard .cell--view-empty {
  top: $ix-marg-c + $cell--header-size;
}

.cell--header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  flex: 0 0 $cell--header-size;
}

.cell--draggable {
  flex: 0 0 $cell--header-size;
  width: $cell--header-size;
  height: $cell--header-size;
  position: relative;
}

.cell--dot-grid {
  position: absolute;
  width: $ix-border;
  height: $ix-border;
  top: 50%;
  transform: translate(-50%, -50%);

  &,
  &:before,
  &:after {
    border-radius: $ix-border / 2;
    background-color: $cell--header-button-color;
    transition: background-color 0.25s ease;
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &:before {
    transform: translateY(-200%);
  }
  &:after {
    transform: translateY(200%);
  }

  .cell:hover &,
  .cell:hover &:before,
  .cell:hover &:after {
    background-color: $cell--header-button-hover-color;
  }
}

.cell--dot-grid:nth-child(1) {
  left: calc(50% - 4px);
}
.cell--dot-grid:nth-child(2) {
  left: 50%;
}
.cell--dot-grid:nth-child(3) {
  left: calc(50% + 4px);
}
.cell--draggable:hover {
  cursor: move;

  .cell--dot-grid,
  .cell--dot-grid:before,
  .cell--dot-grid:after {
    background-color: $cell--header-button-active-color;
  }
}

.cell--context {
  flex: 0 0 $cell--header-size;
  width: $cell--header-size;
  height: $cell--header-size;
  border: 0;
  outline: none;
  background: none;
  transition: color 0.25s ease, 0.25s opacity ease;
  color: $cell--header-button-color;
  position: relative;

  > .cf-icon {
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cell:hover &:not(.cell--context__active) {
    color: $cell--header-button-hover-color;
  }

  .cell:hover &:hover,
  &.cell--context__active {
    cursor: pointer;
    color: $cell--header-button-active-color;
  }
}

.cell--context-menu {
  padding: $ix-marg-a;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.cell--context-item {
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  padding: $ix-marg-a + $ix-border $ix-marg-b;
  border-radius: $ix-radius - 1px;
  font-weight: 600;
  transition: color 0.25s ease, background-color 0.25s ease;

  > .cf-icon {
    margin-right: $ix-marg-b;
  }

  &:hover {
    cursor: pointer;
    color: $g20-white;
    background-color: $g5-pepper;
  }
}

.cell--context-item__danger {
  color: $c-dreamsicle;

  &:hover {
    color: $c-tungsten;
  }
}

.cell--context-item__confirm {
  &:hover {
    background-color: transparent;
  }
}

.cell--name {
  flex: 1 0 0;
  font-size: $ix-text-base;
  line-height: $ix-text-base;
  font-weight: 600;
  padding-right: $ix-marg-b;
  pointer-events: none;
}

.cell--note-indicator {
  position: relative;
  flex: 0 0 $cell--header-size;
  width: $cell--header-size;
  height: $cell--header-size;
  cursor: default;
  color: $cell--header-button-color;
  transition: color 0.25s ease, opacity 0.25s ease;

  & > .cf-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .cell:hover &:not(.cell--note-indicator__active) {
    color: $cell--header-button-hover-color;
  }

  &.cell--note-indicator__active,
  &:hover,
  .cell:hover &:hover {
    cursor: pointer;
    color: $cell--header-button-active-color;
  }
}

.time-series-container {
  width: 100%;
  height: 100%;
  padding: $ix-marg-b;

  &.time-series-container--alert-check {
    padding-right: $ix-marg-b + 30px;
    padding-bottom: $ix-marg-b + $event-marker-height;
    overflow: hidden;
  }
}

.giraffe-tooltip-container {
  z-index: $z--dygraph-legend;
}

/* Drag & Resize State */
.react-grid-item.resizing,
.react-grid-item.react-draggable-dragging {
  .cell--context,
  .cell--note-indicator {
    opacity: 0;
  }
}

/* Presentation Mode */
.presentation-mode {
  .cell--context {
    display: none;
  }
}
