@import '../../../themes/index.scss';

$prefix: '.#{$base-prefix}-free-tooltip-';

$container-padding: getVar(widgets-tooltip-padding, $widgets-tooltip-padding);
$scrollbar-thumb-color: getVar(widgets-tooltip-cross-line, $widgets-tooltip-cross-line);
$scrollbar-bg-color: getVar(widgets-color-decoration-background, $widgets-color-decoration-background);
$lock-icon-color: getVar(widgets-color-gray, $widgets-color-gray);
$lock-background: getVar(widgets-color-container-background, $widgets-color-container-background);

#{$prefix}container {
  background: getVar(widgets-tooltip-background, $widgets-tooltip-background);
  border-radius: getVar(widgets-tooltip-corner-radius, $widgets-tooltip-corner-radius);
  box-shadow: getVar(widgets-tooltip-shadow, $widgets-tooltip-shadow);
  padding: $container-padding;
  font-family: getVar(widgets-font-family-txd-m-number, $widgets-font-family-txd-m-number);
  font-size: getVar(widgets-font-size-1, $widgets-font-size-1);
  color: getVar(widgets-tooltip-text, $widgets-tooltip-text);

  #{$prefix}title {
    color: getVar(widgets-tooltip-title, $widgets-tooltip-title);
    margin-bottom: 8px;
    white-space: pre-line;
  }

  #{$prefix}items-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 25vw;
    max-height: 50vh;
    overflow-y: auto;
    padding-right: $container-padding;
  }

  #{$prefix}item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  #{$prefix}name-container {
    display: flex;
    align-items: center;
  }

  #{$prefix}marker {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    margin-right: 4px;
  }

  #{$prefix}name {
    text-wrap: pretty;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: break-word;
  }
}

/*滚动条整体样式*/
#{$prefix}items-container::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

/*滚动条里面小方块*/
#{$prefix}items-container::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: $scrollbar-thumb-color;
}

/*滚动条里面轨道*/
#{$prefix}items-container::-webkit-scrollbar-track {
  background: $scrollbar-bg-color;
}

#{$prefix}lock-container {
  position: absolute;
  right: 0;
  top: 0;

  svg {
    fill: $lock-icon-color;
  }
}

#{$prefix}lock-icon-background {
  position: absolute;
  right: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 12px solid $lock-background;
  border-right: 12px solid $lock-background;
  border-left: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

#{$prefix}lock-icon-container {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1002;
}