@include export-module('co-list-of-values') {
  .co-list-of-values {
    display: block;
    position: relative;
    font-family: $cc-co-list-of-values-font-family;
    font-size: $cc-co-list-of-values-font-size;
    height: $cc-co-list-of-values-height;
    background: $cc-co-list-of-values-background-color;
    border-radius: $cc-input-border-radius;
    overflow: hidden;
    &:before {
      content: '';
      box-shadow: inset 0 0 0 $cc-input-border-width $cc-input-border-color;
      border-radius: $cc-input-border-radius;
      position: absolute;
      pointer-events: none;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    &:not(.read-only):hover {
      @include hover($cc-input-border-hover-style, $cc-input-border-hover-width, $cc-input-border-hover-color, $cc-input-border-radius);
    }
    .co-input-text {
      height: 100%;
      &:before {
        box-shadow: none;
      }
      &:hover, &:not(.read-only):hover {
        &:before {
          box-shadow: none;
        }
      }
      .right-icon {
        min-width: $cc-co-list-of-values-right-icon-spacer-width;
      }
      .input-text-right-icon svg {
        width: $cc-co-list-of-values-right-icon-width;
        height: $cc-co-list-of-values-right-icon-width;
        padding: $cc-co-list-of-values-right-icon-padding;
        background: $cc-co-list-of-values-right-icon-background;
        border-radius: $cc-co-list-of-values-right-icon-radius;
      }
    }
    @if $cc-input-show-focus-line != false {
      &.cc-input-focused:not(.no-focus-line) {
        @include focus($cc-input-focused-border-style, $cc-input-focused-border-width, $cc-input-focused-border-color, $cc-input-border-radius);
      }
    }
    .multiselect-chips-wrapper {
      display: flex;
      flex-wrap: wrap;
      column-gap: $cc-co-list-of-values-multiselect-chips-column-gap;
      row-gap: $cc-co-list-of-values-multiselect-chips-row-gap;
      padding: $cc-co-list-of-values-multiselect-chips-padding;
      .chips {
        font-family: $cc-co-list-of-values-multiselect-chip-font-family;
        font-size: $cc-co-list-of-values-multiselect-chip-font-size;
        color: $cc-co-list-of-values-multiselect-chip-font-color;
        display: flex;
        align-items: center;
        background: $cc-co-list-of-values-multiselect-chip-background-color;
        border-radius: $cc-co-list-of-values-multiselect-chip-border-radius; // 5px;
        padding: $cc-co-list-of-values-multiselect-chip-padding; // 5px 7px;
        user-select: none;
      }
      .chips-description {

      }
      .remove-chip-icon {
        cursor: pointer;
        height: $cc-co-list-of-values-multiselect-chip-delete-icon-size;
        width: $cc-co-list-of-values-multiselect-chip-delete-icon-size;
        svg { // for fontawesome icons
          fill: $cc-co-list-of-values-multiselect-chip-delete-icon-color;
        }
        & [fill] { // for own icons
          fill: $cc-co-list-of-values-multiselect-chip-delete-icon-color;
        }
      }
      .input-text-clear-button {
        display: flex;
        visibility: hidden;
        cursor: pointer;
        height: $cc-input-clear-icon-size;
        width: $cc-input-clear-icon-size;
        align-self: end;
        padding: $cc-input-clear-icon-padding;
        &.show {
          visibility: visible;
        }
      }
    }
    &.multi-select.hasvalue {
      height: auto;
    }
  }
  .co-list-of-values-popup {
    font-family: $cc-co-list-of-values-font-family;
    font-size: $cc-co-list-of-values-font-size;
    &.lov-anim {
      .lov-options {
        transform-origin: top;
        overflow: hidden;
        transform: translateY(-6px) scaleY(0.85);
        opacity: 0;
        max-height: 0;
        transition-property: transform, opacity, max-height, filter;
        transition-duration: 180ms, 120ms, 180ms, 180ms;
        transition-timing-function: cubic-bezier(.2,.9,.2,1), ease, cubic-bezier(.2,.9,.2,1), ease;
        will-change: transform, opacity, max-height;
        margin: 5px 0;
      }
      &.lov-anim--open {
        .lov-options {
          transform: translateY(0) scaleY(1);
          opacity: 1;
          filter: drop-shadow(0 12px 18px rgba(0,0,0,0.16));
          max-height: $cc-co-list-of-values-lov-options-max-height;
        }
      }
      &:not(.love-anim--open) {
        .lov-options {
          transition-timing-function: cubic-bezier(.4,0,.6,1), ease, cubic-bezier(.4,0,.6,1), ease;
        }
      }
    }
    .lov-options {
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: fixed;
      max-height: $cc-co-list-of-values-lov-options-max-height;
      background-color: $cc-co-list-of-values-lov-options-background-color;
      border: $cc-co-list-of-values-lov-options-border;
      border-radius: $cc-co-list-of-values-lov-options-border-radius;
      z-index: 99999999;
      height: 100%;
      &.top {
        justify-content: flex-end;
      }
    }
    .co-input-search {
      display: flex;
      flex-shrink: 0;
      width: 100%;
      .co-input-text {
        width: 100%;
      }
    }
    .dropdown-list {
      overflow-y: auto;
      list-style-type: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      user-select: none;
    }

    .lov-options li {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: $cc-co-list-of-values-lov-options-li-padding;
      border-radius: $cc-co-list-of-values-lov-options-li-border-radius;
      margin: $cc-co-list-of-values-lov-options-li-margin;
    }

    .lov-options li:last-child {
      border-bottom: none;
    }

    .lov-options li:hover {
      //color: $cc-co-list-of-values-lov-options-li-hover-text-color;
      background-color: $cc-co-list-of-values-lov-options-li-hover;
    }

    .lov-options li.selected,  .lov-options li.active {
      background-color: $cc-co-list-of-values-lov-options-li-selected;
      color: $cc-co-list-of-values-lov-options-li-selected-text-color;
    }

    .gap {
      display: flex;
      align-items: center;
      gap: 0.1em;
      padding: 0.25em;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    co-list-of-values-popup.lov-anim .lov-options {
      transition: none;
    }
  }
}
