@import 'inc/bootstrap';

$dark : #404040;

.tooltip{
  .tooltip-inner{
    -moz-border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
  }
}
.tooltip-content{
  display: none;
}
.tooltip-inner{
  .tooltip-content{
    display: block;
  }
}

.popper,
.tooltip[role="tooltip"] {
  position: absolute;
  /*background: #FFC107;*/

  color: black;
  min-inline-size: 100px;
  max-inline-size: 250px;
  /*box-shadow: 0 0 2px rgba(0,0,0,0.5);*/
  box-shadow: none;
  padding-block: 2px;
  padding-inline: 5px;
  text-align: left;
  font-size: .8em;
  z-index: 2000;
  word-break: normal;
  overflow-wrap: break-word;
  box-sizing: border-box;
  border-style: solid;
  border-width: 1px;
  border-radius: 5px;

}
.style5 .tooltip {
  background: #1E252B;
  color: #FFFFFF;
  max-width: 200px;
  width: auto;
  font-size: .8rem;
  padding: .5em 1em;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.tooltip .tooltip-arrow::before,
.popper .popper__arrow::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
}
.style5 .tooltip .tooltip-arrow {
  border-color: red !important;

}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.popper[x-placement^="top"] .popper__arrow::before,
.tooltip[x-placement^="top"] .tooltip-arrow::before {


  border-width: 3px 3px 0 3px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  top: -5px;
  left: calc(50% - 3px);

}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow::before,
.popper[x-placement^="bottom"] .popper__arrow::before {

  border-width: 0 3px 3px 3px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  bottom: -5px;
  left: calc(50% - 3px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.popper[x-placement^="right"] .popper__arrow::before,
.tooltip[x-placement^="right"] .tooltip-arrow::before {
  border-width: 3px 3px 3px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 3px);
  margin-left: 0;
  margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.popper[x-placement^="left"] .popper__arrow::before,
.tooltip[x-placement^="left"] .tooltip-arrow::before {

  border-width: 3px 0 3px 3px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  top: calc(50% - 3px);
  left:-5px;
  margin-left: 0;
  margin-right: 0;
}



.tooltip-plain {
  background-color: $darkBlueGrey;
  border: solid 1px darken($darkBlueGrey, 30%);
  .tooltip-arrow{
    border-color: darken($darkBlueGrey, 30%);;
  }
  .tooltip-arrow::before{
    border-color: $darkBlueGrey;
  }
}
.tooltip-dark{
  background-color: $dark;
  border: solid 1px darken($dark, 30%);
  color: $textHighlight;
  .tooltip-arrow{
    border-color: $dark;
  }
  .tooltip-arrow::before{
    border-color: $dark;
  }
  .tooltip-inner{
    background-color: $dark;
  }

  .tooltip-icon{
    border-color: $dark;
  }

  .tooltip-inner .ui-state-hover{
    border-color: #303030;
  }
}


.tooltip-red{
  @extend .feedback-error;
  color: $textColor;
  .tooltip-arrow{
    border-color: $errorBorderColor;
  }
  .tooltip-arrow::before{
    border-color: $errorBgColor;
  }
  .tooltip-close .tooltip-icon{
    background-position: -102px 0;
  }
  .tooltip-icon{
    border-color: $textColor;
  }
  .tooltip-inner .ui-state-hover{
    border-color: $textColor;
  }
}
/*! Green tooltip style */
.tooltip-green{
  @extend .feedback-success;
  color: $textColor;
  .tooltip-arrow{
    border-color: $successBorderColor;
  }
  .tooltip-arrow::before{
    border-color: $successBgColor;
  }

  .tooltip-close .tooltip-icon{
    background-position: -42px 0;
  }
}
/*! Blue tooltip style */
.tooltip-blue{
  @extend .feedback-info;
  color: $textColor;

  .tooltip-arrow{
    border-color: $infoBorderColor;
  }
  .tooltip-arrow::before{
    border-color: $infoBgColor;
  }

  .tooltip-close .tooltip-icon{
    background-position: -2px 0;
  }
}
/*! Orange tooltip style */
.tooltip-orange{
  @extend .feedback-warning;
  color: $textColor;

  .tooltip-arrow{
    border-color: $warningBorderColor;
  }
  .tooltip-arrow::before{
    border-color: $warningBgColor;
  }

  .tooltip-close .tooltip-icon{
    background-position: -102px 0;
  }

  .tooltip-icon{
    border-color: $textColor;
  }

  .tooltip-inner .ui-state-hover{
    border-color: $textColor;
  }
}

/*! Danger (mix of read and orange) tooltip style */
.tooltip-danger{
  @extend .feedback-danger;
  color: $textColor;

  .tooltip-arrow{
    border-color: $dangerBorderColor;
  }
  .tooltip-arrow::before{
    border-color: $dangerBgColor;
  }
  .tooltip-icon{
    background-position: -102px 0;
  }
  .tooltip-icon{
    border-color: $textColor;
  }
  .tooltip-inner .ui-state-hover{
    border-color: $textColor;
  }
}