@use "_theme.scss";

.cart-item-duplicate-tooltip {
  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;
  position: fixed;
  z-index: 1;
  top:30px;
  width: 200px;
  max-width: 200px;
  translate: -50%;

  .cart-item-duplicate-tooltip-inner {
    padding: 20px;
    text-align: center;

    .cart-error-message {

      svg {
        margin: -3px 8px 0px 0px;
        fill: var(--color-error);

        @media (max-width: theme.$lg) {
          height: 12px;
        }
      }
    }


  }

  &::after {
    position: absolute;
    content: "";
    height: 15px;
    width: 15px;
    background: var(--white);
    border-bottom: inherit;
    border-right: inherit;
    transform: rotate(225deg);
    bottom: calc(100% - 7px);
    left: 50%;
    display: inherit;
    box-shadow: 1px 1px 3px -2px #d6d6d6;
    border: solid var(--color-line);
    border-width: 0 1px 1px 0;
  }
}

