@use '_theme.scss';

.draft-sub-items-tooltip {
  .draft-sub-items-tooltip-popper.tooltip {
    max-width: none;
    border: none;
  }

  .draft-sub-items-details.tooltip-inner,
  .draft-sub-items-tooltip-inner {
    min-width: 200px;
    max-width: 300px;
    background-color: white;
    color: inherit;
    border: 1px solid var(--color-line);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 16px;
    text-align: left;
  }

  .draft-sub-items-tooltip.bs-tooltip-bottom .tooltip-arrow {
    color: white;
    width: 16px;
    height: 8px;
  }

  .draft-sub-items-tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-width: 8px 8px 0 8px;
    border-bottom-color: white;
    box-shadow: 0 1px 0 var(--color-line);
  }

  .draft-sub-items-details.tooltip-inner {

    .scroll-wrapper {
      max-height: 200px;
      overflow-y: auto;

      &.scroll-able {
        padding-right: 5px;
      }
    }

    .product-detail {
      margin-bottom: 15px;

      &:last-child {
        border-bottom: none;
        margin-bottom: 0;
      }

      .product-name {
        font-size: var(--text-size-regular);
        color: var(--text-color-ultra-dark);
      }

      .product-quantity {
        font-size: var(--text-size-fineprint);
        color: var(--text-color-medium);
      }
    }
  }

  .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
    width: 0;
    height: 0;
  }

  .bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
    width: 15px;
    height: 15px;
    margin-bottom: 0;
    top: 23px;
  }

  .bs-tooltip-auto .tooltip-inner::after {
    width: 100%;
    height: 30px;
    content: "";
    left: 0;
    position: absolute;
    background-color: transparent;
    top: -25px;
  }
}

.draft-sub-items {
  position: relative;
  display: inline-block;

  .title {
    font-size: var(--text-size-regular);
    position: relative;
  }
}


.draft-sub-items-trigger {
  display: inline-block;
}