.ff-label-select-input {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;

  .ff-input-disabled {
    cursor: not-allowed;
  }

  .ff-label-select-input-container.ff-disabled {
    opacity: 0.6;
    pointer-events: none;
  }
  .ff-label-select-input-container {
    display: flex;
    align-items: center;
    padding: 2px;
    flex-wrap: wrap;
    border: 1px solid var(--input-default-border-color);
    border-radius: 4px;
    position: relative;
    transition: border-color 0.2s ease;

    &.ff-error {
      border-color: var(--error);
    }

    &:focus-within {
      border-color: var(--primary-color);
    }

    &:hover {
      border-color: var(--primary-color);
    }

    .ff-label-select-input-inner-container {
      padding-left: 10px;
      display: flex;
      align-items: center;
      overflow-y: auto;
      max-height: 64px;
      width: 100%;
      gap: 5px;
      scrollbar-width: none;

      .ff-tag {
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        font-size: 10px;
        border: 0.5px solid var(--ff-select-option-border-color);
        padding-left: 4px;
        gap: 4px;
        height: 16px;
        border-radius: 15px;
      }

      .ff-hidden-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 15px;
        padding: 0 8px;
        font-size: 10px;
        cursor: pointer;

        &:hover .ff-tooltip {
          display: block;
        }
      }

      .ff-input-wrapper {
        flex: 1;
        min-width: 120px;

        .ff-placeholder {
          position: absolute;
          left: 8px;
          top: 50%;
          transform: translateY(-50%);
          color: var(--input-default-border-color);
          font-size: 14px;
          pointer-events: none;
          transition: all 0.5s ease;
          font-size: 12px;

          &.ff-placeholder-error {
            color: var(--error);
          }
        }

        .ff-placeholder-active {
          top: 0px;
          left: 8px;
          font-size: 10px;
          color: var(--primary-color);
          background: var(--ff-select-background-color);
          padding: 0 4px;
          transition: all 0.3s ease;
        }

        .ff-input {
          border: none;
          outline: none;
          font-size: 10px;
          padding: 4px;
          width: 100%;
          margin: 4px 0;

          &.ff-input-error {
            border-color: var(--error);
          }

          &::placeholder {
            color: transparent;
          }
        }
      }
    }
  }
  .ff-error-message {
    color: var(--error);
    margin-top: -5px;
  }

  .ff-required-asterisk {
    color: var(--error);
  }

  .ff-tag-box {
    border: 1px solid var(--input-default-border-color);
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0px 1px 4px 0px var(--ff-mini-modal-arrow-shadow);
    border: 0.5px solid var(--input-default-border-color);
    border-radius: 4px;

    .ff-tag-box-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      font-size: 10px;
      border: 0.5px solid var(--input-default-border-color);
      padding-left: 4px;
      gap: 4px;
      height: 16px;
      border-radius: 15px;
    }
  }
}