@use "../globals/" as *;
@use "../util/" as *;


/*Define a data-tooltip attribute in your element.*/
/*<span data-tooltip="(description here)"></span>*/

/*Additionally, you can define a data-tooltip-conf attribute to either change position,type or use a feature.*/
/*<span data-tooltip="..." data-tooltip-conf="(right, bottom, left), (success, warning, danger, info) small delay no-fading shadow multiline no-arrow square"></span>
*/


//Primary-color
$tooltip-base-text-color: var(--text-core);
$tooltip-base-bg-color:#fff;
$tooltip-base-border-color:#fff;

//Types
$tooltip-invert-bg-color: var(--bg-core-primary-lighten);
$tooltip-invert-text-color: var(--text-core);
$tooltip-success-bg-color: lighten($success, 17);
$tooltip-info-bg-color: lighten($info, 17);
$tooltip-warning-bg-color: lighten($warning, 17);
$tooltip-danger-bg-color: lighten($danger, 17);

$arrow-size: 8px;
$animation-type: cubic-bezier(.73, .01, 0, 1);



[data-tooltip] {
  position: relative;
  &:before,
  &:after {
    opacity: 0;
    position: absolute;
    left: 50%;
    backface-visibility: hidden
  }
  &:before {
    border-style: solid;
    border-top-width: $arrow-size;
    border-right-width: $arrow-size;
    border-bottom-width: $arrow-size;
    border-left-width: $arrow-size;
    border-bottom-width: 0;
    content: '';
    top: calc($arrow-size / -2);
    width: 0;
    height: 0;
    transform: translate(-50%, calc(-50% - $arrow-size * 1.5));
    transition: opacity .1s $animation-type 0s, transform .6s $animation-type 0s, -webkit-transform .6s $animation-type 0s;
    z-index: $tooltip-zindex;
  }
  &:after {
    content: attr(data-tooltip);
    text-align: center;
    padding: 0.6rem 1rem;
    font-size: $base-font-size;
    text-transform: initial;
    border-radius: $base-border-radius;
    color: $tooltip-base-text-color;
    transition: opacity .3s $animation-type, transform .3s $animation-type, -webkit-transform .3s $animation-type;
    pointer-events: none;
    z-index: $tooltip-zindex;
    white-space: nowrap;
    bottom: 100%;
    transform: translate(-50%, calc($arrow-size * 3));
    max-width: 320px;
    text-overflow: ellipsis;
    overflow: hidden;
   // box-shadow: $base-box-shadow;
  }
}

[data-tooltip]:after {
  background: $tooltip-base-bg-color;
}

[data-tooltip]:before {
  border-top-color: $tooltip-base-bg-color;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=right]:before {
  border-top-color: transparent;
  border-right-color: $tooltip-base-border-color;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=bottom]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: $tooltip-base-border-color;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=left]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: $tooltip-base-border-color;
}

[data-tooltip] {
  &:focus,
  &:hover {
    &:before,
    &:after {
      opacity: 1;
    }
  }
  &:focus,
  &:hover {
    &:before {
      transition: opacity .1s $animation-type .1s, transform .6s $animation-type .1s, -webkit-transform .6s $animation-type .1s;
      transform: translate(-50%, calc(-50% - $arrow-size / 2));
    }
    &:after {
      transform: translate(-50%, calc($arrow-size * -1.5));
    }
  }
}



[data-tooltip][data-tooltip-conf*=right]:before {
  border-style: solid;
  border-top-width: $arrow-size;
  border-right-width: $arrow-size;
  border-bottom-width: $arrow-size;
  border-left-width: $arrow-size;
  border-left-width: 0;
  left: auto;
  right: calc($arrow-size * -1.5);
  top: 50%;
  transform: translate(calc(-50% + $arrow-size * 1.75), -50%)
}

[data-tooltip][data-tooltip-conf*=right]:after {
  top: 50%;
  left: 100%;
  bottom: auto;
  -webkit-transform: translate(calc($arrow-size * -3), -50%);
  transform: translate(calc($arrow-size * -3), -50%)
}

[data-tooltip][data-tooltip-conf*=right]:focus:before,
[data-tooltip][data-tooltip-conf*=right]:hover:before {
  -webkit-transform: translate(calc(-50% + $arrow-size * 0.75), -50%);
  transform: translate(calc(-50% + $arrow-size * 0.75), -50%)
}

[data-tooltip][data-tooltip-conf*=right]:focus:after,
[data-tooltip][data-tooltip-conf*=right]:hover:after {
  -webkit-transform: translate(calc($arrow-size * 1.75), -50%);
  transform: translate(calc($arrow-size * 1.75), -50%)
}

[data-tooltip][data-tooltip-conf*=bottom]:before {
  border-style: solid;
  border-top-width: $arrow-size;
  border-right-width: $arrow-size;
  border-bottom-width: $arrow-size;
  border-left-width: $arrow-size;
  border-top-width: 0;
  top: auto;
  bottom: calc($arrow-size * -1.5);
  left: 50%;
  -webkit-transform: translate(-50%, calc(-50% + $arrow-size * 1.5));
  transform: translate(-50%, calc(-50% + $arrow-size * 1.5))
}

[data-tooltip][data-tooltip-conf*=bottom]:after {
  top: 100%;
  left: 50%;
  bottom: auto;
  -webkit-transform: translate(-50%, calc($arrow-size * -3));
  transform: translate(-50%, calc($arrow-size * -3))
}

[data-tooltip][data-tooltip-conf*=bottom]:focus:before,
[data-tooltip][data-tooltip-conf*=bottom]:hover:before {
  -webkit-transform: translate(-50%, calc(-50% + $arrow-size / 2));
  transform: translate(-50%, calc(-50% + $arrow-size / 2))
}

[data-tooltip][data-tooltip-conf*=bottom]:focus:after,
[data-tooltip][data-tooltip-conf*=bottom]:hover:after {
  -webkit-transform: translate(-50%, calc($arrow-size * 1.5));
  transform: translate(-50%, calc($arrow-size * 1.5))
}

[data-tooltip][data-tooltip-conf*=left]:before {
  border-style: solid;
  border-top-width: $arrow-size;
  border-right-width: $arrow-size;
  border-bottom-width: $arrow-size;
  border-left-width: $arrow-size;
  border-right-width: 0;
  left: calc($arrow-size / -2);
  top: 50%;
  width: 0;
  height: 0;
  -webkit-transform: translate(calc(-50% - $arrow-size * 2), -50%);
  transform: translate(calc(-50% - $arrow-size * 2), -50%)
}

[data-tooltip][data-tooltip-conf*=left]:after {
  top: 50%;
  right: 100%;
  bottom: auto;
  left: auto;
  -webkit-transform: translate(calc($arrow-size * 3), -50%);
  transform: translate(calc($arrow-size * 3), -50%)
}

[data-tooltip][data-tooltip-conf*=left]:focus:after,
[data-tooltip][data-tooltip-conf*=left]:hover:after {
  -webkit-transform: translate(calc($arrow-size * -1.75), -50%);
  transform: translate(calc($arrow-size * -1.75), -50%)
}

[data-tooltip][data-tooltip-conf*=left]:focus:before,
[data-tooltip][data-tooltip-conf*=left]:hover:before {
  -webkit-transform: translate(calc(-50% - $arrow-size * 0.75), -50%);
  transform: translate(calc(-50% - $arrow-size * 0.75), -50%)
}

[data-tooltip][data-tooltip-conf*=multiline]:after {
  word-break: break-word;
  white-space: normal;
  min-width: 180px;
  text-overflow: clip
}

[data-tooltip][data-tooltip-conf*=delay]:before {
  -webkit-transition: opacity .2s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
  transition: opacity .2s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
  transition: opacity .2s $animation-type 0s, transform .3s $animation-type 0s;
  transition: opacity .2s $animation-type 0s, transform .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s
}

[data-tooltip][data-tooltip-conf*=delay]:after {
  -webkit-transition: opacity .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
  transition: opacity .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s;
  transition: opacity .3s $animation-type 0s, transform .3s $animation-type 0s;
  transition: opacity .3s $animation-type 0s, transform .3s $animation-type 0s, -webkit-transform .3s $animation-type 0s
}

[data-tooltip][data-tooltip-conf*=delay]:focus:before,
[data-tooltip][data-tooltip-conf*=delay]:hover:before {
  -webkit-transition: opacity .2s $animation-type .5s, -webkit-transform .6s $animation-type .5s;
  transition: opacity .2s $animation-type .5s, -webkit-transform .6s $animation-type .5s;
  transition: opacity .2s $animation-type .5s, transform .6s $animation-type .5s;
  transition: opacity .2s $animation-type .5s, transform .6s $animation-type .5s, -webkit-transform .6s $animation-type .5s
}

[data-tooltip][data-tooltip-conf*=delay]:focus:after,
[data-tooltip][data-tooltip-conf*=delay]:hover:after {
  -webkit-transition: opacity .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s;
  transition: opacity .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s;
  transition: opacity .3s $animation-type .4s, transform .3s $animation-type .4s;
  transition: opacity .3s $animation-type .4s, transform .3s $animation-type .4s, -webkit-transform .3s $animation-type .4s
}


[data-tooltip][data-tooltip-conf*=small]:after {
  font-size: $font-size-sm;
  padding: .5rem .75rem;
}

[data-tooltip][data-tooltip-conf*=shadow]:after {
  //box-shadow: 0 2px 10px 2px rgba(0, 0, 0, .1)
   box-shadow: $base-box-shadow;
}

[data-tooltip][data-tooltip-conf*=no-fading]:after,
[data-tooltip][data-tooltip-conf*=no-fading]:before {
  -webkit-transition: none;
  transition: none
}

[data-tooltip][data-tooltip-conf*=no-arrow]:before {
  display: none
}

[data-tooltip][data-tooltip-conf*=square]:after {
  border-radius: 0
}

[data-tooltip][data-tooltip-conf*=invert]:after {
  color: $tooltip-invert-text-color;
  background: $tooltip-invert-bg-color;
}

[data-tooltip][data-tooltip-conf*=invert]:before {
  border-top-color: $tooltip-invert-bg-color;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=right]:before {
  border-top-color: transparent;
  border-right-color: $tooltip-invert-bg-color;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=bottom]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: $tooltip-invert-bg-color;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=invert][data-tooltip-conf*=left]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: $tooltip-invert-bg-color;
}

[data-tooltip][data-tooltip-conf*=success]:after {
  background: $tooltip-success-bg-color;
}

[data-tooltip][data-tooltip-conf*=success]:before {
  border-top-color: $tooltip-success-bg-color;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=right]:before {
  border-top-color: transparent;
  border-right-color: $tooltip-success-bg-color;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=bottom]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: $tooltip-success-bg-color;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=success][data-tooltip-conf*=left]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: $tooltip-success-bg-color;
}

[data-tooltip][data-tooltip-conf*=info]:after {
  background: $tooltip-info-bg-color;
}

[data-tooltip][data-tooltip-conf*=info]:before {
  border-top-color: $tooltip-info-bg-color;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=right]:before {
  border-top-color: transparent;
  border-right-color: $tooltip-info-bg-color;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=bottom]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: $tooltip-info-bg-color;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=info][data-tooltip-conf*=left]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: $tooltip-info-bg-color;
}

[data-tooltip][data-tooltip-conf*=warning]:after {
  background: $tooltip-warning-bg-color;
}

[data-tooltip][data-tooltip-conf*=warning]:before {
  border-top-color: $tooltip-warning-bg-color;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=right]:before {
  border-top-color: transparent;
  border-right-color: $tooltip-warning-bg-color;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=bottom]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: $tooltip-warning-bg-color;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=warning][data-tooltip-conf*=left]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: $tooltip-warning-bg-color;
}

[data-tooltip][data-tooltip-conf*=danger]:after {
  background: $tooltip-danger-bg-color;
}

[data-tooltip][data-tooltip-conf*=danger]:before {
  border-top-color: $tooltip-danger-bg-color;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=right]:before {
  border-top-color: transparent;
  border-right-color: $tooltip-danger-bg-color;
  border-bottom-color: transparent;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=bottom]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: $tooltip-danger-bg-color;
  border-left-color: transparent
}

[data-tooltip][data-tooltip-conf*=danger][data-tooltip-conf*=left]:before {
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: $tooltip-danger-bg-color;
}


/*INHERIT*/

$tooltip-inherit-bg-color: inherit;
$tooltip-border-bg-color: $tooltip-inherit-bg-color;


[data-tooltip][data-tooltip-conf*=inherit]:after {    
    background: $tooltip-inherit-bg-color;
  }
  
  [data-tooltip][data-tooltip-conf*=inherit]:before {
    border-top-color: $tooltip-inherit-bg-color;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: transparent
  }
  
  [data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=right]:before {
    border-top-color: transparent;
    border-right-color: $tooltip-border-bg-color;
    border-bottom-color: transparent;
    border-left-color: transparent
  }
  
  [data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=bottom]:before {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: $tooltip-inherit-bg-color;
    border-left-color: transparent
  }
  
  [data-tooltip][data-tooltip-conf*=inherit][data-tooltip-conf*=left]:before {
    border-top-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
    border-left-color: $tooltip-inherit-bg-color;
  }


[data-tooltip][data-tooltip=''] {
  &:after,
  &:before {
    display: none
  }
}
