.IE.player .tooltip {
  .tooltip-label {
    white-space: nowrap;
  }
}

.player .tooltip {
  position: relative;
  display: inline-block;
  height: 100%;
  width: 100%;
  .tooltip-label {
    visibility: hidden;
    background-color: $tooltip-background-color;
    color: $tooltip-color;
    text-align: center;
    padding: 4px 6px;
    border-radius: 4px;
    position: absolute;
    line-height: normal;
    font-weight: bold;
    font-size: 13px;
    opacity: 0;
    transition: opacity 1s;
    width: max-content;
    display: table;

    &:before {
      content: '';
      position: absolute;
      border-width: 5px;
      border-style: solid;
      border-radius: 3px;
      color: $tooltip-background-color;
      z-index: -1;
    }
    &:after {
      content: '';
      position: absolute;
      inset: -1em;
    }
    &.tooltip-top {
      bottom: $tooltip-margin;
      left: 50%;
      transform: translate(-50%);
      &:before {
        bottom: -$tooltip-arrow-height;
        left: 50%;
        transform: translate(-50%) rotate(45deg) skew(5deg, 5deg);
      }
    }
    &.tooltip-top-left {
      bottom: $tooltip-margin;
      left: 50%;
      transform: translate(-100%);
      margin-left: $tooltip-semi-side-margin;
      &:before {
        bottom: -$tooltip-arrow-height;
        right: 0;
        margin-right: $tooltip-semi-side-arrow-margin;
        transform: rotate(45deg) skew(5deg, 5deg);
      }
    }
    &.tooltip-top-right {
      bottom: $tooltip-margin;
      left: 50%;
      transform: translate(-$tooltip-semi-side-margin);
      &:before {
        bottom: -$tooltip-arrow-height;
        left: 0;
        margin-left: $tooltip-semi-side-arrow-margin;
        transform: rotate(45deg) skew(5deg, 5deg);
      }
    }
    &.tooltip-bottom {
      top: $tooltip-margin;
      left: 50%;
      transform: translate(-50%);
      &:before {
        top: -$tooltip-arrow-height;
        left: 50%;
        margin-left: -5px;
        transform: rotate(45deg) skew(5deg, 5deg);
      }
    }
    &.tooltip-bottom-right {
      top: $tooltip-margin;
      left: 50%;
      transform: translate(-$tooltip-semi-side-margin);
      &:before {
        top: -$tooltip-arrow-height;
        left: 0;
        margin-left: $tooltip-semi-side-arrow-margin;
        transform: rotate(45deg) skew(5deg, 5deg);
      }
    }
    &.tooltip-bottom-left {
      top: $tooltip-margin;
      transform: translate(-100%);
      left: 50%;
      margin-left: $tooltip-semi-side-margin;
      &:before {
        top: -$tooltip-arrow-height;
        right: 0;
        margin-right: $tooltip-semi-side-arrow-margin;
        transform: rotate(45deg) skew(5deg, 5deg);
      }
    }
    &.tooltip-left {
      top: 50%;
      right: $tooltip-margin;
      transform: translate(0, -50%);
      &:before {
        top: 50%;
        left: 100%;
        margin-left: -6px;
        margin-top: -5px;
        transform: rotate(135deg) skew(10deg, 10deg);
      }
    }
    &.tooltip-right {
      top: 50%;
      left: $tooltip-margin;
      transform: translate(0, -50%);
      &:before {
        top: 50%;
        right: 100%;
        margin-top: -5px;
        margin-right: -6px;
        transform: rotate(135deg) skew(10deg, 10deg);
      }
    }
  }
}

.player .tooltip .tooltip-label {
  &.show {
    visibility: visible;
    opacity: 1;
  }

  &.hide {
    transition: opacity 0.15s ease-in-out;
  }
}