@use 'vis-timeline/dist/vis-timeline-graph2d.css';
@use 'drawer';

:host {
  width: 100%;
  height: 100%;
  background-color: var(--card-background-color);
  padding-bottom: 5px;

  // Share the screen space with thumbnails that may be above/below.
  display: flex;
  flex-direction: column;

  // So that absolute sidedrawer is relative to this host.
  position: relative;
}

div.timeline {
  flex: 1;
}
div.timeline.left-margin {
  // Clearance for the drawer button.
  margin-left: calc(drawer.$drawer-icon-size + 1px);
}
div.timeline.right-margin {
  // Clearance for the drawer button.
  margin-right: calc(drawer.$drawer-icon-size + 1px);
}

.vis-text {
  color: var(--primary-text-color) !important;
}

.vis-timeline {
  border: none;
}

.vis-labelset .vis-label {
  // Group labels.
  color: var(--primary-text-color);
}

.vis-item {
  border-color: var(--primary-color);
  background: none;
  color: var(--primary-text-color);
  background-color: var(--primary-color);
}

.vis-item:hover {
  // Float icons upwards when the user hovers over them.
  z-index: 2;
}

.vis-item.vis-box {
  border: none;
}

.vis-item .vis-item-content {
  padding: 0px;
}

.vis-item.vis-cluster {
  border-style: dotted;
  color: var(--primary-text-color);
  background-color: var(--primary-background-color);
  box-shadow: 0px 0px 5px 1px var(--primary-color);
}

.vis-time-axis .vis-grid.vis-minor {
  border-color: var(--secondary-color);
}

.vis-time-axis .vis-grid.vis-major {
  border-color: var(--secondary-color);
}

.vis-label {
  display: flex;
  justify-content: center;
  align-items: center;
}

div.vis-tooltip {
  padding: 0px;
  background-color: unset;
  border: none;
}