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

: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;
}

frigate-card-thumbnail {
  height: var(--frigate-card-thumbnail-size);
  width: var(--frigate-card-thumbnail-size);
}
frigate-card-thumbnail[details] {
  width: var(--frigate-card-thumbnail-details-width);
}

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.vis-background {
  background-color: var(--primary-color);
  opacity: 0.1;
}

.vis-item:not(.vis-background) {
  cursor: pointer;
}
.vis-item.vis-background, .vis-labelset, .vis-time-axis {
  cursor: crosshair;
}
.vis-item:active {
  cursor: unset;
}

.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);
}

// Give an indication that the user can interact with the axes.
.vis-text.vis-minor, .vis-label {
  transition: background-color 0.5s ease-out;
}
.vis-text.vis-minor:hover, .vis-label:hover {
  background-color: var(--primary-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;

  // Use browser default font-family for tooltips.
  font-family: unset;
}