// Light Theme Dropdown
//================================================== //

// Create a token for this
$dropdown-size-padding-x-r: 30px;

div.dropdown,
div.multiselect {
  + .icon {
    right: 8px;
    top: 3px;
  }

  > img.listoption-icon {
    top: 10px;
  }

  > .listoption-icon {
    top: 11px;

    &:not(.custom-icon) {
      left: 12px;
    }

    &.large-icon {
      height: 32px;
      width: 32px;
    }

    &.swatch {
      left: 12px;
    }

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

  &.has-tags {
    padding: 0;

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

    + .icon {
      height: 30px;
    }
  }

  .tag-list {
    padding: 4px 30px 4px 10px;

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

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

.dropdown-list {
  &.small-rowheight {
    &.datagrid-dropdown-list .trigger .icon {
      margin-left: 2px;

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

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

  > .trigger {
    width: $dropdown-size-padding-x-r;

    .icon {
      top: 9px;
    }
  }

  > img.listoption-icon {
    top: 9px;
  }

  > .listoption-icon {
    top: 10px;

    &.swatch {
      left: 11px;
    }
  }

  li {
    span {
      &.swatch {
        margin-left: -18px;
      }
    }
  }

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

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

  &.text-align-reverse {
    input.dropdown-search {
      &.text-align-reverse {
        padding-inline-end: 19px !important;
      }
    }

    &.search-mode {
      input.dropdown-search {
        padding-inline-end: 20px !important;
      }
    }
  }
}

// Adjust Short Field Dropdowns
.field-short,
.form-layout-compact .field {
  div.dropdown,
  div.multiselect {
    + .icon {
      top: 3px;
      width: 16px;
    }

    > .listoption-icon {
      top: 6px;
      left: 5px !important;
    }

    &.has-tags {
      .tag-content {
        line-height: 17px;
      }
    }
  }
}

.dropdown-list.dropdown-short {
  .trigger {
    .icon {
      top: 5px;
      width: 16px;
    }
  }

  &.ffdropdown {
    .trigger .icon {
      left: -32px;
      top: 6px;
    }
  }

  .dropdown-search {
    padding: 2px 16px 2px 5px;
  }
}

.dropdown-search {
  padding-top: 6px;
}

// Dropdown Arrow is finicky on IE11
.ie.ie11 {
  div.dropdown,
  div.multiselect {
    > .listoption-icon {
      left: 12px;
      top: 12px;

      &.swatch {
        left: 12px;

        + span {
          position: relative;
          top: 1px;
        }
      }

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

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

    > ul {
      li.dropdown-option {
        .listoption-icon {
          top: 3px;
        }
      }

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

        span.swatch {
          margin-left: -15px;
        }
      }
    }

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

      .listoption-icon {
        top: 11px;

        &.swatch {
          left: 11px;
        }
      }

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

    &.dropdown-short {
      > .trigger .icon {
        left: -8px;
      }
    }
  }

  .field-short,
  .form-layout-compact .field {
    div.dropdown,
    div.multiselect {
      > .listoption-icon {
        top: 8.5px;
      }
    }
  }
}

// Fix Tag icon placement on Mac OSX
.is-mac {
  div.dropdown,
  div.multiselect {
    .btn-dismissible,
    .btn-linkable {
      .icon {
        top: -2px;
      }
    }
  }
}

// Fix Tag icon placement on IE/Edge
.ie {
  div.dropdown,
  div.multiselect {
    .tag-list {
      .btn-dismissible,
      .btn-linkable {
        .icon {
          top: -1px;
        }
      }
    }
  }
}

.is-safari,
.ios {
  div.dropdown,
  div.multiselect {
    .tag-list {
      .btn-dismissible,
      .btn-linkable {
        .icon {
          top: -1px;
        }
      }
    }
  }
}

// Dropdown icon and Tags for Firefox
.is-firefox {
  div.dropdown,
  div.multiselect {
    > .listoption-icon {
      left: 12px;

      &.swatch {
        left: 12px;
      }
    }

    .tag-content {
      line-height: normal;
    }

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

  .dropdown-list {
    > .listoption-icon {
      &.swatch {
        left: 11px;
      }
    }

    .dropdown-option {
      &.is-swatch {
        padding-left: 26px;
      }

      .swatch {
        margin-left: -15px;
      }
    }

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

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

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

// Icon placement isn't quite right on Firefox
html.is-firefox:not([dir='rtl']) {
  div.dropdown,
  div.multiselect {
    padding: 5px 30px 6px 10px;

    + .icon {
      top: 2px;
      margin-right: 0;
    }

    > .listoption-icon {
      top: 10px;

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

    &.has-tags {
      padding: 0;
    }

    .tag-list {
      padding: 4px 30px 6px 10px;

      &.empty {
        &::after {
          content: ' ';
          display: inline-block;
        }
      }
    }
  }

  .dropdown-search {
    padding: 2px 30px 6px 10px;
  }

  .dropdown-list {
    > .trigger .icon {
      top: 7.5px;
    }

    &.datagrid-dropdown-list.is-editing .trigger .icon {
      top: 8.5px;
      margin-left: 1px;
    }

    &.small-rowheight {
      &.datagrid-dropdown-list .trigger .icon {
        top: 7.5px;
        margin-left: 0.5px;

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

    &.extra-small-rowheight {
      &.datagrid-dropdown-list .trigger .icon {
        top: 7px;
        margin-left: 0;

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

    > .listoption-icon {
      top: 9px;
    }

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

    &.has-icons {
      .dropdown-search {
        padding: 6px 30px 6px 36px;
      }
    }

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

      > .trigger .icon {
        top: 5px;
        padding-left: 0;
      }

      &.has-icons {
        .dropdown-search {
          padding: 3px 16px 2px 25px;
        }
      }
    }
  }

  .field-short,
  .form-layout-compact .field {
    div.dropdown,
    div.multiselect {
      padding: 2px 21px 2px 5px;

      + .icon {
        top: 2px;
        width: 16px;
        right: 7px;
      }

      &.has-tags {
        .tag-content {
          line-height: 17px;
        }
        
        .tag-list .tag {
          margin: 6px 1px 0 0;
        }
      }

      > span {
        line-height: 1.4rem;
      }
    }
  }

  .form-layout-compact .field {
    .dropdown.has-tags {
      + .icon {
        height: 31px;
        top: 2px;
      }
    }
  }

  .field {
    .dropdown.has-tags {
      + .icon {
        height: 35px;
      }
    }
  }
}

// Reset the `.dropdown-search` padding on Firefox RTL
html[dir='rtl'] {
  div.dropdown,
  div.multiselect {
    + .icon {
      left: 8px;
    }

    .listoption-icon {
      top: 11px;
    }

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

  .dropdown-list {
    > .listoption-icon {
      top: 9px;
    }

    > .trigger {
      .icon {
        margin-right: -24px;
        left: 1px;
        top: 10px;
      }
    }
  }

  .datagrid-dropdown-list {
    &.extra-small-rowheight {
      input {
        padding-right: 5px;
      }
    }
  }

  .dropdown-search {
    padding: 6px 12px 7px 32px;
  }

  .field-short,
  .form-layout-compact .field {
    div.dropdown,
    div.multiselect {
      padding: 5px;
      margin-inline-end: 1px;
      left: 10px;

      + .icon {
        left: 11px;
        top: 2px;
        margin-inline-end: 3px;
      }

      .listoption-icon {
        top: 6.5px;
      }

      &.text-align-reverse {
        padding: 5px 5px 5px 16px;
      }

      &.has-tags {
        padding: 0;
      }
    }

    div.has-tags {
      +.icon {
        inset-inline-start: 5px;
        top: 6px;
      }
    }
  }

  .dropdown-list {
    &.has-icons {
      .dropdown-search {
        padding: 8px 39px 9px 30px;
      }
    }
  }

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

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

    > .listoption-icon {
      top: 4px;
    }

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

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

  // Dropdown Arrow is finicky on IE11
  &.ie.ie11 {
    .dropdown-list {
      &:not(.dropdown-short) {
        > .trigger {
          margin-left: -29px;
        }
      }

      &.dropdown-short {
        > .trigger .icon {
          left: -5px;
        }
      }
    }
  }

  // Re-apply extended padding for Firefox
  &.is-firefox {
    .field-short,
    .form-layout-compact .field {
      div.dropdown,
      div.multiselect {
        padding: 2px 5px 2px 16px;

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

        + .icon {
          top: 3px;
        }

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

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

    .dropdown-list.dropdown-short {
      .dropdown-search {
        padding: 3px 5px 2px 16px;
      }

      > .trigger .icon {
        right: 4px;
        top: 7px;
        margin-right: -4px;
      }

      &.has-icons {
        .dropdown-search {
          padding: 3px 25px 2px 21px;
        }
      }
    }

    .dropdown-wrapper .dropdown span {
      line-height: 1.8rem;
    }

    div.dropdown,
    div.multiselect {
      > span:not(.has-tags) {
        line-height: 2.6rem;
      }
    }
  }
}

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

.dropdown-list.dropdown-short > .trigger .icon.search {
  left: -1px;
  right: 0;
  top: 8px;
}

// Default swatch's list option icon color
div.dropdown > .listoption-icon,
div.multiselect > .listoption-icon,
.dropdown-list > .listoption-icon,
.dropdown-list li span {
  &.swatch {
    html.theme-new-light &.primary-bg-color,
    html.theme-new-contrast &.primary-bg-color {
      border: 1px solid $input-color-initial-border;
    }

    html.theme-new-dark &.primary-bg-color {
      background-color: $ids-color-brand-primary-base;
    }
  }
}

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


// RTL Styles
html[dir='rtl'] {
  .dropdown-list > .trigger {
    margin-inline-start: unset;
  }
}

// Firefox-specific styles
html.is-firefox {
  div.dropdown .tag-list .tag,
  div.multiselect .tag-list .tag {
    margin: 0 3px 1px 0;
    top: -3px;
  }

  .form-layout-compact .field .tag .btn-dismissible {
    align-items: center;
    display: flex;
    height: inherit;
    line-height: inherit;
    margin-bottom: 0;
    min-height: inherit;
    top: -2px;
  }
}