@import "_theme.scss";

.cart-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: absolute;
  top: 57px;
  left: -15px;
  width: calc(100% + 30px);
  z-index: 2;

  @media (max-width: $lg) {
    width: 300px;
    top: auto;
    bottom: 60px;
    left: calc((100% - 300px)/2);
    box-shadow: 0 0 3px 1px #d6d6d6;
  }

  @media (max-width: $xs) {
    bottom: 63px;
    width: calc(100% - 40px);
    left: 20px;
  }

  .cart-tooltip-inner {
    .close {
      position: absolute;
      top: 10px;
      right: 10px;
      cursor: pointer;
      border: none;
      background: none;
      display: inherit;

      & svg {
        fill: var(--text-color-medium);
        width: 10px;
        height: 10px;
      }
    }

    .cart-error-message {
      padding: 30px 20px 20px 20px;

      @media (max-width: $lg) {
        padding: 20px;
      }

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

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

    .warn-message {
      padding: 20px;
      border-bottom: var(--color-line) solid 1px;
    }

    .tooltip-btn-container {
      display: flex;
      padding: 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      @media (max-width: $sm) {
        flex-wrap: nowrap;
      }

      .tooltip-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font-size: var(--text-size-regular);
        color: var(--button-secondary-text-color);
        height: 36px;
        white-space: nowrap;
      }

      .continue-btn {
        border: var(--button-secondary-border-color) solid 1px;
        border-radius: var(--button-border-radius);
        width: 100%;
      }

      .cancel-btn {
        margin-right: 15px;
        width: fit-content;
        align-items: start;
      }
    }
  }

  &: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;

    @media (max-width: $lg) {
      transform: rotate(45deg);
      top: calc(100% - 7px);
      bottom: auto;
    }
  }
}

.sticky-summary-less-part .cart-tooltip {
  bottom: 78px;
  left: calc((100% - 200px)/2);
  @media (max-width: $md) {
    bottom: 73px;
  }

  @media (max-width: $sm) {
    bottom: 65px;
    width: 200px;
    left: calc((100% - 100px)/2);
  }

  @media (max-width: $xs) {
    bottom: 65px;
    width: 160px;
    left: calc((100% - 80px)/2);
  }
}

.error {
  border-color: var(--color-error);
  box-shadow: none;
}

.hidden {
  display: none;
}
