iterative/vscode-dvc

@import '../../../shared/variables';
@import '../../../shared/mixins';

.copyButton {
  display: none;
  position: absolute;
  right: 0;
  top: 0;
}

.tooltipColumn {
  padding: 4px;

  &:first-child {
    text-align: left;
  }

  &:nth-child(2) {
    padding-right: 0;
  }

  &.depsKey {
    color: $deps-color;
  }

  &.metricsKey {
    color: $metrics-color;
  }

  &.paramsKey {
    color: $params-color;
  }

  svg {
    display: block;
    min-width: 100%;
    min-height: 100%;
  }

  .copyButton {
    opacity: 0;
    display: inline-block;
    position: static;
    vertical-align: top;
    font-size: 0.8125rem;
  }

  &:hover .copyButton {
    opacity: 1;
  }
}

.tooltipTableDescription {
  margin: 4px 0 0 4px;
  color: $description-color;
  font-size: 0.75rem;
  max-width: 250px;

  .infoIcon {
    margin-right: 3px;
    color: $fg-color;
    vertical-align: text-top;
    min-width: 14px;
    min-height: 14px;
  }
}

.buttonAsLink {
  @extend %buttonAsLink;
}

.commitMessage {
  display: flex;
  align-items: center;
  margin: 0;

  &.addTopBorder {
    margin: 1em 0;
    padding-top: 1em;
    border-top: 1px solid $tooltip-border;
  }
}

.addBottomBorder {
  padding-bottom: 1em;
  border-bottom: 1px solid $tooltip-border;
}

.block {
  border-left-style: solid;
  border-left-width: 3px;
  background-color: $plot-block-bg-color;
  color: $fg-color;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;

  svg {
    fill: $fg-color;
    display: block;
  }

  &:hover .copyButton {
    display: inline;
    font-size: 0.8125rem;
  }

  .iconPlaceholder {
    margin-left: -4px;
    height: 18px;
    width: 18px;
    color: $error-color;
    text-align: center;
  }

  .fetching {
    height: 18px;
    width: 18px;
  }

  .infoIcon {
    margin-left: 5px;
  }
}

.label {
  height: 26px;
  padding: 2px 4px;
  background-color: transparent;
  border: none;
  text-align: left;
  color: $fg-color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: max-content;
  line-height: 1.1;
}

.title {
  display: inline-flex;
  align-items: center;
  padding-right: 15px;
  position: relative;
  font-size: 0.8rem;
}

.subtitle {
  color: $watermark-color;
  font-size: 0.5625rem;
}

.clearButton {
  background-color: transparent;
  border: none;
  padding: 3px;
  opacity: 0;

  .block:hover & {
    opacity: 1;
  }

  :hover {
    background-color: $row-bg-alt-color;
  }
}

.ribbon {
  position: sticky;
  transition: box-shadow 0.25s;
  z-index: 100;
  top: 0;
  background-color: $bg-color;
  border-bottom: 1px solid $border-color;
  padding: 10px 15px;

  &.withShadow {
    box-shadow: 0 5px 8px -2px $shadow;
  }
}

.list {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  width: 100%;
}

.buttonWrapper {
  list-style: none;
}

.tooltipPathWrapper {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  display: block;
  white-space: nowrap;
}

.errors {
  margin: 10px 0 0;
  color: $error-color;
  border-top: 1px solid $error-color;
  border-bottom: 1px solid $error-color;
  display: flex;
  width: 100%;
}

.errorsIcon {
  margin-right: 3px;
  vertical-align: bottom;
}

.errorsButton {
  @extend %buttonAsLink;

  color: inherit;
  font-weight: 600;
  padding: 6px 0;

  &:hover {
    color: inherit;
    text-decoration: underline;
  }
}