@import '../settings/variables';
@import '../tools/mixins/transition';

.c-custom-title {
  &__info {
    display: flex;
    position: relative;
    text-align: center;

    &:hover > .c-custom-title__info-content {
      opacity: 1;
      visibility: visible;
    }

    @media print {
      display: none;
    }
  }

  &__info-content {
    display: flex;
    white-space: nowrap;
    @include transition((opacity, visibility));
    opacity: 0;
    visibility: hidden;
    background-color: $color-secondary-dark;
    border-radius: 2px;
    padding: 0.4em 0.8em;
    z-index: 6;
    &::after {
      content: '';
      position: absolute;
      display: flex;
      border-width: 8px;
      border-style: solid;
      border-color: $color-secondary-dark transparent transparent transparent;
      z-index: 6;
    }

    &--position-top {
      @include absolute(0, auto, auto, 50%);
      transform: translate(calc(-50%), calc(-100% - 0.75em));
      &::after {
        @include absolute(calc(100% - 2px), auto, auto, calc(50% - 8px));
      }
    }

    &--position-left {
      @include absolute(50%, auto, auto, 0);
      transform: translate(calc(-100% - 0.75em), -50%);
      &::after {
        @include absolute(auto, auto, calc(50% - 8px), calc(100% - 2px));
        border-color: transparent transparent transparent $color-secondary-dark;
      }
    }
    &--position-right {
      @include absolute(50%, 0, auto, auto);
      transform: translate(calc(100% + 0.75em), -50%);
      &::after {
        @include absolute(auto, calc(100% - 2px), calc(50% - 8px), auto);
        border-color: transparent $color-secondary-dark transparent transparent;
      }
    }
    &--position-responsive-top {
      @include absolute(50%, auto, auto, 0);
      transform: translate(calc(-100% - 0.75em), -50%);
      &::after {
        @include absolute(auto, auto, calc(50% - 8px), calc(100% - 2px));
        border-color: transparent transparent transparent $color-secondary-dark;
      }
      @include media-breakpoint-up(xxl) {
        @include absolute(0, auto, auto, 50%);
        transform: translate(calc(-50%), calc(-100% - 0.6em));
        &::after {
          @include absolute(calc(100% - 2px), auto, auto, calc(50% - 8px));
          border-color: $color-secondary-dark transparent transparent transparent;
        }
      }
    }
  }

  &__info-text {
    color: $color-white;
    margin: 0;
    font-weight: $font-weight-light;
  }
}