@import './../variables/colors';

.v-tooltip__content {
  font-weight: 500;
  line-height: 1.5;
}

// ToDo: удалить в связи с использованием tippy
.tooltip-top::before {
  border-right: solid 8px transparent;
  border-left: solid 8px transparent;
  transform: translateX(-50%);
  position: absolute;
  z-index: -21;
  content: '';
  top: 100%;
  left: 50%;
  height: 0;
  width: 0;
}

.tooltip-bottom::before {
  border-right: solid 8px transparent;
  border-left: solid 8px transparent;
  transform: translateX(-50%);
  position: absolute;
  z-index: -21;
  content: '';
  bottom: 100%;
  left: 50%;
  height: 0;
  width: 0;
}

.tooltip-right::before {
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%; /* To the left of the tooltip */
  margin-top: -8px;
  border-width: 8px;
  border-style: solid;
  border-top: solid 8px transparent;
  border-bottom: solid 8px transparent;
  border-left: solid 8px transparent;
}

.tooltip-left::before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%; /* To the left of the tooltip */
  margin-top: -8px;
  border-width: 8px;
  border-style: solid;
  border-top: solid 8px transparent;
  border-bottom: solid 8px transparent;
  border-right: solid 8px transparent;
}

@each $direction in ('left', 'top', 'right', 'bottom') {
  @each $nameColor, $color in $colors {
    @each $nameColorItem, $colorItem in $color {
      @if $nameColor == 'shades' {
        .tooltip-#{$direction}.#{$nameColorItem}::before {
          border-#{$direction}: solid 8px $colorItem;
        }
      } @else if $nameColorItem == 'base' {
        .tooltip-#{$direction}.#{$nameColor}::before {
          border-#{$direction}: solid 8px $colorItem;
        }
      } @else {
        .tooltip-#{$direction}.#{$nameColor}.#{$nameColorItem}::before {
          border-#{$direction}: solid 8px $colorItem;
        }
      }
    }
  }
  //.tooltip-#{$direction}.error::before{
  //  border-#{$direction}: solid 8px #ff6060;
  //}
  //
  //.tooltip-#{$direction}.success::before{
  //  border-#{$direction}: solid 8px #1B5E20;
  //}
  //.tooltip-#{$direction}.secondary::before{
  //  border-#{$direction}: solid 8px #3f3f3f;
  //}
  //
  //.tooltip-#{$direction}.primary::before{
  //  border-#{$direction}: solid 8px #246fb3;
  //}
  //
  //.tooltip-#{$direction}.info::before{
  //  border-#{$direction}: solid 8px #2196f3;
  //}
}