@include export-module('co-input-text-chips-layout') {
  .co-input-text-chips {
    display: block;
    &:not(.no-style) {
      @include input;
    }
    &.cc-input-focused {
      @include focus($cc-input-focused-border-style, $cc-input-focused-border-width, $cc-input-focused-border-color, $cc-input-border-radius);
    }
    .chips-wrap {
      padding: $co-input-text-chips-padding;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      overflow: hidden;
      cursor: text;
      width: 100%;
      gap: $co-input-text-chips-gap;
    }
    .co-chip-render {
      margin: 0;
      cursor: text; // because clicking on it would auto-select the text of that chip
      .co-icon {
        cursor: pointer;
      }
    }

    .right-in-between {
      flex-shrink: 0;
      height: 30px;
      width: 10px;
    }

    .co-input-text {
      height: 100%;
      @include noBorderHover;
    }

    // chips
    .co-chip-render {
      display: flex;
      align-items: center;
      white-space: nowrap;
      padding: $co-input-text-chips-render-padding;
      border-radius: $co-input-text-chips-render-border-radius;
      height: $co-input-text-chips-render-height;

      &.active {
        background-color: $cc-color-action-accent;
      }
      &.inactive {
        background-color: $cc-color-light-accent;
        span.text {
          color: $co-input-text-chips-render-inactive-font-color;
        }
        co-icon [fill] {
          fill: $cc-color-dark;
        }
      }

      span.text {
        color: $co-input-text-chips-render-font-color;
        padding: $co-input-text-chips-render-padding;
        user-select: none;
        font-size: 13px;
        border-right: 1px solid rgba(white, 0.5);
      }

      .co-icon {
        width: $co-input-text-chips-render-icon-size;
        height: $co-input-text-chips-render-icon-size;
        margin: $co-input-text-chips-render-icon-margin;
      }
    }
  }
}
