// Select (DropDown)
//================================================== //

@import '../input/input-mixins';

@mixin list-icon-colors {
  &.error {
    color: $error-color;
  }

  &.alert {
    color: $ids-color-status-warning;
  }

  &.alert-yellow {
    color: $ids-color-status-caution;
  }

  &.neutral {
    color: $alert-neutral;
  }

  &.good {
    color: $ids-color-status-success;
  }

  &.info {
    color: $ids-color-status-base;
  }

  &.white {
    color: $ids-color-palette-white;
  }
}

select.dropdown,
select.multiselect,
select.dropdown-lg,
select.dropdown-md,
select.dropdown-mm,
select.dropdown-sm,
select.dropdown-xs {
  display: none;
  font-size: 50px;

  // Hide when busy indicator on
  &.busy.is-loading + .dropdown-wrapper .icon {
    visibility: hidden;
  }
}

.dropdown-wrapper {
  display: inline-block;
  margin-bottom: $input-field-bottom-margin;
  max-width: 100%;
  position: relative;

  .icon-error,
  .icon-success,
  .icon-alert,
  .icon-info,
  .icon-pending {
    right: 20px;
    top: -5px;
  }

  .badge {
    display: inline-block;
    position: absolute;
    right: 28px;
    top: 6px;
  }

  .dropdown span {
    min-width: 16px;
  }
}

div.dropdown,
div.multiselect {
  background-color: $input-color-initial-background;
  color: $dropdown-color-initial-font;
  cursor: pointer;
  line-height: normal;
  overflow: hidden;
  padding: 7px 30px 8px 10px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  -webkit-touch-callout: none;
  user-select: none;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;

  @include input-style();

  &.text-align-reverse {
    > span {
      text-align: right;
    }
  }

  &.text-align-center {
    text-align: center;
  }

  > span:not(.tag-list) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
    height: 100%;
    width: calc(100% - 15px);
    line-height: 34px;
    white-space: nowrap;

    &[data-placeholder-text]::before {
      color: $input-placeholder-color;
      content: attr(data-placeholder-text);
    }
  }

  > .listoption-icon {
    color: $popupmenu-icon-color;
    position: absolute;
    top: 9px;
    vertical-align: middle;

    @include list-icon-colors();

    + span {
      padding-left: 29px;
    }

    &:not(.custom-icon) {
      left: 14px;
      height: 16px;
      width: 16px;

      &:not(.swatch) {
        left: 12px;
      }
    }

    &.swatch {
      border-radius: 2px;
      left: 15px;
    }
  }

  span {
    background-color: inherit;
  }

  &:not([disabled]):not(.is-disabled):not(:focus) {
    span {
      color: $dropdown-input-text-color;
    }

    + .icon {
      color: $dropdown-color-initial-icon;
    }
  }

  &:empty {
    min-height: 34px;
  }

  &[disabled],
  &.is-disabled {
    background-color: $input-color-disabled-background;
    border-color: $input-color-disabled-border;
    color: $input-disabled-color;
    cursor: default;
    pointer-events: none;

    .icon,
    + .icon {
      background-color: $input-color-disabled-background;
      color: $input-color-disabled-border;
      cursor: default;
    }
  }

  &:active:not([disabled]):not(.is-disabled):not(.is-readonly) {
    border-color: $trigger-active-color;

    + .icon {
      color: $trigger-active-color;
    }
  }

  &:hover {
    border-color: $trigger-hover-color;

    &[disabled],
    &.is-disabled,
    &.is-readonly,
    &.is-open,
    &.error {
      border-color: currentColor;
    }

    + .icon {
      color: $trigger-hover-color;
    }
  }

  // Icon States
  + .icon {
    background-color: inherit;
    border-radius: 1px;
    color: $trigger-icon-fill-color;
    cursor: pointer;
    display: inline-block;
    height: 32px;
    pointer-events: none;
    position: absolute;
    right: 8px;
    top: 0;
    width: 18px;
    transform: none;

    + .icon:not(.icon-error) {
      display: none;
    }
  }

  &.is-readonly {
    background-color: $input-color-readonly-background;
    border-color: $input-color-readonly-border;
    color: $input-readonly-color;
    cursor: text;

    &[tabindex='-1']:focus {
      border-color: $input-color-readonly-border !important;
      box-shadow: none;
    }

    + .icon {
      color: $dropdown-readonly-icon-color;
    }
  }

  &:focus {
    border-color: $dropdown-color-focus-border;
    box-shadow: $dropdown-focus-box-shadow;

    + .icon {
      color: $dropdown-color-initial-icon;
    }
  }

  &.has-tags {
    line-height: normal;
    padding: 0;
  }

  .tag-list {
    display: block;
    line-height: 26px;
    margin: 0;
    overflow: auto;
    padding: 2px 30px 3px 10px;
    scroll-behavior: smooth;
    text-overflow: clip;
    white-space: normal;
    min-height: 33px;

    &.empty {
      padding: 16px 0 15px;
    }

    .btn-dismissible,
    .btn-linkable {
      .icon {
        vertical-align: baseline;
      }
    }

    .tag {
      margin: 2px 3px 2px 0;

      button {
        height: auto;
      }
    }

    .icon {
      background-color: transparent;
    }
  }

  &.has-scrollbar {
    + .icon {
      right: 18px;
    }
  }
}

// The List
.dropdown-list {
  @include unselectable();
  @include dropdown-box-shadow();

  background-color: transparent;
  border: 1px solid $dropdown-menu-border-color;
  border-radius: 2px;
  font-size: $ids-size-font-base;
  max-height: 340px;
  min-height: 30px;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  pointer-events: all;
  position: absolute;
  white-space: nowrap;
  width: auto;
  z-index: 7003;

  @media screen and (max-height: 270px) {
    background-color: inherit;
  }

  // Virtual Scroll Support
  .virtual-scroll-container {
    background-color: $ids-color-palette-white;
    min-height: 100%;
  }

  &.text-align-reverse {
    text-align: right;
  }

  &.text-align-center {
    text-align: center;
  }

  &:active {
    outline: 0;
  }

  // Enables certain mobile-specific settings
  &.mobile {
    background-color: $body-color-primary-background;
  }

  &.is-ontop {
    box-shadow: $dropdown-box-shadow-top;
  }

  &.ffdropdown {
    &.is-ontop {
      > .trigger {
        .icon {
          top: 9px;
        }
      }
    }
  }

  ul {
    background-color: $popupmenu-bg-color;
    color: $popupmenu-color;
    font-size: $ids-size-font-base;
    height: auto;
    line-height: 32px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 5px 0;
    position: relative;
    text-indent: 10px;
  }

  li {
    cursor: pointer;
    position: relative;

    .dropdown-highlight {
      color: $dropdown-color-initial-icon;
      font-style: normal;
      text-decoration: none;
    }

    &.is-placeholder {
      cursor: pointer;
      color: $dropdown-placeholder-text-color;

      &:hover {
        background-color: none;
      }
    }

    &.is-swatch {
      padding-left: 30px;
    }

    span.swatch {
      border-radius: 2px;
      display: block;
      height: 16px;
      margin-left: -16px;
      margin-top: 8px;
      position: absolute;
      width: 16px;
    }

    .clear-selection {
      color: $label-disabled-color;
    }

    &:hover,
    &.hover {
      background-color: $popupmenu-hover-color;
      outline: none;
    }

    &.is-disabled {
      cursor: default;
      pointer-events: none;

      > a {
        color: $disabled-color;
      }

      &:hover,
      &.hover {
        background-color: transparent;
      }
    }

    &:focus {
      background-color: $popupmenu-hover-color;
      outline: none;
    }

    &.is-focused:not(.is-disabled) {
      background-color: $dropdown-color-selected-background;

      a {
        color: $dropdown-color-selected-font;
      }

      &.is-selected {
        background-color: $dropdown-color-selected-background;

        a {
          color: $inverse-color;
        }
      }

      .listoption-icon {
        color: $inverse-color;
      }

      .badge {
        background-color: $inverse-color;
        border-color: $inverse-color;
        color: $dropdown-color-selected-background !important;
      }
    }

    .listoption-icon {
      color: $popupmenu-icon-color;
      left: 0;
      margin-right: 7px;
      pointer-events: none;
      top: 3px;

      @include list-icon-colors();

      &:not(.custom-icon) {
        height: 16px;
      }
    }

    // Badge Support
    .badge {
      border: 1px solid transparent;
      float: right;
      margin-left: -40px;
      margin-top: 5px;
      position: relative;
      right: 8px;
      text-indent: 0;
    }
  }

  > .listoption-icon {
    color: $popupmenu-icon-color;
    left: 10px;
    position: absolute;
    top: 8px;

    @include list-icon-colors();

    &.swatch {
      border-radius: 2px;
      left: 14px;
    }

    + span {
      padding-left: 39px;
    }
  }

  .listoption-icon {
    &.swatch {
      width: 16px;
    }

    &:not(.custom-icon) {
      height: 16px;
    }
  }

  &.is-ontop {
    > .listoption-icon {
      bottom: 6px;
      top: auto;
    }

    > .trigger {
      .icon {
        top: 8px;
      }
    }
  }

  &.has-icons {
    .dropdown-search {
      padding-left: 39px;
    }
  }

  a {
    color: $popupmenu-color;
    display: block;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: inherit;

    @include css3(touch-callout, none);
    @include css3(user-select, none);

    &:empty {
      height: 32px;
    }
  }

  // Added to the dropdown list when doing a search
  &.search-mode {
    li {
      .dropdown-highlight {
        color: $font-color-extrahighcontrast;
        font-weight: $ids-number-font-weight-bold;
        letter-spacing: -0.2;
      }

      &.is-disabled {
        a {
          color: $disabled-color;
        }
      }

      &.is-focused {
        .dropdown-highlight {
          color: $inverse-color;
        }
      }
    }
  }

  &.multiple {
    ul {
      text-indent: 33px;
    }

    li::before {
      @include checkbox-unchecked-before-style;

      left: 10px;
      margin-left: 0;
      margin-top: 7px;
    }

    li.is-disabled::before {
      @include checkbox-unchecked-disabled-before-style;
    }

    li.is-focused:not(.is-disabled) {
      background-color: $popupmenu-hover-color;

      > a {
        color: $dropdown-input-text-color;
      }
    }

    li.is-selected::before {
      @include checkbox-checked-before-style;
    }

    li.is-selected::after {
      @include checkbox-checked-after-style;

      left: 15px;
      margin-top: 0;
      top: 8px;
    }

    li.is-disabled.is-selected::before {
      @include checkbox-checked-disabled-before-style;
    }

    li.is-disabled.is-selected::after {
      @include checkbox-checked-disabled-after-style;
    }

    li.group-label,
    li.separator {
      &::before,
      &::after {
        content: none;
      }
    }

    a {
      color: $font-color-highcontrast;
    }

    &.search-mode {
      a {
        .dropdown-highlight {
          color: $font-color-highcontrast;
        }
      }
    }
  }

  .group-label {
    @include css3(user-select, none);

    color: $dropdown-group-label-color;
    font-size: $ids-size-font-sm;
    font-weight: $ids-number-font-weight-bold;
    line-height: 20px;
    min-height: 20px;
    padding: 6px 0 4px;
    text-indent: 10px;

    &:not(:first-child) {
      border-top: 1px solid $module-nav-input-bg-color;
      margin-top: 5px;
    }

    &:hover {
      background-color: transparent;
      cursor: default;
    }
  }

  > .trigger {
    cursor: pointer;
    height: 32px;
    margin-left: -26px;
    position: absolute;
    width: 26px;
    z-index: 1;

    .icon {
      background-color: rgba($ids-color-palette-white, 0);
      color: $dropdown-color-initial-icon;
      left: 1px;
      top: 7px;

      &.search {
        height: 18px;
        margin-top: 0;
        width: 16px;
      }

      &.close {
        right: -6px;
        top: 0;
        width: 14px;
      }
    }
  }

  &.dropdown-short {
    > .trigger {
      margin-inline-start: -20px;
    }

    &.ffdropdown > .trigger {
      margin-left: 14px;
    }
  }

  &.text-align-reverse {
    li {
      padding: 0 12px 0 0;
    }

    &.dropdown-list {
      > .trigger {
        width: auto;
      }
    }

    input.dropdown-search {
      &.text-align-reverse {
        padding-right: 21px !important;
      }
    }

    &.search-mode {
      input.dropdown-search {
        padding-right: 19px !important;
      }
    }
  }

  li span.swatch:not(.alabaster) {
    border: 1px solid $dropdown-swatch-border-color;
  }
}

.dropdown-search {
  background-color: $dropdown-search-bg-color;
  border: 0;
  border-bottom: 1px solid $dropdown-menu-separator-border-color;
  border-radius: 0;
  color: $dropdown-color-initial-font;
  padding: 8px 30px 8px 12px;
  text-overflow: ellipsis;
  width: 100%;

  &.text-align-reverse {
    text-align: right;
  }

  &.text-align-center {
    text-align: center;
  }

  &::-ms-clear {
    display: none;
  }

  &[readonly] {
    background-color: $dropdown-search-bg-color !important;
  }

  &:focus {
    border: 0;
    border-bottom: 1px solid $dropdown-menu-separator-color;
    box-shadow: none;
    outline: none;
  }
}

// Virtual Scrolling
.ids-virtual-scroll-viewport {
  ul {
    overflow: hidden;
  }
}

// Fix tooltip gets overlap by another element
.modal {
  .dropdown-wrapper {
    .dropdown {
      .tooltip {
        position: fixed;
      }
    }
  }
}

.modal-engaged .dropdown-search {
  background-color: $modal-bg-color;
}

.is-ontop {
  &.dropdown-list ul {
    top: -1px;
  }

  .dropdown-search {
    border-bottom: 0;
    padding: 7px 30px 9px 10px;
  }
}

.no-icon-padding {
  padding-left: 12px !important;
}

.dropdown.error {
  border-color: $error-color;

  &::-webkit-input-placeholder {
    color: $error-color;
  }
}

input.dropdown.error:focus {
  border-color: $error-color;
  box-shadow: $error-focus-box-shadow;
  color: $input-color;
}

.field-short,
.form-layout-compact .field {
  .dropdown-wrapper {
    margin-bottom: 0;
    vertical-align: top;
  }

  .dropdown {
    height: $input-size-compact-height;
  }

  .dropdown-list {
    .group-label {
      text-indent: 5px;
    }
  }
}

// Zeroes out a standard form-field rule
.field {
  .dropdown-wrapper {
    margin-bottom: 0;
  }

  .dropdown {
    height: $input-size-regular-height;

    &.has-tags {
      min-height: 3.8rem;
      height: auto;

      &.empty {
        height: $input-size-regular-height;
      }
    }
  }

  div.dropdown,
  div.multiselect {
    .icon + span {
      vertical-align: top;
    }
  }
}

// Shorter Field Size
.field-short,
.form-layout-compact .field {
  div.dropdown {
    font-size: $input-size-compact-font-size;
    margin-bottom: 0;
    padding: 5px;
    position: relative;

    > .listoption-icon {
      height: 14px;
      width: 14px;
      inset-inline-start: 6px;
      top: 6px;

      + span {
        padding-left: 19px;
      }
    }

    &.has-tags {
      padding: 0;

      .tag-list {
        padding: 0 16px 0 5px;

        &.empty {
          padding: 16px 0 15px;
        }
      }

      .tag {
        height: 18px;
        margin: 6px 3px 2px 0;
      }

      .tag-content {
        line-height: 19px;
      }
    }
  }

  div.dropdown,
  div.multiselect {
    + .icon {
      height: 24px;
      top: 1px;
      width: 16px;
      right: 0;
      margin-inline-end: 5px;
    }

    &.has-tags {
      + .icon {
        top: 5px;
      }
    }

    ~ .icon-error {
      margin-left: -38px;
      position: absolute;
      right: auto;
      top: 0;
    }

    &.has-scrollbar {
      + .icon {
        right: 18px;
      }
    }

    > span:not(.tag-list) {
      line-height: 1.4rem;
    }
  }
}

// Compound field icon adjustments
.compound-field {
  .dropdown-wrapper {
    margin-bottom: 5px;
    margin-top: 0;
  }

  div.dropdown,
  div.multiselect {
    + .icon {
      top: 4px;
    }
  }
}

.compound-field {
  .field-short,
  .form-layout-compact .field {
    div.dropdown,
    div.multiselect {
      + .icon {
        position: absolute;
        top: 50% !important;
        transform: translateY(-50%);
      }
    }
  }
}

// Different Width Dropdowns
.dropdown-lg,
.field-short .dropdown-lg,
.form-layout-compact .field .dropdown-lg {
  width: 400px;
}

div.dropdown-lg {
  width: 400px;
}

.dropdown-md,
div.dropdown-md,
.field-short .dropdown-md,
.form-layout-compact .field .dropdown-md {
  width: 300px;
}

.dropdown-mm,
div.dropdown-mm,
.field-short .dropdown-mm,
.form-layout-compact .field .dropdown-mm {
  width: 225px;
}

.dropdown-sm,
div.dropdown-sm,
.field-short .dropdown-sm,
.form-layout-compact .field .dropdown-sm {
  width: 150px;
}

.dropdown-xs,
div.dropdown-xs,
.field-short .dropdown-xs,
.form-layout-compact .field .dropdown-xs {
  width: 75px;
}

// Shorter Drop Down Lists
.dropdown-list.dropdown-short {
  &:not(.has-icons) .dropdown-search {
    padding: $input-size-compact-padding !important;
  }

  .dropdown-search {
    font-size: $input-size-compact-font-size !important;
    height: $input-size-compact-height !important;
    padding-right: 21px;
  }

  &.has-icons {
    .dropdown-search {
      padding-left: 25px;
    }
  }

  ul {
    font-size: $ids-size-font-sm;
    text-indent: 5px;
  }

  li {
    > a {
      font-size: $input-size-compact-font-size !important;
      line-height: $input-size-compact-font-size * 2;
      min-height: 28px;
      text-indent: 5px;
    }

    .listoption-icon {
      height: 14px;
      width: 14px;
    }
  }

  > .icon {
    height: 24px;
    margin-left: -21px;
    margin-top: 0;
    width: 16px;
  }

  > .listoption-icon {
    height: 14px;
    left: 25px;
    top: 7px;
  }

  > .trigger {
    .icon {
      height: 16px;
      left: 0;
      right: 1px;
      top: 4px;
      width: 16px;
      position: absolute;

      &.search {
        height: 12px;
        right: 10px;
        top: 7px;
        width: 12px;
      }
    }
  }

  // Multiple
  &.multiple {
    li {
      &::after {
        margin-top: 0;
      }

      a {
        display: inline;
        padding-left: 26px;
      }
    }
  }
}

.ie {
  .is-ontop {
    margin-top: 1px;
  }

  .dropdown-list {
    &:not(.dropdown-short) {
      > .trigger {
        margin-left: -30px;
      }
    }
  }

  &.ie11 {
    .is-ontop {
      margin-top: 2px;

      .dropdown-search {
        border-top: 1px solid $dropdown-menu-separator-border-color;
      }
    }
  }

  &.ie-edge {
    .dropdown-list {
      > .trigger {
        .icon {
          left: 5px;
        }
      }
    }
  }

  &.ie-edge18 {
    .dropdown-list {
      &.multiple li {
        &::before {
          margin-top: 7px;
        }
      }
    }
  }
}

// Firefox needs a nudge on the list items
.is-firefox {
  .is-ontop {
    &.dropdown-list ul {
      margin-top: 1px;
      top: 0;
    }

    .dropdown-search {
      border-top: 1px solid $dropdown-menu-separator-border-color;
    }
  }

  .dropdown-list {
    &.text-align-reverse {
      li {
        padding-right: 12px;
      }
    }
  }

  div.dropdown,
  div.multiselect {
    padding: $dropdown-size-regular-padding;

    &.has-tags {
      padding: 0;
    }

    .btn-dismissible,
    .btn-linkable {
      .icon {
        top: 1px;
      }
    }

    > span:not(.tag-list) {
      padding-top: 2px;
      line-height: 1rem;
    }

    .form-layout-compact .field {
      div.dropdown,
      div.multiselect {
        > span:not(.tag-list) {
          line-height: 1rem;
        }
      }
    }
  }

  // Reset the padding in the rule above for Short Fields
  .field-short,
  .form-layout-compact .field {
    div.dropdown,
    div.multiselect {
      padding: 4px 21px 2px 6px;
      font-size: $input-size-compact-font-size;
      height: $input-size-compact-height !important;

      &.has-tags {
        height: auto !important;
      }

      &.text-align-reverse {
        padding-right: 21px;
        text-align: right;
      }

      > span:not(.has-tags){
        line-height: 1rem;
      }
    }

    form:not(.form-layout-compact) .field {
      div.dropdown,
      div.multiselect {
        padding: 5px 18px 5px 5px;
      }
    }
  }

  .dropdown-search {
    line-height: normal;
    padding: 6px 30px 8px 10px;
  }

  .dropdown-list {
    &.multiple li {
      &.is-selected::after {
        left: 15px;
        top: 8px;
      }
    }

    &.dropdown-short {
      .dropdown-search {
        font-size: $ids-size-font-sm;
        padding: 6px 8px 5px 21px;
      }

      &.has-icons {
        .dropdown-search {
          padding: 6px 21px 5px 25px;
        }
      }
    }
  }
}

// On IE11, adjust the placement of icons inside of Multiselect Tags
.ie {
  div.dropdown,
  div.multiselect {
    .btn-dismissible,
    .btn-linkable {
      .icon {
        top: -1px;
      }
    }
  }
}

// On Mac OSX Chrome, adjust the placement of icons inside of Multiselect Tags
.is-mac {
  div.dropdown,
  div.multiselect {
    .btn-dismissible,
    .btn-linkable {
      .icon {
        top: -1px;
      }
    }
  }
}

// iOS needs a nudge too
.ios {
  .dropdown-list.multiple li {
    &::before {
      top: 0;
    }

    &.is-selected::after {
      top: 8px;
    }
  }

  .field-short,
  .form-layout-compact .field {
    div.dropdown,
    div.multiselect {
      &.has-scrollbar {
        + .icon {
          right: 4px;
        }
      }
    }
  }

  .dropdown-list {
    > .trigger {
      .icon {
        &.close {
          top: 10px;
        }
      }
    }

    &.dropdown-short {
      > .trigger {
        .icon {
          &.close {
            height: 15px;
            top: 5px;
          }
        }
      }
    }
  }
}

// for firefox on android
.is-firefox {
  &.android {
    div.dropdown,
    div.multiselect {
      + .icon {
        top: 4px;
      }
    }

    .field-short,
    .form-layout-compact .field {
      div.dropdown,
      div.multiselect {
        + .icon {
          top: 1px;
        }

        &.has-tags {
          + .icon {
            top: 10px;
          }
        }

        &.has-scrollbar {
          + .icon {
            right: 4px;
          }
        }
      }
    }

    .dropdown-list {
      > .trigger {
        .icon {
          &.close {
            top: 10px;
          }

          &.search {
            top: 5px;
          }
        }
      }

      &.dropdown-short {
        > .trigger {
          .icon {
            &.close {
              height: 15px;
              top: 5px;
            }
          }
        }
      }
    }
  }

  .dropdown-list.is-ontop {
    > .trigger {
      .icon {
        top: 10px;
      }
    }
  }
}

// for safari
.is-safari {
  .dropdown-list.dropdown-short.multiple li a {
    padding-left: 32px;
  }
}

// for android
.android {
  .dropdown-list {
    > .trigger {
      .icon {
        &.close {
          top: 10px;
        }
      }
    }
  }
}

// RTL Styles
html[dir='rtl'] {
  .dropdown,
  .multiselect,
  input.dropdown,
  input.multiselect {
    text-align: right;

    &.text-align-reverse {
      text-align: left;
    }

    &.text-align-center {
      text-align: center;
    }

    // Icon States
    + .icon {
      left: 10px;
      margin-left: inherit;
      margin-right: -33px;
      right: auto !important;
    }
  }

  div.dropdown,
  div.multiselect {
    &.has-tags {
      padding: 0;
    }

    .tag-list {
      padding: 2px 5px 2px 30px !important;

      &.empty {
        padding: 16px 10px 15px 30px !important;
      }
    }

    &.has-scrollbar {
      + .icon {
        left: 18px;
        right: auto;
      }
    }
  }

  div.dropdown {
    > .listoption-icon {
      left: auto;
      right: 12px;

      &.swatch {
        right: 14px;
      }

      &.custom-icon {
        right: 11px;
      }

      + span {
        padding-left: inherit;
        padding-right: 29px;
      }
    }
  }

  // The List
  .dropdown-list {
    &.multiple {
      li::before {
        left: auto;
        margin-left: inherit;
        margin-right: 0;
        right: 10px;
      }

      li.is-selected::after {
        left: inherit;
        right: 15px;
      }

      li.is-disabled.is-selected::after {
        left: inherit;
        right: 21px;
      }
    }

    > .icon {
      margin-left: inherit;
      margin-right: -26px;

      &.search {
        margin-left: inherit;
        margin-right: -26px;
      }
    }

    > .trigger {
      .icon {
        margin-right: -23px;
        left: 4px;
        top: 6px;
      }
    }

    li {
      .listoption-icon {
        left: auto;
        margin-left: 7px;
        right: -7px;
      }

      &.is-swatch {
        padding-right: 30px;

        span.swatch {
          margin-left: auto;
          margin-right: -17px;
        }
      }

      // Badge Support
      .badge {
        float: left;
        margin-left: 0;
        right: -10px;
        text-indent: 0;
      }
    }

    > .listoption-icon {
      left: auto;
      right: 39px;

      + span {
        padding-left: inherit;
        padding-right: 39px;
      }
    }

    &.has-icons {
      .dropdown-search {
        padding-left: inherit;
        padding-right: 39px;
      }
    }
  }

  .dropdown-search {
    padding: 8px 12px 8px 32px;

    &.text-align-reverse {
      text-align: left;
    }

    &.text-align-center {
      text-align: center;
    }
  }

  .dropdown-list.dropdown-short {
    .dropdown-search {
      padding: 3px 5px 5px 21px !important;
    }

    &.has-icons {
      .dropdown-search {
        padding-left: inherit;
        padding-right: 25px;
      }
    }

    > .listoption-icon {
      left: auto;
      right: 31px;
    }

    &.multiple {
      li {
        a {
          padding-left: 0;
          padding-right: 22px;
        }

        &::before {
          right: 5px;
        }

        &.is-selected::after {
          right: 10px;
        }
      }
    }

    > .trigger {
      margin-inline-start: -24px;
      top: -2px;

      .icon {
        margin: 0;
        right: 0;
        left: 10px;
      }
    }

    &.ffdropdown  > .trigger .icon {
      right: -47px;
    }

    &.text-align-reverse > .trigger {
      margin-inline-start: -19px;
    }
  }

  .dropdown-wrapper {
    .icon-error,
    .icon-success,
    .icon-alert,
    .icon-info,
    .icon-pending {
      left: 26px;
      right: auto;
    }
  }

  .field-short,
  .form-layout-compact .field {
    .dropdown,
    .multiselect,
    input.dropdown,
    input.multiselect {
      margin-inline-end: 6px;

      ~ .icon-error {
        margin-left: inherit;
        margin-right: -38px !important;
      }
    }

    div.dropdown {
      > .listoption-icon {
        left: auto;
        right: 6px;

        + span {
          padding-left: inherit;
          padding-right: 20px;
        }
      }
    }
  }

  .form-layout-compact .field div.dropdown.has-tags .tag-list {
    padding:0 1px 0 30px !important;
  }

  .dropdown-list:not(.dropdown-short) {
    > .listoption-icon {
      left: auto;
      right: 36px;
      top: 10px;

      &.swatch {
        right: 39px;
      }
    }
  }

  // Firefox needs different padding in the input fields (differences in font rendering)
  &.is-firefox {
    .dropdown,
    .multiselect,
    input.dropdown,
    input.multiselect {
      padding: 2px 10px 7px 32px;
    }

    .dropdown-search {
      padding: 8px 10px 8px 32px;
    }

    // Reset the padding in the rule above for Short Fields
    .field-short,
    .form-layout-compact .field {
      div.dropdown,
      div.multiselect {
        &:not(.has-tags){
          + .icon{
            top: 1px;
          }
        }

        > span:not(.has-tags) {
          line-height: 1.4rem;
        }
      }
    }

    .dropdown-list.dropdown-short {
      .dropdown-search {
        padding: 5px 5px 5px 21px;
      }

      > .trigger .icon {
        top: 6px;
      }

      &.has-icons {
        .dropdown-search {
          padding: 6px 25px 5px 21px;
        }
      }
    }

    div.dropdown,
    div.multiselect {
      &.has-tags {
        padding: 0;
      }

      > span:not(.has-tags) {
        line-height: 2.2rem;
      }
    }
  }
}