// ********************************************
// container definition
$tooltip-container: #{$prefix}-tooltip;
$tooltip-toolbar: tooltip-container--toolbar;

// ********************************************
// container definition
$el-text: #{$prefix}-tooltip__text;

$radius: $theme-base-border-radius;

$max-width: space(xxl) * 3.9;

.#{$tooltip-container} {
  text-align: middle;
  max-width: $max-width;
  min-width: space(xl) * 1.17;
  padding: space(xxs) space(s);
  position: relative;
  background-color: color(neutral, 000);
  @include border-radius($radius);
  @include box-shadow(depth(100));
  @include filter-shadow(drop-shadow-depth(100));
}

.#{$tooltip-container}__arrow {
  position: absolute;
  font-size: 30px;
  height: space(m) * 1.1;
  width: 25px;
  pointer-events: none;
  background-color: transparent;
  & .stroke {
    fill: color(neutral, 000);
  }
  & .fill {
    fill: color(neutral, 000);
  }

  &[data-placement^='top'] {
    transform: rotateZ(180deg);
  }
  &[data-placement^='right'] {
    transform: rotateZ(-90deg);
    height: space(s) * 1.2;
  }
  &[data-placement^='bottom'] {
    transform: rotateZ(360deg);
    height: space(s) * 1.5;
  }
  &[data-placement^='left'] {
    transform: rotateZ(90deg);
    height: space(s) * 1.2;
  }
}

.#{$el-text} {
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  color: color(neutral, 600);
  max-width: $max-width - (space(s) * 2);
}

.#{$tooltip-toolbar} {
  padding: 0;
}

@include md {
  .#{$tooltip-container} {
    padding: space(xxs) 8px;
    border-radius: 3px;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.38);
    min-width: 16vw;
    max-width: 90vw;
    min-height: 20px;
    font-size: 14px;
    text-align: left;
    vertical-align: middle;
  }

  .#{$el-text} {
    color: color(neutral, 800);
  }

  .#{$tooltip-container}__arrow {
    &[data-placement^='top'],
    &[data-placement^='bottom'] {
      height: space(s) * 1.2;
    }
  }
}