:host {
  display: contents;
  font-weight: var(--s-font-weight-normal);
}

  :host * {
    box-sizing: border-box;
  }

.tooltip {
  display: contents;
}

.tooltip--visible .tooltip__popper {
    display: block;
    animation: tooltip-fade-in 0.15s;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
    opacity: 0;
  }

.tooltip--actual-placement-top .tooltip__arrow {
    top: calc(100% - 0.0625rem);
    transform: translate3d(0, -50%, 0) rotate(45deg);
  }

.tooltip--actual-placement-bottom .tooltip__arrow {
    bottom: calc(100% - 0.0625rem);
    transform: translate3d(0, 50%, 0) rotate(45deg);
  }

.tooltip--actual-placement-left .tooltip__arrow {
    left: calc(100% - 0.0625rem);
    transform: translate3d(-50%, 0, 0) rotate(45deg);
  }

.tooltip--actual-placement-right .tooltip__arrow {
    right: calc(100% - 0.0625rem);
    transform: translate3d(50%, 0, 0) rotate(45deg);
  }

.tooltip .tooltip__reference {
  display: contents;
}

.tooltip__popper {
  position: fixed;
  display: none;
  opacity: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  overflow: visible;
}

.tooltip__popper::backdrop {
  display: none;
}

.tooltip__bubble {
  position: relative;
  display: block;
  padding-top: var(--s-space-8);
  padding-right: var(--s-space-12);
  padding-bottom: calc(var(--s-space-8) + 0.0625rem);
  padding-left: var(--s-space-12);
  border-radius: var(--s-border-radius-sm);
  color: var(--s-text-on-status);
  background-color: var(--s-surface-neutral-default);
  line-height: var(--s-line-height-base);
  text-align: start;
  box-shadow: var(--s-shadow-level-2);
}

@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px) {

.tooltip__bubble {
    font-size: var(--s-font-size-sm);
    line-height: var(--s-line-height-sm)
}
  }

.tooltip__content {
  white-space: normal;
}

.tooltip__arrow {
  position: absolute;
  width: 0.6875rem;
  height: 0.6875rem;
  border-radius: 0.125rem;
  background-color: var(--s-surface-neutral-default);
}

.tooltip--intent-info .tooltip__bubble,
  .tooltip--intent-info .tooltip__arrow {
    background-color: var(--s-surface-info-default);
  }

.tooltip--intent-primary .tooltip__bubble,
  .tooltip--intent-primary .tooltip__arrow {
    background-color: var(--s-action-primary-default);
    color: var(--s-text-on-action-primary);
  }

@keyframes tooltip-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}