carriera-intern 0.0.0

package/projects/carriera-intern-components/src/app/components/input/input.component.scss

@@ -0,0 +1,3000 @@
+@use "variables" as *;
+
+$bezier: cubic-bezier(0.46, 0.03, 0.51, 0.95);
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  transition: background-color 5000s ease-in-out 0s !important;
+}
+
+input:-webkit-autofill:focus {
+  -webkit-text-fill-color: #ffffff !important;
+}
+
+input:-moz-autofill,
+input:-moz-autofill-preview {
+  filter: none;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+
+p,
+ul,
+ol,
+dl,
+blockquote,
+figure,
+pre {
+  margin: 0;
+}
+
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+
+button {
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+/* Remove default list styles on ul, ol */
+ul,
+ol {
+  padding-left: 1.5rem;
+  list-style-position: outside;
+}
+
+/* Link styles */
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/* Tables */
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+/* Remove outline for focus on mouse users, but keep it for keyboard */
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.app-input-container {
+  // Text Colors
+  --color-text: #{$color-text-base-content};
+  --color-text-negative: #{$color-text-base-negative};
+  --color-text-heading: #{$color-text-base-heading};
+  --color-text-subtle: #{$color-text-base-content-subtle};
+  --color-text-inverse: #{$color-text-base-inverse};
+
+  // Icon Colors
+  --color-icon-neutral: #{$color-icon-base-neutral};
+  --color-icon-negative: #{$color-icon-base-negative};
+  --color-icon-positive: #{$color-icon-base-positive};
+  --color-icon-inverse: #{$color-icon-base-inverse};
+  --color-icon-disable: #{$color-icon-base-disable};
+
+  // Surface Input Colors - Neutral
+  --color-surface-neutral: #{$color-surface-input-neutral};
+  --color-surface-neutral-hover: #{$color-surface-input-neutral-hover};
+  --color-surface-neutral-focus: #{$color-surface-input-neutral-focus};
+
+  // Surface Input Colors - Positive
+  --color-surface-positive: #{$color-surface-input-positive};
+  --color-surface-positive-hover: #{$color-surface-input-positive-hover};
+  --color-surface-positive-focus: #{$color-surface-input-positive-focus};
+
+  // Surface Input Colors - Negative
+  --color-surface-negative: #{$color-surface-input-negative};
+  --color-surface-negative-hover: #{$color-surface-input-negative-hover};
+  --color-surface-negative-focus: #{$color-surface-input-negative-focus};
+
+  // Surface Input Colors - Disable
+  --color-surface-disable: #{$color-surface-input-disable};
+
+  &.inverse {
+    // Text Colors
+    --color-text: #{$color-text-base-inverse};
+    --color-text-negative: #{$color-inverse-text-base-negative};
+    --color-text-heading: #{$color-text-base-inverse};
+    --color-text-inverse: #{$color-text-base-inverse};
+
+    // Icon Colors
+    --color-icon-neutral: #{$color-inverse-icon-base-neutral};
+    --color-icon-negative: #{$color-inverse-icon-base-negative};
+    --color-icon-positive: #{$color-inverse-icon-base-positive};
+    --color-icon-disable: #{$color-inverse-icon-base-disable};
+
+    // Surface Input Colors - Neutral
+    --color-surface-neutral: #{$color-inverse-surface-input-neutral};
+    --color-surface-neutral-hover: #{$color-inverse-surface-input-neutral-hover};
+    --color-surface-neutral-focus: #{$color-inverse-surface-input-neutral-focus};
+
+    // Surface Input Colors - Positive
+    --color-surface-positive: #{$color-inverse-surface-input-positive};
+    --color-surface-positive-hover: #{$color-inverse-surface-input-positive-hover};
+    --color-surface-positive-focus: #{$color-surface-input-positive-focus};
+
+    // Surface Input Colors - Negative
+    --color-surface-negative: #{$color-inverse-surface-input-negative};
+    --color-surface-negative-hover: #{$color-inverse-surface-input-negative-hover};
+    --color-surface-negative-focus: #{$color-surface-input-negative-focus};
+
+    // Surface Input Colors - Disable
+    --color-surface-disable: #{$color-inverse-surface-input-disable};
+
+    // Inverse variant specific styles
+    &:not(.has-error) {
+      &:not(.has-valid) {
+        .app-input {
+          &:focus-visible {
+            color: $color-text-base-content;
+          }
+        }
+        &:has(.app-input:focus-visible) {
+          .icon {
+            color: $color-icon-base-neutral !important;
+          }
+          .separator {
+            background-color: $color-icon-base-neutral !important;
+          }
+          .bg-icon {
+            background-color: $color-icon-base-neutral !important;
+            color: $color-inverse-surface-input-neutral-focus;
+          }
+        }
+      }
+    }
+
+    &.is-empty {
+      &:has(.app-input:focus-visible) {
+        .icon {
+          color: $color-icon-base-neutral !important;
+        }
+        .bg-icon {
+          background-color: $color-icon-base-neutral !important;
+          color: $color-inverse-surface-input-neutral-focus;
+        }
+        .separator {
+          background-color: $color-icon-base-neutral !important;
+        }
+      }
+    }
+
+    &.has-text {
+      &:has(.app-input:disabled) {
+        .app-input-label {
+          color: $color-text-base-heading !important;
+        }
+      }
+    }
+  }
+
+  position: relative;
+  border-radius: 2px;
+  background-color: var(--color-surface-neutral);
+  color: var(--color-text);
+  transition: background-color 0.1s $bezier;
+  display: flex;
+
+  &:hover,
+  &.hovered {
+    background-color: var(--color-surface-neutral-hover);
+
+    &:not(:has(.app-input:disabled)) {
+      .sub-label {
+        margin-right: 44px;
+      }
+    }
+  }
+  &.has-text {
+    .app-input-label {
+      transform: translateY(-20px);
+      font-weight: 600;
+      font-size: 11px;
+      color: var(--color-text-heading) !important;
+    }
+
+    &.fade-placeholder {
+      .app-input-label {
+        transform: translateY(0px);
+        opacity: 0;
+      }
+    }
+
+    .subcontent {
+      opacity: 1 !important;
+    }
+
+    &.static-placeholder {
+      .app-input-label {
+        transform: translateY(0px);
+        opacity: 1;
+        color: var(--color-text);
+      }
+    }
+
+    &.is-address {
+      &:hover {
+        .button-icon {
+          opacity: 1;
+          pointer-events: auto;
+        }
+
+        .bg-icon {
+          background-color: var(--color-icon-neutral);
+          color: var(--color-surface-neutral-hover);
+        }
+      }
+      &:has(.app-input:focus-visible) {
+        .button-icon {
+          opacity: 1;
+          pointer-events: auto;
+        }
+
+        .bg-icon {
+          background-color: var(--color-icon-inverse);
+          color: var(--color-surface-neutral-focus);
+        }
+      }
+    }
+  }
+
+  &:has(.app-input:focus-visible) {
+    background-color: var(--color-surface-neutral-focus);
+    .app-input-label {
+      transform: translateY(-20px);
+      font-weight: 600;
+      font-size: 11px;
+      color: var(--color-text-heading) !important;
+    }
+
+    .subcontent {
+      opacity: 1 !important;
+      color: #ffffffb2;
+      left: unset !important;
+      right: 4px !important;
+    }
+
+    &.has-text {
+      .subcontent {
+        right: 26px !important;
+      }
+    }
+
+    .sub-label {
+      margin-right: 44px;
+    }
+
+    &.fade-placeholder {
+      .app-input-label {
+        transform: translateY(0px);
+        opacity: 0;
+      }
+    }
+
+    &.static-placeholder {
+      .app-input-label {
+        transform: translateY(0px);
+        opacity: 1;
+        color: var(--color-text-inverse) !important;
+      }
+    }
+
+    .bg-icon {
+      background-color: var(--color-icon-inverse);
+      color: var(--color-surface-neutral-focus);
+    }
+
+    .separator {
+      background-color: var(--color-icon-inverse) !important;
+    }
+  }
+
+  &:has(.app-input:disabled) {
+    background-color: var(--color-surface-disable);
+
+    &:hover,
+    &.hovered {
+      background-color: var(--color-surface-disable);
+    }
+
+    &:focus {
+      background-color: var(--color-surface-disable);
+    }
+    .app-input-label {
+      color: var(--color-text-subtle);
+    }
+
+    .separator {
+      background-color: var(--color-icon-disable);
+    }
+
+    // ! DROPDOWN ICON INVISIBLE WHEN DISABLED
+    .dropdown-icon-container {
+      opacity: 0;
+    }
+
+    &:not(.disabled-removable) {
+      .cancel-button {
+        display: none !important;
+      }
+    }
+  }
+
+  &:has(.app-input:required):not(:has(.app-input:disabled)) {
+    .app-input-name::after {
+      content: " *";
+      color: var(--color-text-negative);
+    }
+  }
+
+  &:not(.has-error).is-empty {
+    &:not(:has(.app-input:focus-visible)) {
+      .dropdown-icon-container:hover {
+        .dropdown-icon {
+          color: $color-black-300 !important;
+        }
+      }
+      .hover-icon:hover {
+        color: $color-black-300 !important;
+      }
+    }
+
+    &:has(.app-input:focus-visible) {
+      .dropdown-icon-container:hover {
+        .dropdown-icon {
+          color: $color-white-50 !important;
+        }
+      }
+      .hover-icon:hover {
+        color: $color-white-50 !important;
+      }
+    }
+  }
+
+  &:not(.has-error):not(.has-valid) {
+    &:has(.app-input:focus-visible) {
+      .dropdown-icon-container:hover {
+        .dropdown-icon {
+          color: $color-white-50 !important;
+        }
+      }
+      .hover-icon:hover {
+        color: $color-white-50 !important;
+      }
+    }
+  }
+}
+
+.subcontent {
+  pointer-events: none;
+  position: absolute;
+  left: 6px;
+  color: #919191;
+
+  user-select: none;
+  top: 50%;
+  transform: translateY(-50%);
+
+  transition:
+    right 0.1s ease-in-out,
+    left 0.1s ease-in-out,
+    transform 0.1s $bezier,
+    opacity 0.1s $bezier,
+    color 0.1s $bezier;
+
+  opacity: 0;
+
+  .subcontent-hide {
+    opacity: 0 !important;
+  }
+  font-family: Montserrat;
+  font-weight: 400;
+  font-style: Regular;
+  font-size: 14px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  height: 18px;
+  overflow: hidden;
+}
+
+.app-input-label {
+  position: absolute;
+  display: flex;
+  gap: 4px;
+  left: 0;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  pointer-events: none;
+  padding: 0.25rem 6px;
+  color: var(--color-text);
+  transition:
+    transform 0.1s ease-in-out,
+    font-weight 0.1s ease-in-out,
+    color 0.1s ease-in-out,
+    font-size 0.1s ease-in-out,
+    opacity 0.1s ease-in-out;
+  transform: translateY(0);
+  user-select: none;
+
+  &.placeholder-color {
+    color: var(--placeholder-color) !important;
+  }
+}
+
+.app-input {
+  padding: 0.25rem 6px;
+  width: 100%;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  border: 0;
+  outline: none;
+  margin-top: auto;
+  background-color: transparent;
+  transition: color 0.1s $bezier;
+  color: var(--color-text);
+  &:focus-visible {
+    color: var(--color-text-inverse);
+  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  position: relative;
+}
+
+.app-input-error {
+  position: absolute;
+  bottom: -16px;
+  right: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  opacity: 0;
+  pointer-events: none;
+  user-select: none;
+  transition:
+    opacity 0.1s $bezier,
+    transform 0.1s $bezier;
+  color: var(--color-text-negative);
+  transform: translateY(-10px);
+}
+
+.app-input-container.has-error {
+  &:not(.has-icon):not(.has-password):not(.has-right) {
+    .app-input {
+      padding-right: 26px; // To show the error icon
+    }
+  }
+
+  &:hover,
+  &:has(.app-input:focus-visible) {
+    &:not(.has-right) {
+      .app-input {
+        padding-right: 26px;
+      }
+    }
+  }
+
+  &.has-right {
+    .app-input {
+      padding-right: 6px;
+      padding-left: 26px;
+    }
+  }
+
+  background-color: var(--color-surface-negative);
+
+  &:hover,
+  &.hovered {
+    background-color: var(--color-surface-negative-hover);
+
+    &.has-text {
+      .button-icon {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .bg-icon {
+        background-color: var(--color-icon-negative);
+        color: var(--color-surface-negative-hover);
+      }
+    }
+  }
+
+  &:has(.app-input:focus-visible) {
+    &.has-text {
+      .button-icon {
+        opacity: 1;
+      }
+
+      .bg-icon {
+        background-color: var(--color-icon-inverse);
+        color: var(--color-surface-negative-focus);
+      }
+    }
+
+    &.is-empty,
+    &.has-dropdown:not(.has-selected) {
+      background-color: var(--color-surface-neutral-focus) !important;
+      .app-input-error {
+        opacity: 0;
+      }
+
+      .bg-icon {
+        color: var(--color-surface-neutral-focus) !important;
+      }
+    }
+
+    background-color: var(--color-surface-negative-focus);
+    color: var(--color-text-inverse);
+  }
+
+  &:has(.app-input:not(:focus-visible)).app-input-container:not(:hover),
+  &.is-empty:has(.app-input:not(:focus-visible)) {
+    .warning-icon {
+      opacity: 1 !important;
+    }
+  }
+
+  .app-input-error {
+    opacity: 1;
+    transform: translateY(0px);
+    pointer-events: auto;
+  }
+
+  .app-input::selection {
+    background-color: #ffffff4d;
+  }
+
+  .icon-container,
+  .dropdown-icon-container {
+    .separator {
+      background-color: var(--color-icon-negative);
+    }
+    .icon {
+      color: var(--color-icon-negative);
+    }
+  }
+
+  &:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) {
+    .bg-icon:hover {
+      background-color: $color-red-700 !important;
+    }
+    .dropdown-icon-container:hover {
+      .dropdown-icon {
+        color: $color-red-700 !important;
+      }
+    }
+    .hover-icon:hover {
+      color: $color-red-700 !important;
+    }
+  }
+
+  &:not(.removable):has(.app-input:focus-visible) {
+    .bg-icon:hover {
+      background-color: $color-white-50 !important;
+    }
+
+    .dropdown-icon-container:hover {
+      .dropdown-icon {
+        color: $color-white-50 !important;
+      }
+    }
+    .hover-icon:hover {
+      color: $color-white-50 !important;
+    }
+  }
+}
+
+.app-input-container.has-valid {
+  &:not(.has-icon):not(.has-password):not(.has-right) {
+    .app-input {
+      padding-right: 26px; // To show the valid icon
+    }
+  }
+
+  &:hover,
+  &:has(.app-input:focus-visible) {
+    &:not(.has-right) {
+      .app-input {
+        padding-right: 26px;
+      }
+    }
+  }
+
+  &.has-right {
+    .app-input {
+      padding-right: 6px;
+      padding-left: 26px;
+    }
+  }
+
+  &.has-text:not(.has-dropdown),
+  &.has-dropdown.has-selected:not(.has-multiple-dropdown),
+  &.has-multiple-dropdown.has-text {
+    &:not(.in-table) {
+      background-color: var(--color-surface-positive);
+    }
+
+    &:hover,
+    &.hovered {
+      background-color: var(--color-surface-positive-hover);
+
+      .button-icon {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .bg-icon {
+        background-color: var(--color-icon-positive);
+        color: var(--color-surface-positive-hover);
+      }
+    }
+
+    &:has(.app-input:focus-visible) {
+      background-color: var(--color-surface-positive-focus);
+      color: var(--color-text-inverse);
+
+      .button-icon {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      .bg-icon {
+        background-color: var(--color-icon-inverse);
+        color: var(--color-surface-positive-focus);
+      }
+    }
+
+    &:has(.app-input:not(:focus-visible)).app-input-container:not(:hover) {
+      .positive-icon {
+        opacity: 1;
+      }
+    }
+
+    .app-input::selection {
+      background-color: #ffffff4d;
+    }
+
+    .icon-container,
+    .dropdown-icon-container {
+      .separator {
+        background-color: var(--color-icon-positive);
+      }
+      .icon {
+        color: var(--color-icon-positive);
+      }
+
+      .password-key {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &:not(.removable):not(:has(.app-input:focus-visible)):not(.inverse) {
+      .bg-icon:hover {
+        background-color: $color-blue-700 !important;
+      }
+
+      .dropdown-icon-container:hover {
+        .dropdown-icon {
+          color: $color-blue-700 !important;
+        }
+      }
+      .hover-icon:hover {
+        color: $color-blue-700 !important;
+      }
+    }
+
+    &:not(.removable):has(.app-input:focus-visible) {
+      .bg-icon:hover {
+        background-color: $color-white-50 !important;
+      }
+      .dropdown-icon-container:hover {
+        .dropdown-icon {
+          color: $color-white-50 !important;
+        }
+      }
+      .hover-icon:hover {
+        color: $color-white-50 !important;
+      }
+    }
+  }
+}
+
+.in-table {
+  background-color: transparent;
+
+  &.has-error,
+  &.has-valid.has-text {
+    background-color: transparent;
+  }
+
+  &.has-error {
+    &:not(:hover).in-table:not(
+        .app-input-container:has(.app-input:focus-visible)
+      ) {
+      .app-input {
+        color: var(--color-text-negative);
+      }
+
+      &:not(.static-placeholder) {
+        .app-input-label {
+          color: var(--color-text-negative);
+        }
+      }
+    }
+  }
+
+  .dropdown-icon-container {
+    opacity: 0;
+  }
+
+  &:hover {
+    .dropdown-icon-container {
+      opacity: 1;
+    }
+  }
+
+  &:has(.app-input:focus-visible) {
+    .dropdown-icon-container {
+      opacity: 1;
+    }
+  }
+}
+
+.app-input-icon {
+  position: absolute;
+  right: 4px;
+  top: 4px;
+  pointer-events: none;
+  transition:
+    color 0.1s $bezier,
+    background-color 0.1s $bezier,
+    opacity 0.1s $bezier;
+}
+
+.button-icon {
+  opacity: 0;
+  pointer-events: none;
+
+  &:hover {
+    cursor: pointer;
+  }
+}
+
+.bg-icon {
+  background-color: var(--color-icon-neutral);
+  color: var(--color-surface-neutral);
+  border-radius: 1px;
+  height: 18px;
+  width: 18px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+
+  transition:
+    background-color 0.1s $bezier,
+    color 0.1s $bezier,
+    opacity 0.1s $bezier,
+    transform 0.1s $bezier;
+
+  transform-box: border-box;
+  transform-origin: center;
+  will-change: transform;
+
+  svg {
+    transition: transform 0.1s $bezier;
+  }
+
+  &:hover {
+    transform: scale(calc(22 / 18));
+    svg {
+      transform: scale(calc(18 / 22));
+    }
+  }
+
+  &:active {
+    transform: scale(1);
+  }
+}
+
+.round-icon {
+  background-color: #919191;
+  color: #2f2f2f;
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  padding: 0;
+  display: grid;
+  place-items: center;
+
+  transition:
+    background-color 0.1s $bezier,
+    color 0.1s $bezier,
+    opacity 0.1s $bezier;
+}
+
+.positive-icon {
+  color: var(--color-icon-positive);
+  height: 18px;
+  width: 18px;
+  display: grid;
+  place-items: center;
+  opacity: 0;
+}
+
+.warning-icon {
+  color: var(--color-icon-negative);
+  height: 18px;
+  width: 18px;
+  display: grid;
+  place-items: center;
+  opacity: 0;
+}
+
+.text-color-positive:not(:hover):not(:has(.app-input:focus-visible)) {
+  .app-input {
+    color: #3b73ed;
+  }
+}
+
+.floating-error {
+  .app-input-error {
+    opacity: 0 !important;
+  }
+}
+
+.static-error {
+  .app-input-error {
+    pointer-events: none !important;
+    transform: translateY(calc(-100% - 4px)) !important;
+    transition:
+      margin 0.1s ease-in-out,
+      opacity 0.1s ease-in-out;
+  }
+
+  &.has-icon {
+    .app-input-error {
+      margin-right: 26px !important;
+    }
+  }
+
+  &:has(.app-input:not(:focus-visible)) {
+    .app-input-error {
+      opacity: 1;
+    }
+  }
+
+  &.has-text {
+    .app-input-error {
+      opacity: 0 !important;
+    }
+  }
+}
+
+.static-placeholder {
+  .app-input-label {
+    position: relative;
+    white-space: nowrap;
+    font-size: 11px;
+    font-weight: 600;
+  }
+
+  .dropdown-selected {
+    overflow: hidden;
+    display: flex !important;
+    justify-content: left !important;
+    .selected-label-hidden {
+      width: max-content;
+      font-size: 11px;
+      font-weight: 600;
+      opacity: 0;
+      user-select: none;
+      pointer-events: none;
+    }
+    .selected-text {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      display: inline-block;
+    }
+  }
+
+  .app-input {
+    padding-left: 0 !important;
+  }
+
+  &.has-dropdown {
+    .cancel-button {
+      display: none;
+    }
+
+    .dropdown-icon-container {
+      .dropdown-icon {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+
+    &:hover,
+    &:has(.app-input:focus-visible) {
+      .icon-container {
+        .icon {
+          opacity: 0;
+        }
+      }
+
+      .dropdown-icon-container {
+        z-index: 5;
+        pointer-events: auto;
+        cursor: pointer;
+        .dropdown-icon {
+          opacity: 1 !important;
+        }
+      }
+    }
+
+    .dropdown-icon-container {
+      right: 4px !important;
+      left: auto !important;
+    }
+  }
+}
+
+.app-input-container.has-icon,
+.app-input-container.has-password,
+.app-input-container.has-dropdown {
+  &:has(.app-input:focus-visible) {
+    .icon-container,
+    .dropdown-icon-container {
+      .icon {
+        color: var(--color-icon-inverse) !important;
+      }
+    }
+  }
+  &.colored-icon {
+    .icon-container {
+      .icon {
+        color: var(--icon-color);
+      }
+    }
+  }
+
+  &.is-empty:has(.app-input:disabled) {
+    .icon-container,
+    .dropdown-icon-container {
+      .icon {
+        color: var(--color-icon-disable) !important;
+      }
+    }
+  }
+
+  .positive-icon,
+  .warning-icon {
+    display: none !important;
+  }
+
+  .icon {
+    height: 18px;
+    width: 18px;
+    display: grid;
+    place-items: center;
+    color: var(--color-icon-neutral);
+    transition:
+      color 0.1s $bezier,
+      opacity 0.1s $bezier;
+    opacity: 1;
+  }
+
+  &:hover:not(:has(.app-input:disabled)):not(.static-placeholder),
+  &:has(.app-input:focus-visible):not(.static-placeholder) {
+    .dropdown-selected {
+      width: calc(100% - 48px) !important;
+    }
+  }
+}
+
+.icon-sm {
+  @extend .icon;
+  height: 14px;
+  width: 14px;
+}
+
+.app-input-container.has-icon,
+.app-input-container.has-password {
+  .icon-container {
+    height: 26px;
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    gap: 4px;
+    padding: 0.25rem 0 0.25rem 6px;
+
+    &:hover {
+      cursor: text;
+    }
+  }
+
+  .subcontent {
+    left: 32px;
+  }
+
+  .app-input-label {
+    left: 27px;
+  }
+
+  .app-input {
+    padding-left: 4px;
+  }
+}
+
+.separator {
+  height: 14px;
+  width: 1px;
+  border-radius: 2px;
+  background-color: var(--color-icon-neutral);
+  transition: background-color 0.1s $bezier;
+  opacity: 40%;
+}
+
+.has-password {
+  .password-icons {
+    display: grid;
+    place-items: center;
+    position: relative;
+    height: 18px;
+    width: 18px;
+
+    .icon {
+      position: absolute;
+      opacity: 0;
+    }
+  }
+
+  &.is-empty:has(.app-input:not(:focus-visible)) {
+    .password-key {
+      opacity: 1 !important;
+    }
+
+    .password-icons {
+      pointer-events: none;
+    }
+  }
+
+  &:has(.app-input:disabled) {
+    .password-icons {
+      pointer-events: none;
+    }
+  }
+
+  &.has-text,
+  &:has(.app-input:focus-visible) {
+    .password-hidden {
+      opacity: 1 !important;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.has-visible {
+  &.has-text,
+  &:has(.app-input:focus-visible) {
+    .password-shown {
+      opacity: 1 !important;
+      &:hover {
+        cursor: pointer;
+      }
+    }
+
+    .password-hidden {
+      opacity: 0 !important;
+      pointer-events: none;
+    }
+  }
+}
+
+.has-number {
+  .number-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    right: 4px;
+    pointer-events: none;
+  }
+
+  .number-buttons {
+    display: flex;
+    gap: 4px;
+    position: absolute;
+    right: 0;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+
+    transition: opacity 0.1s $bezier;
+    pointer-events: none;
+  }
+
+  .plus-icon {
+    cursor: pointer;
+    pointer-events: none;
+  }
+
+  .minus-icon {
+    cursor: pointer;
+    pointer-events: none;
+  }
+
+  &:has(.app-input:focus-visible) {
+    .number-buttons {
+      opacity: 1;
+    }
+
+    .plus-icon {
+      pointer-events: auto;
+    }
+
+    .minus-icon {
+      pointer-events: auto;
+    }
+
+    .button-icon {
+      opacity: 0 !important;
+      pointer-events: none !important;
+    }
+
+    .number-container {
+      width: 60px;
+    }
+
+    cursor: text;
+
+    .subcontent {
+      right: 52px !important;
+    }
+
+    &.has-text {
+      .subcontent {
+        right: 52px !important;
+      }
+    }
+  }
+}
+
+.colored-icon {
+  .icon {
+    color: var(--icon-color) !important;
+  }
+}
+
+// Dropdown
+
+.dropdown-anchor {
+  position: absolute;
+  width: 100%;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.dropdown-infinite-scroll-item {
+  width: 100%;
+  user-select: none;
+  pointer-events: none;
+  opacity: 0;
+  height: 0;
+}
+
+.dropdown-menu {
+  min-width: 0px !important;
+  width: 100%;
+  border: 0;
+  margin-top: 4px;
+  top: 30px;
+  height: var(--unfiltered-height);
+  min-height: var(--unfiltered-height);
+  padding: 0 !important;
+  overflow: hidden;
+  border-radius: 0 !important;
+  background: transparent !important;
+
+  &.has-stroke {
+    .dropdown-menu-content {
+      outline: 1px solid $color-black-200;
+      outline-offset: -1px;
+    }
+  }
+
+  .dropdown-menu-content {
+    position: absolute;
+    width: 100%;
+
+    background-color: $color-text-base-content;
+    border-radius: 3px;
+    padding: 4px;
+    padding-right: 0px;
+    max-height: 244px;
+    z-index: 1100 !important;
+    overflow-y: scroll;
+
+    margin-top: auto !important;
+    scroll-padding: 6px 0;
+
+    &::-webkit-scrollbar {
+      background-color: $color-text-base-content;
+      border-radius: 0 3px 3px 0;
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      width: 4px;
+      background: $color-text-base-content;
+      border-left: 2px solid #919191;
+      background-clip: padding-box;
+      border-radius: 1px 3px 3px 1px;
+    }
+
+    // Firefox scrollbar styles (maintaining webkit styling intent)
+    // Note: Firefox has limited scrollbar customization compared to webkit
+
+    // Firefox-specific targeting to ensure consistent behavior
+    @supports (-moz-appearance: none) {
+      padding-right: 4px;
+      scrollbar-width: 4px;
+      scrollbar-color: #919191 transparent;
+      // Force always visible scrollbar and disable hover effects
+      scrollbar-gutter: stable !important;
+
+      &:hover {
+        scrollbar-color: #919191 transparent;
+        scrollbar-width: 4px !important;
+        scrollbar-gutter: stable !important;
+        // Keep same color on hover
+      }
+    }
+
+    // Additional Firefox scrollbar visibility control
+    @-moz-document url-prefix() {
+      overflow: -moz-scrollbars-vertical;
+      scrollbar-width: 4px;
+      scrollbar-color: #919191 transparent;
+    }
+  }
+}
+
+.option-icon {
+  color: #6c6c6c;
+  transition: color 0.1s $bezier;
+
+  &.full-size {
+    width: max-content;
+    min-width: 100%;
+    height: 18px !important;
+    min-height: 18px;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    svg {
+      height: 18px;
+      width: max-content;
+    }
+  }
+}
+
+.cai-color {
+  color: var(--color) !important;
+  transition: color 0.1s $bezier;
+}
+
+.color-item {
+  &:hover {
+    .cai-color {
+      color: var(--hover-color) !important;
+    }
+  }
+}
+
+.dropdown-item {
+  color: white;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 18px;
+  height: 26px;
+  padding: 4px;
+  width: 100%;
+
+  scroll-margin: 6px 0;
+
+  outline: 1px solid transparent;
+  outline-offset: -1px;
+
+  &.focused {
+    outline: 1px solid $color-black-200 !important;
+
+    .end-item-base {
+      opacity: 0;
+    }
+    .end-item-hover {
+      opacity: 1;
+    }
+
+    .full-icon {
+      color: #ffffffb2;
+    }
+
+    .truck-trailer-option {
+      opacity: 1;
+    }
+  }
+
+  .icon {
+    color: $color-icon-base-neutral;
+  }
+
+  .dropdown-content-with-icon {
+    max-width: calc(100% - 22px);
+    overflow-x: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dropdown-content-hazardous {
+    max-width: calc(100% - 40px);
+    overflow-x: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .dropdown-content {
+    max-width: 70%;
+    overflow-x: hidden;
+    word-break: break-all;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  gap: 4px;
+
+  background-color: #2f2f2f;
+  transition:
+    background-color 0.1s $bezier,
+    color 0.1s $bezier,
+    outline 0.1s $bezier;
+  border-radius: 2px;
+
+  &:hover {
+    &:not(.no-hover) {
+      background-color: $color-inverse-surface-input-neutral;
+
+      .end-item-base {
+        opacity: 0;
+      }
+      .end-item-hover {
+        opacity: 1;
+      }
+
+      .full-icon {
+        color: #ffffffb2;
+      }
+
+      .truck-trailer-option {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.no-hover {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &:focus-visible {
+    background-color: $color-inverse-surface-input-neutral;
+    border: 0;
+    outline: none;
+  }
+
+  &:not(:first-child) {
+    margin-top: 4px;
+  }
+
+  position: relative;
+
+  &.banned {
+    color: #919191;
+    cursor: default;
+    &:hover {
+      color: #919191;
+      background-color: #2f2f2f;
+      .end-item-base {
+        opacity: 0;
+      }
+      .end-item-hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  &.dnu {
+    .round-icon {
+      background-color: $color-icon-base-negative;
+    }
+  }
+
+  .fraud {
+    color: #fab15c !important;
+  }
+
+  &.selected {
+    .dispatch-load-count {
+      color: $color-inverse-icon-base-positive;
+    }
+
+    .unassigned-ltl {
+      color: $color-inverse-icon-base-positive;
+      .icon,
+      .icon-sm {
+        color: $color-inverse-icon-base-positive;
+      }
+    }
+  }
+
+  &:not(:hover):not(.focused):not(.selected) {
+    .truck-icon {
+      color: $color-black-100;
+    }
+
+    .trailer-icon {
+      color: $color-black-100;
+    }
+  }
+}
+
+.dropdown-avatar {
+  &:hover {
+    z-index: 20;
+  }
+}
+
+.no-results {
+  color: #919191;
+  font-weight: 700;
+  cursor: default;
+  pointer-events: none;
+}
+
+.add-new {
+  .dropdown-item-icon {
+    opacity: 1;
+  }
+
+  color: $color-inverse-icon-base-positive !important;
+  &:hover {
+    background-color: #3b73ed66 !important;
+    color: white !important;
+  }
+
+  font-weight: 700;
+  font-size: 11px;
+}
+
+.selected {
+  .dropdown-item-icon {
+    opacity: 1;
+  }
+
+  .dropdown-item-count {
+    color: $color-text-base-inverse;
+    background-color: #3b73ed;
+  }
+  .full-icon {
+    color: #ffffff;
+  }
+  .end-item-base,
+  .end-item-hover {
+    font-weight: 700;
+    color: $color-inverse-icon-base-positive;
+    .icon {
+      color: $color-inverse-icon-base-positive;
+    }
+  }
+
+  font-weight: 700;
+}
+
+.dropdown-item-icon {
+  opacity: 0;
+  color: $color-inverse-icon-base-positive;
+  width: 14px;
+  height: 14px;
+  margin-left: auto;
+
+  &.no-margin {
+    margin-left: 0;
+  }
+}
+
+.dropdown-item-count {
+  position: absolute;
+  right: 6px;
+  top: 50%;
+  transform: translateY(-50%);
+  padding: 2px 5px;
+  border-radius: 10px;
+  background-color: #424242;
+  color: $color-icon-base-inverse;
+  min-width: 18px;
+  line-height: 14px;
+  font-weight: 600;
+  font-size: 11px;
+  text-align: center;
+}
+
+.dropdown-icon-container {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 18px;
+  height: 18px;
+  display: grid;
+  place-items: center;
+  transition: opacity 0.1s $bezier;
+
+  &.open {
+    .dropdown-icon {
+      transform: rotate3d(1, 0, 0, 180deg);
+    }
+  }
+}
+
+.dropdown-icon {
+  transition:
+    transform 0.1s $bezier,
+    color 0.1s $bezier,
+    opacity 0.1s $bezier !important;
+
+  transform: rotate3d(1, 0, 0, 0deg);
+  cursor: pointer;
+}
+
+.has-dropdown {
+  .app-input-icon {
+    right: 26px;
+  }
+
+  &:has(.app-input:focus-visible) {
+    .subcontent {
+      right: 26px !important;
+    }
+
+    &.has-text,
+    &.has-selected {
+      .subcontent {
+        right: 48px !important;
+      }
+    }
+  }
+
+  &:hover,
+  &:has(.app-input:focus-visible) {
+    &:not(.static-placeholder) {
+      &:not(.is-adding) {
+        .app-input {
+          padding-right: 48px !important;
+        }
+      }
+    }
+  }
+}
+
+.has-right {
+  .app-input {
+    text-align: right;
+  }
+
+  .positive-icon {
+    left: 4px;
+    right: auto;
+  }
+
+  .app-input-icon {
+    left: 4px;
+    right: auto;
+  }
+
+  .cancel-button {
+    z-index: 1;
+  }
+
+  &.has-number {
+    .plus-button-container {
+      order: 2;
+    }
+
+    .minus-button-container {
+      order: 1;
+    }
+  }
+
+  &.static-placeholder {
+    .app-input-icon {
+      right: 4px !important;
+      left: auto !important;
+      opacity: 0 !important;
+    }
+
+    &.removable {
+      .cancel-button .bg-icon {
+        background-color: transparent !important;
+      }
+
+      &:hover:not(:has(.app-input:focus-visible)) {
+        &.has-text {
+          .cancel-button .bg-icon {
+            opacity: 1 !important;
+            color: #c20c0c !important;
+            pointer-events: auto !important;
+          }
+
+          .icon-container {
+            .icon {
+              opacity: 0 !important;
+            }
+          }
+        }
+      }
+    }
+
+    &:hover:not(:has(.app-input:focus-visible)) {
+      &.has-text {
+        .cancel-button {
+          opacity: 1 !important;
+        }
+      }
+    }
+
+    &:has(.app-input:focus-visible) {
+      .cancel-button {
+        opacity: 0 !important;
+        pointer-events: none !important;
+      }
+    }
+  }
+
+  .app-input {
+    order: 1;
+  }
+
+  &.has-subcontent {
+    .app-input {
+      flex: 1;
+      min-width: 0;
+      word-break: none;
+    }
+  }
+
+  .dropdown-selected {
+    margin-left: 0 !important;
+    text-align: right !important;
+    right: 0 !important;
+    left: 0 !important;
+    justify-content: flex-end !important;
+    width: 100% !important;
+  }
+
+  .subcontent {
+    position: relative !important;
+    order: 1;
+    display: grid;
+    place-items: center;
+    padding-right: 4px;
+
+    height: unset !important;
+    .subcontent-hide {
+      display: none !important;
+    }
+
+    transform: translateY(0) !important;
+    left: 0 !important;
+    right: unset !important;
+  }
+
+  &.has-text {
+    .subcontent {
+      left: 0 !important;
+      right: unset !important;
+    }
+  }
+
+  &:has(.app-input:focus-visible) {
+    .subcontent {
+      left: 0 !important;
+      right: unset !important;
+    }
+  }
+
+  &.has-icon,
+  &.has-password {
+    .subcontent {
+      padding-right: 0px !important;
+      padding-left: 4px;
+    }
+
+    .dropdown-selected {
+      width: calc(100% - 24px) !important;
+    }
+    .app-input {
+      padding-right: 0px !important;
+    }
+
+    .app-input-label {
+      left: 0px !important;
+    }
+
+    &.fade-placeholder {
+      .app-input-label {
+        left: auto !important;
+        right: 24px !important;
+      }
+    }
+
+    .icon-container {
+      .icon {
+        order: 2;
+      }
+      width: 30px;
+      padding-left: 4px;
+    }
+  }
+
+  &.has-dropdown {
+    .app-input-icon {
+      left: 26px;
+    }
+
+    .dropdown-icon-container {
+      left: 4px;
+    }
+  }
+
+  .warning-icon {
+    display: none !important;
+  }
+
+  &.has-number {
+    .separator {
+      order: 3;
+    }
+
+    .number-buttons {
+      left: 0;
+      right: unset;
+    }
+    .number-container {
+      left: 4px;
+      right: unset;
+    }
+
+    &.app-input-container:has(.app-input:focus-visible) {
+      .app-input {
+        padding-left: 4px;
+      }
+    }
+  }
+
+  .icon-container {
+    order: 2;
+    margin-right: 4px;
+
+    .password-icons {
+      order: 2;
+    }
+  }
+
+  &.fade-placeholder {
+    .app-input-label {
+      right: 0 !important;
+      left: auto !important;
+    }
+
+    &:has(.app-input:required) {
+      .app-input-name:after {
+        content: none !important;
+      }
+      .app-input-name::before {
+        content: "* ";
+        color: var(--color-text-negative);
+      }
+    }
+  }
+}
+
+.removable {
+  &:has(.cancel-button:hover) {
+    background-color: transparent !important;
+
+    .separator {
+      background-color: var(--color-icon-neutral) !important;
+    }
+  }
+}
+
+.no-clear {
+  .cancel-button {
+    display: none !important;
+  }
+}
+
+.is-adding {
+  .dropdown-icon {
+    opacity: 0 !important;
+  }
+  .accept-button {
+    pointer-events: none;
+    opacity: 0 !important;
+  }
+
+  padding-right: 20px;
+
+  &:not(.removable):has(.app-input:focus-visible) {
+    .bg-icon:hover {
+      background-color: $color-white-50 !important;
+    }
+    .dropdown-icon-container:hover {
+      .dropdown-icon {
+        color: $color-white-50 !important;
+      }
+    }
+    .hover-icon:hover {
+      color: $color-white-50 !important;
+    }
+  }
+
+  &:hover,
+  &:has(.app-input:focus-visible) {
+    padding-right: 48px !important;
+  }
+
+  &.has-right {
+    padding-left: 26px;
+
+    &.has-right:hover,
+    &.has-right:has(.app-input:focus-visible) {
+      padding-left: 40px;
+    }
+  }
+
+  .app-input-icon {
+    right: 4px;
+  }
+
+  &.has-text {
+    &:hover {
+      .button-icon {
+        opacity: 1;
+        pointer-events: auto !important;
+      }
+      .accept-button {
+        pointer-events: auto;
+        opacity: 1 !important;
+      }
+    }
+
+    &:has(.app-input:focus-visible) {
+      .button-icon {
+        opacity: 1;
+        pointer-events: auto !important;
+      }
+      .accept-button {
+        pointer-events: auto;
+        opacity: 1 !important;
+      }
+    }
+  }
+
+  .cancel-button {
+    opacity: 1 !important;
+    pointer-events: auto;
+  }
+
+  .dropdown-icon-container {
+    pointer-events: none;
+  }
+
+  .accept-button {
+    right: 26px;
+    pointer-events: auto;
+  }
+}
+
+.dropdown-selected {
+  user-select: none;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 0;
+  width: calc(100% - 22px);
+  pointer-events: none;
+
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  word-break: break-all;
+
+  padding: 0.25rem 6px;
+  font-size: 14px;
+  line-height: 18px;
+  font-weight: 400;
+  border: 0;
+  outline: none;
+  margin-top: auto;
+  background-color: transparent;
+  transition:
+    color 0.1s $bezier,
+    opacity 0.1s $bezier,
+    width 0.1s ease-in-out;
+  color: var(--color-text);
+
+  display: flex;
+  gap: 4px;
+
+  .dropdown-selected-content {
+    overflow: hidden;
+    user-select: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+    flex: 1;
+  }
+
+  .dropdown-selected-hazardous {
+    max-width: calc(100% - 22px);
+  }
+}
+
+p.dropdown-selected {
+  user-select: none;
+  display: block;
+}
+
+.app-input-container:has(.app-input:focus-visible) .dropdown-selected {
+  .option-icon {
+    color: white !important;
+  }
+  color: white;
+  opacity: 0.7;
+}
+
+.has-icon {
+  .positive-icon,
+  .warning-icon {
+    display: none;
+  }
+
+  .dropdown-selected {
+    left: 27px;
+    width: calc(100% - 49px);
+  }
+
+  &:hover {
+    .dropdown-selected {
+      width: calc(100% - 71px);
+    }
+  }
+
+  &.app-input-container:has(.app-input:focus-visible) {
+    .dropdown-selected {
+      width: calc(100% - 71px);
+    }
+  }
+}
+
+.hazard-icon {
+  height: 18px;
+  width: max-content;
+}
+
+// dispatch
+
+.has-dispatch {
+  .app-input-label {
+    transform: translateY(-20px);
+    font-weight: 600;
+    font-size: 11px;
+    color: var(--color-text-heading) !important;
+  }
+}
+
+.dispatch-load-count {
+  color: #dadada;
+  font-weight: 700;
+}
+
+.dispatch-separator {
+  color: #919191;
+  font-weight: 400;
+}
+
+.dispatch-status {
+  font-family: Montserrat;
+  font-weight: 700;
+  font-style: Bold;
+  font-size: 11px;
+  line-height: 14px;
+  letter-spacing: 0%;
+  text-transform: uppercase;
+  color: #ffffffb2;
+
+  border-radius: 2px;
+  padding: 2px 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+
+  &.status-available {
+    background-color: #50ac2533;
+  }
+
+  &.status-dispatched {
+    background-color: #3b73ed33;
+  }
+
+  &.status-arrived,
+  &.status-checked-in,
+  &.status-loading,
+  &.status-loaded {
+    background-color: #259f9433;
+  }
+
+  &.status-arrived,
+  &.status-checked-in,
+  &.status-offloading,
+  &.status-offloaded {
+    // TODO: Two color states for same status ?
+    background-color: #ff704333;
+  }
+
+  &.status-canceled {
+    background-color: #df3c3c33;
+  }
+
+  &.status-tonu {
+    background-color: #df3d8533;
+  }
+
+  &.status-off,
+  &.status-deadhead,
+  &.status-dheading {
+    background-color: #91919133;
+  }
+
+  &.status-towing {
+    background-color: #9e47ec33;
+  }
+
+  &.status-repair {
+    background-color: #865e3a33;
+  }
+
+  .status-block {
+    border-radius: 1px;
+    background-color: #aaaaaa;
+    padding-left: 2px;
+    padding-right: 2px;
+
+    font-family: Montserrat;
+    font-weight: 700;
+    font-style: Bold;
+    font-size: 11px;
+    line-height: 12px;
+    text-align: center;
+    color: #2f2f2f;
+
+    min-width: 12px;
+    height: 12px;
+
+    &.blue {
+      background-color: #6692f1;
+    }
+
+    &.green {
+      background-color: #56b4ac;
+    }
+
+    &.orange {
+      background-color: #ff906d;
+    }
+  }
+}
+
+.has-ftl-dispatch,
+.has-dispatch {
+  min-width: 600px;
+
+  &:has(.app-input:focus-visible) {
+    .dropdown-selected {
+      .dispatch-icon {
+        color: white;
+      }
+    }
+  }
+}
+
+.dropdown-subitem {
+  display: flex;
+  justify-content: left;
+  align-items: center;
+  gap: 4px;
+}
+
+.truck-item {
+  width: 128px;
+}
+
+.trailer-item {
+  width: 138px;
+}
+
+.truck-trailer-option {
+  opacity: 0;
+  transition: opacity 0.1s $bezier;
+  margin-left: auto;
+}
+
+.truck-trailer-icon-colors {
+  // Truck icons - grouped by color
+  &.ic_truck_semi-truck,
+  &.ic_truck_semi-wSleeper {
+    color: #92b1f5;
+  }
+  &.ic_truck_box-truck,
+  &.ic_truck_reefer,
+  &.ic_truck_cargo-van {
+    color: #fbc88b;
+  }
+  &.ic_truck_cement,
+  &.ic_truck_dump,
+  &.ic_truck_garbage {
+    color: #ed9292;
+  }
+  &.ic_truck_tow-truck,
+  &.ic_truck_car-hauler,
+  &.ic_truck_spotter {
+    color: #86c9c3;
+  }
+
+  // Trailer icons - grouped by color
+  &.ic_trailer_flatbed,
+  &.ic_trailer_low-boy,
+  &.ic_trailer_step-deck {
+    color: #92b1f5;
+  }
+  &.ic_trailer_chassis,
+  &.ic_trailer_container {
+    color: #80d6f1;
+  }
+  &.ic_trailer_conestoga,
+  &.ic_trailer_side-kit {
+    color: #8785e8;
+  }
+  &.ic_trailer_dryvan,
+  &.ic_trailer_reefer {
+    color: #fbc88b;
+  }
+  &.ic_trailer_end-dump,
+  &.ic_trailer_bottom-dump,
+  &.ic_trailer_hopper {
+    color: #ed9292;
+  }
+  &.ic_trailer_tanker,
+  &.ic_trailer_tanker-pneumatic {
+    color: #ed93bb;
+  }
+  &.ic_trailer_carhauler,
+  &.ic_trailer_carhauler-stinger {
+    color: #86c9c3;
+  }
+}
+
+.sub-label {
+  margin-left: auto;
+  margin-right: 22px;
+  opacity: 0;
+  transition:
+    margin 0.1s ease-in-out,
+    opacity 0.1s ease-in-out;
+  color: #6c6c6c;
+}
+
+.app-input-label {
+  &:has(.sub-label) {
+    width: 100%;
+  }
+}
+
+.has-selected {
+  .sub-label {
+    opacity: 1;
+  }
+}
+
+.dispatch-icon {
+  color: #919191;
+  transition: color 0.1s $bezier;
+}
+
+.truck-icon {
+  @extend .dispatch-icon;
+  width: 42px;
+}
+
+.trailer-icon {
+  @extend .dispatch-icon;
+  width: 42px;
+}
+
+.truck-number {
+  width: 80px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.trailer-number {
+  width: 90px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.driver-name {
+  // TODO: Set fixed width
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.dropdown-subitem-end {
+  margin-left: auto;
+  position: relative;
+  height: 26px;
+  width: auto;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+
+  font-family: Montserrat;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  text-align: right;
+  vertical-align: bottom;
+}
+
+.end-item-base {
+  position: absolute;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  width: max-content;
+
+  gap: 4px;
+
+  color: #919191;
+  transition:
+    color 0.1s $bezier,
+    opacity 0.1s $bezier;
+  text-align: right;
+}
+
+.dispatch-ltl {
+  font-family: Montserrat;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  text-align: right;
+}
+
+.unassigned-ltl {
+  margin-left: auto;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  width: max-content;
+
+  gap: 4px;
+
+  color: #919191;
+  transition:
+    color 0.1s $bezier,
+    opacity 0.1s $bezier;
+
+  font-family: Montserrat;
+  font-weight: 700;
+  font-size: 11px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  text-align: right;
+}
+
+.end-item-hover {
+  position: absolute;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  gap: 4px;
+  width: max-content;
+  opacity: 0;
+
+  color: #919191;
+  transition:
+    color 0.1s $bezier,
+    opacity 0.1s $bezier;
+}
+
+.selected-end-item {
+  margin-left: auto;
+  font-family: Montserrat;
+  font-weight: 400;
+  font-size: 11px;
+  line-height: 18px;
+  letter-spacing: 0%;
+  text-align: right;
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  gap: 4px;
+}
+
+.group-item {
+  &:not(:first-child) {
+    border-top: 1px solid #424242;
+  }
+
+  font-family: Montserrat;
+  font-weight: 700 !important;
+  font-size: 11px !important;
+  line-height: 18px;
+  letter-spacing: 0%;
+  vertical-align: middle;
+  text-transform: uppercase;
+
+  // // Sticky styles
+  // position: sticky !important;
+  // top: 0;
+  // z-index: 10;
+  // outline: 4px solid #2f2f2f;
+
+  background-color: #2f2f2f;
+
+  color: #aaaaaa !important;
+
+  .group-icon {
+    margin-left: auto;
+    transform: rotate(180deg);
+    transition: transform 0.1s $bezier;
+  }
+
+  &.unfolded {
+    .group-icon {
+      transform: rotate(0deg);
+    }
+    color: white !important;
+  }
+}
+
+.counter {
+  background-color: #424242;
+  padding: 1px 4px;
+  border-radius: 60px;
+  font-family: Montserrat;
+  font-weight: 600;
+  font-size: 11px;
+  min-width: 18px;
+  line-height: 14px;
+  letter-spacing: 0%;
+  text-align: center;
+  vertical-align: middle;
+  color: #ffffffb2;
+
+  transition: color 0.1s $bezier;
+}
+
+// Password popover
+
+.password-requirement {
+  padding: 6px;
+
+  p {
+    font-family: Montserrat;
+    font-weight: 600;
+    font-size: 11px;
+    line-height: 14px;
+    letter-spacing: 0%;
+    vertical-align: middle;
+    color: $color-black-200;
+    font-style: italic;
+  }
+
+  .icon {
+    width: 14px !important;
+    height: 14px !important;
+
+    &.checkmark {
+      color: $color-white-700;
+    }
+
+    &.cancel {
+      color: $color-icon-base-negative;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    margin-top: 6px;
+
+    li {
+      color: $color-text-base-heading;
+      font-size: 11px;
+      font-style: italic;
+      font-weight: 500;
+      line-height: 14px;
+
+      &.valid {
+        color: $color-black-100 !important;
+      }
+
+      display: flex;
+      gap: 4px;
+      &:not(:first-child) {
+        margin-top: 6px;
+      }
+    }
+  }
+
+  background-color: #fffffff2 !important;
+  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.4);
+  backdrop-filter: blur(6px);
+  overflow-y: hidden;
+}
+
+// broker
+
+.has-end-item:not(:has(.app-input:disabled)) {
+  &:hover {
+    .dropdown-selected {
+      width: calc(100% - 44px);
+    }
+  }
+
+  &:has(.app-input:focus-visible) {
+    .dropdown-selected {
+      width: calc(100% - 44px);
+    }
+  }
+}
+
+.progress-bar {
+  width: 24px;
+  height: 8px;
+  border-radius: 2px;
+  position: relative;
+
+  transition: background-color 0.1s $bezier;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    width: var(--progress);
+    height: 100%;
+
+    transition: background-color 0.1s $bezier;
+  }
+
+  &.low {
+    background-color: #df3c3c33;
+    &::after {
+      background-color: #e66767;
+    }
+  }
+
+  &.medium {
+    background-color: #f89b2e33;
+    &::after {
+      background-color: #fab15c;
+    }
+  }
+
+  &.high {
+    background-color: #56b4ac33;
+    &::after {
+      background-color: #56b4ac;
+    }
+  }
+
+  &.disable {
+    background-color: #91919133;
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.app-input-container:has(.app-input:focus-visible) {
+  .selected-end-item {
+    .progress-bar {
+      background-color: white !important;
+    }
+  }
+}
+
+// bank
+
+.full-icon {
+  color: #919191;
+}
+
+// fuelcard
+
+.fuelcard-number {
+  width: 216px;
+}
+
+.fuelcard-brand {
+  width: 132px;
+}
+
+// owner
+
+.owner-ein {
+  width: 118px;
+}
+
+// Multiple selection
+
+.has-multiple-dropdown.has-text {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.multiple-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 4px;
+
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+
+  position: relative;
+  transition: background-color 0.1s ease-in-out;
+  background-color: $color-surface-input-positive;
+
+  &.hovered {
+    background-color: $color-surface-input-positive-hover;
+    .multiple-selected {
+      background-color: #e9effd;
+    }
+  }
+
+  &.focused {
+    .multiple-selected {
+      background-color: #3b73ed;
+      color: white;
+    }
+
+    background-color: $color-surface-input-positive-focus;
+  }
+}
+
+.multiple-selected {
+  background-color: #bed0f9;
+  color: #2f2f2f;
+  transition:
+    background-color 0.1s ease-in-out,
+    color 0.1s ease-in-out;
+
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  cursor: pointer;
+  padding: 2px 4px;
+  user-select: none;
+
+  font-family: Montserrat;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+
+  width: 209px;
+  height: 22px;
+  border-radius: 1px;
+
+  p {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 100%;
+  }
+
+  &:hover {
+    .multiple-remove-button {
+      opacity: 1;
+    }
+    color: #2f2f2f !important;
+
+    background-color: #fff !important;
+  }
+
+  .multiple-remove-button {
+    opacity: 0;
+    background-color: #6692f1;
+    color: #fff;
+    width: 14px;
+    height: 14px;
+
+    .multiple-remove-icon {
+      width: 12px;
+      height: 12px;
+    }
+  }
+}
+
+.multiple-label {
+  color: $color-text-base-heading;
+  user-select: none;
+  pointer-events: none;
+
+  font-family: Montserrat;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 600;
+
+  position: absolute;
+  top: 0;
+  left: 6px;
+  transform: translateY(-14px);
+}
+
+.dropdown-group {
+  border-radius: 2px;
+  transition:
+    background-color 0.1s $bezier,
+    max-height 0.1s $bezier,
+    height 0.1s ease-in-out;
+  margin-top: 4px;
+  max-height: var(--max-height);
+  height: var(--max-height);
+  overflow: hidden;
+
+  &.no-items {
+    cursor: default;
+    pointer-events: none;
+  }
+
+  .group-item {
+    outline: none;
+    color: white !important;
+
+    font-weight: 400 !important;
+    font-size: 14px !important;
+
+    display: flex;
+
+    transition:
+      font-weight 0.1s ease-in-out,
+      background-color 0.1s $bezier,
+      color 0.1s $bezier;
+
+    &:hover,
+    &.unfolded {
+      .counter {
+        color: white;
+      }
+    }
+
+    &.unfolded {
+      font-weight: 700 !important;
+    }
+
+    .counter {
+      margin-left: auto;
+    }
+
+    .group-icon {
+      margin-left: 0;
+    }
+    padding-left: 6px;
+    padding-right: 6px;
+  }
+
+  &:hover:not(.no-items),
+  &.active {
+    background-color: $color-black-300;
+
+    .group-item {
+      &:hover {
+        background-color: $color-black-300;
+      }
+    }
+
+    .dropdown-item {
+      background-color: $color-black-300;
+    }
+  }
+
+  &.active {
+    padding: 4px;
+    padding-top: 0 !important;
+
+    .group-item {
+      position: relative !important;
+      padding-left: 2px !important;
+      padding-right: 2px !important;
+    }
+  }
+
+  .dropdown-item:not(.group-item) {
+    &:hover {
+      background-color: $color-black-200 !important;
+    }
+  }
+}
+
+.fuel-stop-transaction-store {
+  display: flex;
+  gap: 4px;
+
+  .fuel-stop-transaction-store-address {
+    font-size: 11px;
+    color: $color-white-700;
+    margin-left: auto;
+  }
+
+  .favorite-icon {
+    color: $color-inverse-icon-base-positive;
+    width: 14px;
+    height: 14px;
+  }
+}
+
+.fuel-stop-transaction-nostore {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
+.hide-dropdown {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.1s $bezier;
+}
+
+.dropdown-menu:not(.hide-dropdown) {
+  .dropdown-menu-content {
+    transition:
+      max-height 0.2s $bezier,
+      opacity 0.2s $bezier,
+      height 0.1s ease-in-out;
+    animation: dropdown-menu-opening 0.2s $bezier;
+  }
+  &.animate-dropdown {
+    .dropdown-menu-content {
+      max-height: var(--max-height);
+      height: var(--max-height);
+    }
+  }
+}
+
+.closing:not(.hide-dropdown) {
+  .dropdown-menu-content {
+    animation: dropdown-menu-closing 0.2s $bezier;
+    opacity: 0;
+    max-height: 0;
+  }
+}
+
+@keyframes dropdown-menu-opening {
+  0% {
+    max-height: 0;
+    opacity: 0;
+  }
+  100% {
+    max-height: 244px;
+    opacity: 1;
+  }
+}
+
+@keyframes dropdown-menu-closing {
+  0% {
+    max-height: 244px;
+    opacity: 1;
+  }
+  100% {
+    max-height: 0;
+    opacity: 0;
+  }
+}
+
+// Loader
+
+.app-input-container {
+  &:has(.app-input:focus-visible) {
+    &.has-dropdown,
+    &.has-text {
+      .loader {
+        &.loading {
+          opacity: 1 !important;
+        }
+      }
+    }
+    &.has-dropdown.has-text {
+      .loader {
+        transform: translateX(-48px);
+      }
+    }
+  }
+}
+
+.loader {
+  position: absolute;
+  top: 4px;
+  right: 0;
+  transform: translateX(-26px);
+  pointer-events: none;
+  z-index: 1000;
+  width: 18px;
+  height: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition:
+    opacity 0.1s ease-in-out,
+    transform 0.1s ease-in-out;
+  opacity: 0;
+}
+
+.loader-icon {
+  width: 14px;
+  height: 14px;
+  animation: spin 800ms ease-in-out infinite;
+  transform-origin: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+// Sizes
+
+.size-22 {
+  height: 22px;
+
+  .icon {
+    height: 14px !important;
+    width: 14px !important;
+  }
+
+  .bg-icon {
+    height: 14px !important;
+    width: 14px !important;
+
+    padding: 2px !important;
+  }
+
+  .icon-container {
+    height: 22px !important;
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 4px !important;
+  }
+
+  .app-input {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 4px;
+  }
+
+  .app-input-label {
+    padding-top: 2px;
+    padding-bottom: 2px;
+    padding-left: 4px;
+  }
+
+  &.has-icon {
+    .app-input-label {
+      padding-left: 0 !important;
+    }
+  }
+
+  .app-input-icon {
+    height: 14px !important;
+    width: 14px !important;
+  }
+
+  &.has-text,
+  &:has(.app-input:focus-visible) {
+    .app-input-label {
+      transform: translateY(-18px);
+    }
+  }
+
+  .loader {
+    top: 2px;
+    transform: translateX(-22px) !important;
+  }
+}
+
+.strikethrough {
+  .app-input {
+    text-decoration: line-through;
+  }
+
+  .dropdown-selected-content {
+    text-decoration: line-through;
+  }
+}
+
+.max-w-280 {
+  max-width: 280px;
+}