@use '_theme.scss';

.title-box {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  max-width: 100%;

  &.has-value {
    flex-direction: column;
  }

  .item-title {
    margin: 2px 0 0 0;
    max-width: 100%;

    .title-content {
      font-size: var(--text-size-label);
      color: var(--text-color-ultra-dark);
      white-space: nowrap;
      overflow: scroll;
      line-height: 1.3;
      margin: 0;

      &.wrap {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align: justify;
        text-align-last: left;
      }
    }
  }
}

.product-name-tooltip {
  .tooltip {
    padding: 20px;
    font-size: var(--text-size-regular);
    color: var(--text-color-medium);
    background-color: var(--white);
    border: 1px solid var(--color-line);
    box-shadow: 0 0 4px 0 #d6d6d6;
    border-radius: 7px;
  }
  .tooltip-inner {
    padding: 0;
    color: var(--text-color-medium);
  }
  .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    width: 15px;
    height: 15px;
    margin-bottom: -6px;
  }
  .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
    width: 15px;
    height: 15px;
    margin-top: -6px;
  }
}
