@import '../../../styles/common.scss';

@function svg-arrow-glyph($color) {
  @return url('data:image/svg+xml;utf8,<svg stroke="' + $color + '" version="1.1" xmlns="http://www.w3.org/2000/svg" width="40px" height="20px" viewBox="0 0 40 40"><path vector-effect="non-scaling-stroke" fill="none" stroke-width="2" d="M38.5,9.5L20,30.5L1.5,9.5" /></svg>');
}

.container {
  .tagsWrapper {
    display: flex;
    flex-flow: wrap;
    gap: 10px;

    .hasError {
      input {
        border: 1px solid
          var(--input-invalid-border-color, $input-invalid-border-color);

        &:hover {
          border-color: var(
            --input-invalid-border-color,
            $input-invalid-border-color
          );
          box-shadow: 0 0 0 2px
            var(--input-invalid-hover-color, $input-invalid-hover-color);
        }
      }
    }

    .selectedItem {
      width: max-content;
      display: grid;
      grid-template-columns: auto 50px;
      background-color: var(--tag-background-color, $tag-background-color);
      align-items: center;

      span {
        border-right: none;
        padding: 10px 5px 10px 15px;
        font-size: var(--label-font-size, $label-font-size);
        color: $tag-font-color;

        max-width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      &.disabled span {
        color: var(--input-disabled-font-color, $input-disabled-font-color);
      }

      span.required {
        border: 1px solid var(--tag-border-color-1, $tag-border-color-1);
      }
    }

    .selectedItem.required {
      display: block;
      grid-template-columns: none;
    }
  }
}

.tagEnter {
  opacity: 0;
  background-color: var(--tag-enter-color, $tag-enter-color) !important;
}

.tagEnterActive {
  opacity: 1;
  background-color: var(
    --tag-background-color,
    $tag-background-color
  ) !important;

  transition: background-color 1000ms ease-out 100ms, opacity 100ms ease-in;
}

.tagExit {
  opacity: 1;
}
.tagExitActive {
  opacity: 0;
  transition: opacity 50ms ease-out;
}
