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

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

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

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


