@import '../../styles/variables';

.Tooltip {
  $pin-color: $action-color;
  $pin-radius: 15px;
  $sub-pin-radius: 10px;
  $pin-distance: 22px;

  position: absolute;
  z-index: 9999;
  max-width: 250px;

  @keyframes fade-in {
    0% {
      opacity: 0;
      visibility: hidden;
    }

    1% {
      visibility: visible;
    }

    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }

    99% {
      visibility: visible;
    }

    100% {
      opacity: 0;
      visibility: hidden;
    }
  }

  &.open {
    animation: fade-in 1 forwards;
  }

  &.closed {
    animation: fade-out 1 forwards;
  }

  &__content {
    position: relative;
    z-index: 2;
    padding: 10px;
    border: solid 1px #d9d9d9;
    background-color: $white;
    box-shadow: 0 3px 8px 0 rgba(0, 0, 0, .15);

    &__title {
      margin: 0 0 8px;
      padding-right: $spacing * 8;
      font-weight: bold;
    }
    &__text {
      margin-bottom: $spacing * 4;
      color: $gray20;
      font-size: $font-small;
    }

    &-table {
      border-spacing: 0;
      border-collapse: separate;

      &-block {
        max-width: 200px;
      }

      &-value {
        padding-left: $item;

        &_recommended {
          color: $success-color;
        }
      }
    }

    &-table-note {
      color: $error-color;
      font-size: $font-small;
      line-height: 1.29;
      padding-top: $item;
    }
  }

  &__close-button {
    position: absolute;
    top: 2px;
    right: $spacing * 2;
    padding: 0;
    cursor: pointer;
    color: $gray50;
    border: 0;
    outline: none;
    background: transparent;

    &:hover {
      color: $action-color;
    }
  }

  &__pin {
    position: absolute;
    z-index: 1;
    width: $pin-radius;
    height: $pin-radius;
    margin-top: -($pin-radius/2);
    border-radius: 50%;
    background: $pin-color;
    box-shadow: 0 0 0 2px white;

    &::before {
      position: absolute;
      width: 30px;
      height: 1px;
      content: '';
      background: $pin-color;
    }

    &::after {
      position: absolute;
      display: block;
      width: $sub-pin-radius;
      height: $sub-pin-radius;
      content: '';
      border-radius: 50%;
      background: $pin-color;
      box-shadow: 0 0 0 rgba(23, 135, 252, .4);
    }
  }

  &__buttons {
    display: flex;
    text-align: right;
    flex-wrap: wrap;
    justify-content: flex-end;

    button {
      height: auto;
      margin: $spacing;
      padding: 0 10px;
      font-size: $font-small;
      line-height: 24px;
      flex-shrink: 1;
    }
  }

  &__right {
    .Tooltip__content {
      transform: translate($pin-distance, -50px);
    }

    .Tooltip__pin {
      top: 0;
      left: -($pin-radius/2);

      &::before {
        top: ($pin-radius/2);
        left: 0;
      }

      &::after {
        top: 2px;
        left: 2px;
      }
    }
  }

  &__left {
    .Tooltip__content {
      transform: translate(-$pin-distance, -50px);
    }

    .Tooltip__pin {
      top: 0;
      right: -($pin-radius/2);

      &::before {
        top: ($pin-radius/2);
        right: 0;
      }

      &::after {
        top: 2px;
        right: 2px;
      }
    }
  }

  &__top {
    .Tooltip__content {
      transform: translate(0px, -$pin-distance);
    }

    .Tooltip__pin {
      bottom: -($pin-radius/2);
      left: 50%;
      margin-left: floor(-($pin-radius/2));

      &::before {
        bottom: 0;
        left: 50%;
        width: 1px;
        height: 30px;
        margin-left: -1px;
      }

      &::after {
        bottom: 2px;
        left: 2px;
      }
    }
  }

  &__bottom {
    .Tooltip__content {
      transform: translate(0, $pin-distance);
    }

    .Tooltip__pin {
      top: 0;
      left: 50%;
      margin-left: floor(-($pin-radius/2));

      &::before {
        top: 0;
        left: 50%;
        width: 1px;
        height: 30px;
        margin-left: -1px;
      }

      &::after {
        left: 50%;
        top: 50%;
        margin-left: floor(-($sub-pin-radius/2));
        margin-top: floor(-($sub-pin-radius/2));
      }
    }
  }
}