@import 'mixins';

.p-chips {
  width: 100%;

  > ul.p-inputtext {
    display: block;
    padding: 5px 8px;

    &:hover {
      border: 1px solid $input-txt-border-hover-color;
      transition: border-color 0.3s ease 0s;
    }

    &:focus {
      box-shadow: 0 3px 6px 0 $input-txt-shadow-color;
      border: 1px solid $input-txt-border-focus-color;
    }

    .p-chips-input-token {
      input {
        font-size: $fontSize;
        padding: 0;
        margin: 0;
        border: none;

        &:hover {
          border: 0 none;
          box-shadow: none;
        }

        &:focus {
          border: 0 none;
          box-shadow: none;
        }

      }
    }

    .p-chips-token {
      background-color: var(--input-chips-bg-color);
      border-radius: $borderRadius;
      color: var(--input-chips-txt-color);
      display: inline-flex;
      font-size: 14px;
      gap: 5px;
      height: 24px;
      line-height: 24px;
      margin: 0;
      max-width: 100%;
      padding: 0 8px;

      &-label {
        width: 100%;

        @include text-ellipsis();

        & + .p-chips-token-icon {
          margin-left: .4em;
        }
      }

      @include transition(ease-in-out background-color .15s, ease-in-out color .15s);

      i.dvl-icon {
        font-size: 16px;
      }

      span {
        vertical-align: middle;
      }

      &-icon {
        font-size: 18px;
        right: 3px;
        vertical-align: middle;
        color: var(--input-chips-icon-color);

        @include transition(ease-in-out color .15s);
        @include override-font("\e93f");
      }

      &:hover:not(:disabled) {
        background-color: var(--input-chips-bg-hover-color);
        color: #fff;

        .p-chips-token-icon {
          color: #fff;
        }
      }

      &:active:not(:disabled) {
        background-color: var(--input-chips-bg-pressed-color);
        color: #fff;

        .p-chips-token-icon {
          color: #fff;
        }
      }
    }
  }

  ul.p-inputtext {
    display: inline-flex;
    gap: 6px;
    line-height: 36px;
    padding: 5px 8px;
    width: 100%;

    .p-chips-token-icon:before {
      padding-left: 5px;
    }

    .p-chips-token {
      &:has(> span.disabled) {
        span.disabled {
          opacity: 1;
        }

        timescircleicon {
          display: none;
        }
      }
    }
  }
}

.p-inputgroup {
  .p-chips {
    min-height: 36px;
    width: 100% !important;

    ul:hover, ul:focus {
      border-right: 0;
    }
  }
}
