@use '../../sass/abstracts/variables' as *;
@use '../../sass/abstracts/typography';

$zindexToolTip: 1000;
$tooltip-arrow-values: 10px;

[data-v-tippy] {
  display: inline-block;
}

/* Default from tippy */
.tippy-box[data-placement^='top'] {
  bottom: -$tooltip-arrow-values;
}

.tippy-box[data-placement^='bottom'] > .tippy-arrow {
  top: 0;
}

.tippy-box[data-placement^='bottom'] {
  top: -$tooltip-arrow-values;
}

.tippy-box[data-placement^='left'] > .tippy-arrow {
  right: 0;
}

.tippy-box[data-placement^='left'] {
  right: $tooltip-arrow-values;
}

.tippy-box[data-placement^='right'] {
  left: $tooltip-arrow-values;
}

.tippy-box[data-inertia][data-state='visible'] {
  transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11);
}

.tippy-arrow {
  width: $tooltip-arrow-values;
  height: $tooltip-arrow-values;
  color: #333;
}

.tippy-content {
  position: relative;
  padding: 2px 8px;
  z-index: 1;
}
/* Default from tippy */

@mixin popover-background($background-color, $color) {
  .tippy-content {
    background-color: $background-color;
    color: $color;
  }

  .tippy-arrow {
    border-color: $background-color;
  }
}

.tippy-box {
  display: block !important;
  position: relative;
  @include popover-background($bluish-grey-25, $sodra-black);

  &[data-placement^='bottom'],
  &[data-placement^='top'] {
    z-index: $zindexToolTip;
    margin: $tooltip-arrow-values 0;
  }

  &[data-theme='undefined'] {
    @include popover-background($bluish-grey-25, $sodra-black);
  }

  &[data-theme='blue'] {
    @include popover-background($blue-50, $sodra-black);
  }

  &[data-theme='green'] {
    @include popover-background($green-50, $sodra-black);
  }

  &[data-theme='yellow'] {
    @include popover-background($yellow-50, $sodra-black);
  }

  &[data-theme='red'] {
    @include popover-background($red-50, $sodra-black);
  }

  &[data-theme='black'] {
    @include popover-background($sodra-black, $white);
  }

  &[data-theme='white'] {
    @include popover-background($white, $sodra-black);
  }

  &[data-theme='custom'] {
    @include popover-background($white, $sodra-black);

    .tippy-content {
      border: 1px solid $sodra-black-5;
    }
  }

  .tippy-content {
    @include typography.body-small;
  }

  .tippy-arrow {
    border-style: solid;
    position: absolute;
    z-index: 1;
    transform: none !important;
  }

  &[data-placement^='top'] {
    .tippy-arrow {
      width: 1.5rem;
      height: $tooltip-arrow-values;
      border-left: $tooltip-arrow-values solid transparent !important;
      border-right: $tooltip-arrow-values solid transparent !important;
      position: absolute;
      bottom: -$tooltip-arrow-values;
      border-top-width: $tooltip-arrow-values;
      left: 50% !important;
      margin-left: -$tooltip-arrow-values !important;
    }
  }

  &[data-placement^='bottom'] {
    .tippy-arrow {
      border-width: 0 $tooltip-arrow-values $tooltip-arrow-values
        $tooltip-arrow-values;
      border-left-color: transparent !important;
      border-right-color: transparent !important;
      border-top-color: transparent !important;
      top: -$tooltip-arrow-values;
      left: 50% !important;
      margin-left: -$tooltip-arrow-values !important;
    }
  }

  &[data-placement^='right'] {
    .tippy-arrow {
      border-width: $tooltip-arrow-values $tooltip-arrow-values
        $tooltip-arrow-values 0;
      border-left-color: transparent !important;
      border-top-color: transparent !important;
      border-bottom-color: transparent !important;
      left: -1rem;
      top: calc(50% - 12px) !important;
      margin-left: 0;
      margin-right: 0;
    }
  }

  &[data-placement^='left'] {
    .tippy-arrow {
      border-width: $tooltip-arrow-values 0 $tooltip-arrow-values
        $tooltip-arrow-values;
      border-top-color: transparent !important;
      border-right-color: transparent !important;
      border-bottom-color: transparent !important;
      right: -1rem;
      top: calc(50% - 12px) !important;
      margin-left: 0;
      margin-right: 0;
    }
  }
}