@import '../settings/variables';
@import '../tools/mixins/position';
@import '../tools/mixins/transition';
@import '../utilities/utils';

.c-hover-info {
  cursor: pointer;
  display: inline-flex;
  position: relative;
  text-align: left;
  font-size: 0.875rem;

  &--numeric-alignment {
    top: -0.0625em;
  }

  &__icon {
    padding-right: 0.25em;
    color: inherit;
    vertical-align: middle;
  }

  &__content {
    @include shadow-bordered-area(0.5em);
    @include absolute(100%, auto, auto, auto);
    @include transition((opacity, visibility));
    margin-top: $margin-tiny;
    opacity: 0;
    overflow: hidden;
    padding: 1.5rem;
    visibility: hidden;
    width: auto;
    z-index: $layer-modal;
    font-size: $font-size-caption;
    font-weight: $font-weight-normal;
    text-transform: initial;
    color: $color-secondary-dark;
    min-width: $min-hover-info-width;
    letter-spacing: initial;
    line-height: 1.5em;

    &:first-letter {
      text-transform: capitalize;
    }

    &--position-right,
    &--position-left {
      margin-top: 0;
      top: -1.375em;
    }

    &--position-right {
      left: 100%;
      margin-left: 0.75em;
    }

    &--position-left {
      right: 100%;
      margin-right: 0.75em;
    }

    &--position-top {
      transform: translate(-50%, calc(-100% - 2em));
    }
    &--box-styling {
      border-radius: 2px;
      padding: 1em 2.1em;
      min-width: 0;
    }
    &--off-hire {
      min-width: 0;
    }
  }

  &:hover > &__content {
    opacity: 1;
    visibility: visible;
  }

  &:hover > &__icon {
    color: $color-paragraph;
  }

  @media print {
    display: none;
  }
}