@import 'scss/styles.scss';
@import 'scss/input-dropdown.scss';

.ca-input-dropdown {
  .arrow {
    display: none !important;
  }

  .popover-body {
    margin-top: -2px !important;

    .dropdown-options-divider {
      content: '';
      height: 1px;
      border-radius: 1px;
      background-color: $black;
      position: absolute;
      z-index: 99999;
      top: 0px;
      left: 0px;

      @for $i from 1 through 800 {
        &.w-col-#{$i} {
          width: unquote($i - 8 + 'px');
        }
      }

      &.dispatch_dropdown {
        top: -4px;
      }
    }

    .w-col-288 {
      width: 288px;
    }

    // ---------------------------------------- DROPDOWN ----------------------------------------
    .dropdown-options {
      position: relative;
      top: 0px;
      left: 0px;
      z-index: 1000;
      max-height: 190px;
      width: 100%;
      background-color: $ta-black-2;
      border-radius: 3px;
      padding: 4px;
      overflow: hidden;

      &.scroll {
        transition: all 0.3s ease-in-out;
        overflow-y: scroll !important;
        padding-right: 0px;

        .plus-icon {
          margin-right: 1px !important;
        }

        &.load-dispatcher-wrapper {
          overflow-y: scroll;
          max-height: 220px;

          .scrollable-element {
            max-height: 208px;
            overflow-y: scroll;
          }
        }

        &::-webkit-scrollbar {
          width: 3px;
        }
        &::-webkit-scrollbar-thumb {
          background-color: transparent;
          border: 6px solid $ta-light-grey-2;
          border-radius: 1px;
        }
        &::-webkit-scrollbar-track {
          padding: 0;
          position: relative;
          right: 0;
          top: 0;
          background: transparent;
        }
      }

      &-fuel-franchise {
        padding: 4px;
        max-height: 300px;
      }

      &.no-result-container {
        padding: 6px 10px !important;
      }

      //------------------------ Default Template ------------------------
      .dropdown-option {
        padding: 3px 4px;
        height: 26px;
        font-size: 14px;
        font-weight: 400;
        border-radius: 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: $white-2;

        &.no-result {
          line-height: 14px;
          font-size: 11px;
          font-weight: 700;
          color: $bw5;
          height: auto !important;
          -webkit-user-select: none;
          -moz-user-select: none;
          -ms-user-select: none;
          user-select: none;
          pointer-events: none;

          &:hover {
            background-color: transparent !important;
          }
          div {
            padding-top: 1px;
          }
        }

        &.add-new {
          padding: 4.5px 6px 4.5px 4px;
          font-size: 11px;
          font-weight: 700;
          color: $ta-blue-19;
          position: relative;
          transition:
            background 0.2s ease-in-out,
            color 0.2s ease-in-out;

          &:hover {
            color: $white-2;
            background: $ta-blue-21;
          }
        }

        &.active-repair-truck-trailer {
          color: $ta-blue-7;
          position: relative;

          &:hover {
            color: $ta-blue-17;
            transition: all 0.3s ease-in-out;
          }
        }
      }

      //------------------------ Svg-Template-Logo Template ------------------------
      .dropdown-option:not(:hover):not(.active):not(.dropdown-option-hovered) {
        .svg-template-logo {
          height: 18px;

          svg:not(:hover) {
            path {
              fill: $ta-light-grey-2;
            }
          }
        }

        // ---------------------------------------- DROPDOWN GROUPS ----------------------------------------
        &.dropdown-options-groups {
          max-height: 194px;
          overflow-y: scroll;

          // Merged Dropdown
          &.merge-dropdown-body-with-input {
            border-radius: 0 0 2px 2px !important;
            left: -4px !important;
          }

          // Dispatch Dropdown
          &.svgtext-dispatch-template {
            top: -4px;

            .plus-icon {
              margin-right: 4px;
            }

            .icon {
              &.blue {
                circle {
                  fill: $ta-blue-19 !important;
                }
              }

              &.yellow {
                circle {
                  fill: $ta-yellow-4 !important;
                }
              }

              &.red {
                circle {
                  fill: $ta-red-13 !important;
                }
              }

              &.green {
                circle {
                  fill: $ta-green-4 !important;
                }
              }
            }
          }
        }
      }
    }
  }

  .w-col-288 {
    width: 288px !important;
  }

  &.bs-popover-top {
    .popover-body {
      margin-top: 0px !important;

      .dropdown-options-divider.dispatch_dropdown {
        top: auto;
        bottom: -6px;
      }

      .dropdown-options {
        &.merge-dropdown-body-with-input {
          border-radius: 2px 2px 0 0 !important;
        }

        &.svgtext-dispatch-template {
          top: 6px !important;
        }
      }
    }
  }
}