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

@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
  position: absolute;
  top: $top;
  right: $right;
  bottom: $bottom;
  left: $left;
}
.ff-nlp-option {
  color: var(--nlp-option-color);
  display: flex;
  gap: 4px;
  align-items: center;
}
.ff-nlp-dropdown-wrapper {
  .ff-nlp-options-wrapper {
    max-height: 256px;
    z-index: 999;
    position: absolute;
    border: 1px solid var(--nlp-border-color);
    box-sizing: border-box;
    margin-top: 4px;
    border-radius: 4px;
    background-color: var(--primary-icon-color);
    overflow: hidden auto;
    display: flex;
    justify-content: space-between;
    overflow: hidden;
    // transition: all 0.3s ease-in-out;
    .ff-nlp-options-primary-wrapper {
      max-height: 240px;
      z-index: 100;
      min-width: 290px;
      box-sizing: border-box;
      overflow: scroll;
      scrollbar-width: none;
      flex-grow: 1;
      transition: max-height 0.3s ease-in-out;
    }
    .ff-nlp-options-primary-wrapper::-webkit-scrollbar {
      display: none;
    }

    .ff-nlp-option {
      width: calc(100% - 10px);
      border: 1px solid transparent;
      padding: 0 4px;
      overflow: hidden;
      white-space: nowrap;
      height: 32px;
      text-overflow: ellipsis;
      cursor: pointer;
      &:hover,
      &.ff-nlp-option--selected {
        background-color: var(--nlp-hover-color);
      }
      &:focus {
        outline: none;
        background-color: var(--nlp-hover-color);
      }
    }

    .ff-nlp-no-option {
      width: calc(100% - 16px);
      margin: 0;
      overflow: hidden;
      padding: 0 8px;
      white-space: nowrap;
      text-overflow: ellipsis;
      cursor: not-allowed;
    }
  }
  .ff-nlp-data-show {
    width: 380px;
    height: 255px;
    border: 1px solid transparent;
    overflow: scroll;
    scrollbar-width: none;
    padding: 8px;
    border: 1px solid var(--nlp-border-color);
    position: relative;
    border-radius: 4px;
  }
  .ff-nlp-data-hide {
    display: none;
  }
  .nlp-categories {
    padding: 0px 2px;
    gap: 10px;
    border-radius: 2px;
  }

  .ff-nlp-data-side-menu {
    display: flex;
    flex-direction: column;
    row-gap: 8px;
    color: var(--nlp-option-color);
  }
  .ff-nlp-data-show::-webkit-scrollbar {
    display: none;
  }

  .nlp-details-header {
    color: var(--status-skipped-text-color);
    display: flex;
    flex-direction: column;
  }
  .nlp-details {
    color: var(--status-skipped-text-color);
  }
  .ff-nlp-options-wrapper-main {
    display: flex;
    flex-direction: column;
    width: 302px;
    justify-content: space-between;
    flex-grow: 1;
  }
}
.ff-nlp {
  color: var(--nlp-color);
  background-color: var(--nlp-background-color);
}

.ff-sg {
  color: var(--nlp-step-group-color);
  background-color: var(--nlp-step-group-background);
}

.ff-pe {
  color: var(--nlp-pe-color);
  background-color: var(--nlp-pe-background);
}

.ff-nlp-web-service-div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 32px;
}
.ff-nlp-primary-web-service-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
}