/* Set the width to 100% instead of using flex. This prevents auto-expanding width of timeline. */
.layout__region--top {
  width: 100%;
}

.sg-table-header-cell,
.column-header-cell {
  font: var(--gin-font) !important;
}
.sg-table-header-cell {
  font-size: var(--gin-font-size-m) !important;
  font-weight: var(--gin-font-weight-bold) !important;
}
.column-header-cell {
  font-size: var(--gin-font-size-s) !important;
  font-weight: var(--gin-font-weight-normal) !important;
}

.sg-task {
  --task-bg-color: #74bfff;
  box-shadow: var(--gin-shadow-l1);
  background-color: var(--task-bg-color) !important;
  border-left: 2px solid #666666;
}
.sg-task:hover {
  background-color: var(--task-bg-color) !important;
}
.sg-task-selected {
  box-shadow: inset 0 0 0 1px var(--gin-color-focus-border), inset 0 0 0 4px var(--gin-color-focus), var(--gin-shadow-l2);
}

.sg-task .sg-task-content {
  color: var(--gin-color-text-light);
}

.sg-task.last-location,
.sg-task.last-location:hover {
  background-color: unset !important;
  background: linear-gradient(90deg, var(--task-bg-color), rgba(255,255,255,0));
}

.sg-task.log {
  margin-top: 4px;
  margin-left: -5px;
  width: 10px !important;
  height: 10px !important;
  background-color: var(--task-bg-color);
  border: 2px solid var(--task-bg-color);
  border-radius: 50% !important;
}
.sg-task.log.sg-task-selected {
  --task-bg-color: var(--gin-color-focus);
  background-color: var(--task-bg-color);
  border: none;
}

.sg-task.log--status-pending {
  background-color: transparent !important;
}

.sg-task.log--activity {
  --task-bg-color: #f1c40f;
}
.sg-task.log--harvest {
  --task-bg-color: #e67e22;
}
.sg-task.log--input {
  --task-bg-color: #9b59b6;
}
.sg-task.log--observation {
  --task-bg-color: #2980b9;
}
.sg-task.log--seeding {
  --task-bg-color: #2ecc71;
}
.sg-task.log--transplanting {
  --task-bg-color: #2ecc71;
}

.sg-popup {
  z-index: 1000;
  background-color: var(--gin-bg-layer);
  border: 1px solid var(--gin-border-color-layer);
  box-shadow: var(--gin-shadow-l2);
  border-radius: var(--gin-border-s);
  padding: var(--gin-spacing-xs);
  font-size: var(--gin-font-size-s);
}

.sg-tree-expander {
  /*@TODO do this properly.*/
  mask-image: url('/themes/gin/dist/media/sprite.svg#handle-view');
  -webkit-mask-image: url('/themes/gin/dist/media/sprite.svg#handle-view');
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  margin-right: 0.5em;
  background-color: var(--gin-color-text);
  transform: rotate(90deg);
  transition: transform var(--details-transform-transition-duration) ease-in 0s;
}
.sg-row-expanded .sg-tree-expander {
  transform: rotate(270deg);
}
