@include export-module('co-tooltip-layout') {
  .co-tooltip {
    font-family: $co-tooltip-font-family;
    font-size: $co-tooltip-font-size;
    position: fixed;
    min-height: 20px;
    min-width: 200px;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 10px;
    padding: $co-tooltip-padding;
    z-index: 999999;
    border-radius: $co-tooltip-border-radius;
    border: $co-tooltip-border;

    &::after,
    &::before {
      border: solid transparent;
      content: " ";
      display: block;
      height: 0;
      pointer-events: none;
      position: absolute;
      width: 0;
      bottom: -20px;
    }

    &::after {
      left: 20px;
      border-width: 10px;
    }

    &::before {
      margin-left: 12px;
      border-width: 8px;
      z-index: 1;
      bottom: -16px;
    }
    &.bottom {
      &::after,
      &::before {
        bottom: 100%;
      }
    }
  }
  //.validation-error-content {
  //  display: flex;
  //  flex-direction: row;
  //  align-items: center;
  //}
}
