@use '../../assets/styles/fonts';

.ff-add-module-container {
  .ff-add-module-edit-container {
    display: flex;

    .ff-add-module-input-with-dropdown {
      display: flex;
      border: 1px solid var(--input-default-border-color);
      border-radius: 4px;
      padding: 0;
      position: relative;
      justify-content: space-between;

      &--danger{
        border-color: var(--input-error-text-color);
  
        .ff-add-module-input {
          border-color: var(--input-error-text-color) !important;
        }
      }
    }

    .ff-add-module-dropdown {
      .ff-select {
        background-color: var(--base-bg-color);
      }
    }

    &:focus-within {
      .ff-add-module-input-with-dropdown {
        border-color: var(--nlp-color);

        .ff-add-module-label-container {
          top: -6px;
          @extend .fontXs;
          background-color: var(--input-label-bg-color);
          line-height: 12px;
          padding: 0px 2px;
          margin-left: 10px;

          .ff-add-module-label {
            color: var(--nlp-color);
          }
        }

        .ff-add-module-input {
          border-color: var(--nlp-color);
        }

        &--danger{
          border-color: var(--input-error-text-color);

          .ff-add-module-input {
            border-color: var(--input-error-text-color);
          }
        }
      }
    }

    .ff-add-module-input-container {
      display: flex;
      flex-direction: column;
      flex: 1;

      .ff-add-module-label-container {
        display: flex;
        gap: 2px;
        position: absolute;
        border: none;
        outline: none;
        line-height: 18px;
        padding: 2px 6px;
        transition: all 0.3s ease-in-out;

        .ff-add-module-label {
          color: var(--input-default-label-color);
        }
      }

      .ff-add-module-input {
        @extend .fontSm;
        height: 100%;
        padding: 0px 6px;
        border-radius: 4px;
        border: none;
        outline: none;
        line-height: 18px;
        color: var(--add-module-text-color);

        &--border-right {
          border-radius: 4px 0 0 4px;
          border-right: 1px solid var(--input-default-border-color);
        }
      }

      &--float {
        .ff-add-module-label-container {
          top: -6px;
          @extend .fontXs;
          background-color: var(--input-label-bg-color);
          line-height: 12px;
          padding: 0px 2px;
          margin-left: 10px;

          .ff-add-module-label {
            color: var(--nlp-color);
          }
        }
      }
    }

    .ff-module-icon-container {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .required-asterisk {
      color: var(--input-error-text-color);
      padding-right: 4px;
    }
  }

  .ff-add-module-display-text {
    color: var(--add-module-text-color);
    white-space: nowrap;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;

    .ff-highlight-bg {
      background-color: var(--text-bg-highlight);
    }
  }

  .error-text {
    margin: 0 0 0 5px;
    color: var(--label-edit-error-text);
  }
}