openfoodfoundation/openfoodnetwork

@import "variables/variables";

.unit-price {
  display: flex;
  align-items: center;
}

.question-mark-icon {
  background-image: url("../images/question-mark-icon.svg");
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: 50%;
  cursor: pointer;

  // Reset button element css attributes
  padding: 0;
  margin: 0;
  width: 20px;
  min-width: 20px;
  height: 20px;
  background-color: transparent;

  &:hover,
  &:focus {
    background-color: transparent;
  }

  &.open {
    background-image: none;
    background-color: $teal-500;

    &:focus {
      outline: 0;
    }

    &::before {
      @include icon-font;
      content: "";
      color: $white;
      vertical-align: super;
    }
  }
}

// Question mark icon into a field
.field .question-mark-icon {
  width: 15px;
  min-width: 15px;
  height: 15px;
  margin-left: 2px;
}

@mixin joyride-content {
  background-color: $dynamic-blue;
  padding: $padding-small;
  border-radius: $radius-small;
  color: $white;
  width: 100%;
  font-size: 0.8rem;
}

$joyride-width: 16rem;

.joyride-tip-guide.question-mark-tooltip {
  width: $joyride-width;
  max-width: 65%;
  // JS needs to be tweaked to adjust for left alignment - this is dynamic can't rewrite in CSS
  margin-left: -7.4rem;
  margin-top: -0.1rem;
  background-color: transparent;
  z-index: $modal-zIndex + 1;

  .background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    cursor: pointer;
  }

  .joyride-content-wrapper {
    @include joyride-content;
  }

  .joyride-nub.bottom {
    // Need to rewrite all with !important as it's marked as !important in the original file
    border-color: $dynamic-blue !important;
    border-bottom-color: transparent !important;
    border-left-color: transparent !important;
    border-right-color: transparent !important;
    left: 7.4rem;
    z-index: -1;
  }

  &.cart-sidebar {
    // Small size (used in the cart sidebar)
    width: 13rem;
    margin-left: -10.4rem;

    .joyride-nub.bottom {
      left: 10.4rem;
    }
  }
}