carriera-intern 0.0.0 → 1.1.76

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

@@ -1,3000 +0,0 @@
-@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;
-}