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

.Hint {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  font-size: $font-normal;
  line-height: 1;
  margin: 0 3px;

  &__target {
    cursor: pointer;
    color: $gray50;
    font-size: $font-normal;
  }

  &__block {
    position: absolute;
    z-index: layer('layout');
    width: 220px;
    transform: translateX(-50%) translateY(8px) translateZ(0);
  }

  &__content {
    display: block;
    left: 10px;
    box-sizing: border-box;
    padding: 15px 10px;
    color: $black;
    background-color: $badge-main-color;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.15;
    max-width: 220px;
    white-space: normal;
    text-align: left;
    font-weight: 400;

    &:before {
      position: absolute;
      bottom: 100%;
      left: 50%;
      display: block;
      width: 0;
      height: 0;
      content: '';
      border: 8px solid transparent;
      border-top-width: 0;
      border-bottom-color: $badge-main-color;
    }

    a {
      color: $action-color !important;

      &:hover {
        color: lighten($action-color, 10%) !important;
      }
    }
  }
}