$background-color: #616161;
$foreground-color: white;
$arrow-size: 0;
$vertical-shift: 50%;
$multiline-width: 240px;
$tooltip-padding: 10px 9px;
$roundness: 2px; // 0 || border-radius
$shadow: 0;
$load-styles: true !default; // Extra styles needed?

.ytdl-tooltip {
  position: relative;

  &__text {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -$vertical-shift);
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: $background-color;
    color: $foreground-color;
    padding: $tooltip-padding;
    white-space: nowrap;
    bottom: 89%;
    font-size: var(--paper-tooltip_-_font-size, 10px);
    @if ($roundness != 0) {
      border-radius: $roundness;
    }
    @if ($shadow != 0) {
      box-shadow: $shadow;
    }
  }

  // Active state
  :first-child:not(:disabled):hover ~ &__text {
    opacity: 1;
  }

  @if $load-styles == true {
    // ----------
    // Bottom tooltip (.tooltip-bottom, *-left, *-right )
    &--bottom {
      > .ytdl-tooltip__text {
        transform: translate(-50%, $vertical-shift);
        bottom: auto;
        top: 100%;
      }
    }
    &--bottom-left {
      > .ytdl-tooltip__text {
        transform: translate(-30%, $vertical-shift * 4);
      }
    }
    &--bottom-right {
      > .ytdl-tooltip__text {
        left: auto;
        right: 50%;
        transform: translate($arrow-size * 3, $vertical-shift);
      }
    }

    // ----------
    // Top tooltip (.tooltip-top, *-left, *-right )
    // .tooltip-top not needed (default style)
    &--top-left {
      > .ytdl-tooltip__text {
        transform: translate(-140%, -20%);
      }
    }
    &--top-right {
      > .ytdl-tooltip__text {
        left: auto;
        right: 50%;
        transform: translate($arrow-size * 3, -$vertical-shift);
      }
    }
    // End extra styles
    // ----------------------------------------------------
  }
}
