@import '../../styles/common.scss';

$pop-up-arrow-extrusion: -7px;

.root {
  display: inline-block;

  .icon {
    height: 20px;
    width: 20px;

    polygon,
    polyline,
    path,
    circle {
      stroke: var(--infotooltip-icon-color, $infotooltip-icon-color);
    }
  }
}

.container {
  @include boxSizing;

  box-sizing: border-box;
  min-height: 50px;
  max-width: 650px;
  display: grid;
  grid: min-content 1fr / 1fr;
  width: max-content;

  background-color: var(
    --infotooltip-background-color,
    $infotooltip-background-color
  );

  color: var(--infotooltip-text-color, $infotooltip-text-color);
  padding: 15px;

  z-index: 9999;

  .arrow,
  .arrow::before {
    position: absolute;
    width: 14px;
    height: 14px;
    background: inherit;
  }

  .arrow {
    z-index: -1;
    visibility: hidden;

    background-color: var(
      --infotooltip-background-color,
      $infotooltip-background-color
    );
  }

  .arrow::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }

  &[data-popper-placement^='top'] {
    > .arrow {
      bottom: $pop-up-arrow-extrusion;
    }
  }

  &[data-popper-placement^='bottom'] {
    > .arrow {
      top: $pop-up-arrow-extrusion;
    }
  }

  &[data-popper-placement^='left'] {
    > .arrow {
      right: $pop-up-arrow-extrusion;
    }
  }

  &[data-popper-placement^='right'] {
    > .arrow {
      left: $pop-up-arrow-extrusion;
    }
  }
}

.info-tooltip-enter {
  opacity: 0;
}
.info-tooltip-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}
.info-tooltip-exit {
  opacity: 1;
}
.info-tooltip-exit-active {
  opacity: 0;
  transition: opacity 500ms ease-out;
}
