@if $css-variable-enabled {
  $tooltip-border-radius: var(--tooltip-border-radius);
  $tooltip-font-size: var(--tooltip-font-size);
  $tooltip-margin: var(--tooltip-margin);
  $tooltip-padding: var(--tooltip-padding);
  $tooltip-shadow: var(--tooltip-shadow);
  $tooltip-translate: var(--tooltip-translate);
  $tooltip-z-index: var(--tooltip-z-index);
}
$cssvar: $css-variable-enabled;

$selector-text: '&:hover, &:focus, &.#{$prefix}tooltip-active';

[#{$prefix}tooltip] {
  overflow: visible;
  position: relative;

  &:before {
    content: attr(#{$prefix}tooltip);
    display: inline-block;
    width: max-content;
    max-width: 500px;
    background-color: var(--tooltip-bg-color);
    color: var(--tooltip-text-color);
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transform: translateX(- $tooltip-translate);
    transition: all 0.3s ease 0s, visibility 0s ease 0.2s;
    z-index: $tooltip-z-index;
    font-size: $tooltip-font-size;
    border-radius: $tooltip-border-radius;
    padding: $tooltip-padding;
    box-shadow: $tooltip-shadow;
  }

  @include small {
    &:before {
      max-width: 250px;
    }
  }

  &:not([#{$prefix}tooltip-position="left"]):not([#{$prefix}tooltip-position="top"]):not([#{$prefix}tooltip-position="top-left"]):not([#{$prefix}tooltip-position="top-right"]):not([#{$prefix}tooltip-position="bottom"]):not([#{$prefix}tooltip-position="bottom-left"]):not([#{$prefix}tooltip-position="bottom-right"]):before {
    top: auto;
    left: 100%;
    right: auto;
    bottom: auto;
    margin-left: $tooltip-margin;
  }

  #{$selector-text} {
    &:before {
      transition: all 0.3s ease 0.1s, visibility 0s ease 0s;
      visibility: visible;
      opacity: 1;
    }
  }

  &:not([#{$prefix}tooltip-position="top"]):not([#{$prefix}tooltip-position="bottom"]) {
    #{$selector-text} {
      &:before {
        transform: none !important;
      }
    }
  }

  &[#{$prefix}tooltip-position="left"] {
    &:before {
      top: auto;
      left: auto !important;
      right: 100%;
      bottom: auto;
      margin-right: $tooltip-margin;
      transform: translateX($tooltip-translate);
    }
  }

  &[#{$prefix}tooltip-position="top"] {
    &:before {
      top: auto;
      left: 50%;
      right: auto;
      bottom: 100%;
      margin-left: 0 !important;
      margin-bottom: $tooltip-margin;
      transform: translateY($tooltip-translate) translateX(-50%);
    }

    #{$selector-text} {
      &:before {
        transform: translateY(0) translateX(-50%);
      }
    }
  }

  &[#{$prefix}tooltip-position="top-left"] {
    &:before {
      top: auto;
      left: 0;
      right: auto;
      bottom: 100%;
      margin-left: 0 !important;
      margin-bottom: $tooltip-margin;
      transform: translateY($tooltip-translate);
    }
  }

  &[#{$prefix}tooltip-position="top-right"] {
    &:before {
      top: auto;
      left: auto !important;
      right: 0;
      bottom: 100%;
      margin-left: 0 !important;
      margin-bottom: $tooltip-margin;
      transform: translateY($tooltip-translate);
    }
  }

  &[#{$prefix}tooltip-position="bottom"] {
    &:before {
      top: 100%;
      left: 50%;
      right: auto;
      bottom: auto;
      margin-left: 0 !important;
      margin-top: $tooltip-margin;
      transform: translateY(if($cssvar, calc(0px - #{$tooltip-translate}), - $tooltip-translate)) translateX(-50%);
    }

    #{$selector-text} {
      &:before {
        transform: translateY(0) translateX(-50%);
      }
    }
  }

  &[#{$prefix}tooltip-position="bottom-left"] {
    &:before {
      top: 100%;
      left: 0;
      right: auto;
      bottom: auto;
      margin-left: 0 !important;
      margin-top: $tooltip-margin;
      transform: translateY(if($cssvar, calc(0px - #{$tooltip-translate}), - $tooltip-translate));
    }
  }

  &[#{$prefix}tooltip-position="bottom-right"] {
    &:before {
      top: 100%;
      left: auto !important;
      right: 0;
      bottom: auto;
      margin-left: 0 !important;
      margin-top: $tooltip-margin;
      transform: translateY(if($cssvar, calc(0px - #{$tooltip-translate}), - $tooltip-translate));
    }
  }

  // Display on Breakpoint
  &[#{$prefix}tooltip-visibility]:before {
    display: none;
  }

  @include each-breakpoint('&[#{$prefix}tooltip-visibility="name"]:before', 'name') {
    display: inline-block;
  }

  @each $name, $color, $txt-color in $item-colors {
    @if $name {
      &[#{$prefix}tooltip-type="#{$name}"] {
        &:before {
          background-color: $color;
          color: $txt-color;
        }
      }
    }
  }
}