$rdl-icon-font-family: "Font Awesome 6 Free", "Font Awesome 5 Free",
  "FontAwesome", sans-serif;
$rdl-input-bg: #fff !default;
$rdl-input-disabled-bg: #eee !default;
$rdl-input-border: #ccc !default;
$rdl-input-border-active: darken($rdl-input-border, 25%) !default;
$rdl-input-border-hover: darken($rdl-input-border, 12%) !default;
$rdl-input-color: #333 !default;
$rdl-btn-bg: $rdl-input-bg !default;
$rdl-btn-bg-active: darken($rdl-btn-bg, 10%) !default;
$rdl-btn-border: $rdl-input-border !default;
$rdl-btn-border-active: $rdl-input-border-active !default;
$rdl-btn-border-hover: $rdl-input-border-hover !default;
$rdl-btn-color: #333 !default;
$rdl-line-height: 1.42857 !default;
$rdl-desktop-min-width: 576px !default;

.react-dual-listbox {
  box-sizing: border-box;

  * {
    box-sizing: border-box;
  }

  input,
  select {
    &:disabled {
      cursor: not-allowed;
      background: $rdl-input-disabled-bg;
    }
  }

  button,
  select {
    font-family: inherit;
    line-height: $rdl-line-height;
  }

  // Set minimum height to prevent boxes from resizing on mobile
  select {
    min-height: 146px;
  }
}

.rdl-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;

  @media (min-width: $rdl-desktop-min-width) {
    flex-direction: row;
  }
}

.rdl-hidden-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.rdl-list-box {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-self: stretch;
}

.rdl-filter,
.rdl-control {
  display: block;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: $rdl-input-color;
  border: 1px solid $rdl-input-border;
  border-radius: 2px;
}

.rdl-filter {
  margin-bottom: 10px;

  &:focus:not(:disabled) {
    border-color: $rdl-input-border-active;
    outline: 0;
  }
}

.rdl-control-container {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
}

.rdl-control-label {
  position: absolute;
  padding: 0 4px 4px;
  clip: rect(0 0 0 0);

  .rdl-has-header & {
    position: static;
    clip: auto;
  }
}

.rdl-control {
  flex: 1 0 auto;

  &:focus:not(:disabled) {
    border-color: $rdl-input-border-active;
    outline: 0;
  }

  optgroup {
    font: inherit;
    font-weight: 700;
  }
}

.rdl-actions {
  display: flex;
  flex: 0 0 auto;
  margin: 10px 0;

  @media (min-width: $rdl-desktop-min-width) {
    flex-direction: column;
    align-self: flex-end;
    width: auto;
    margin: 0 10px;
  }
}

.rdl-actions-to-selected,
.rdl-actions-to-available {
  display: flex;

  @media (min-width: $rdl-desktop-min-width) {
    flex-direction: column;
  }
}

@media (min-width: $rdl-desktop-min-width) {
  .rdl-actions-to-selected {
    margin-bottom: 5px;
  }
}

.rdl-btn {
  padding: 5px 10px;
  margin: 0 3px;
  font-size: 14px;
  color: $rdl-btn-color;
  cursor: pointer;
  background: $rdl-input-bg;
  border: 1px solid $rdl-btn-border;
  border-radius: 2px;

  &:active:not(:disabled),
  &:focus:not(:disabled) {
    background: $rdl-btn-bg-active;
    border-color: $rdl-btn-border-active;
  }

  &:focus:not(:disabled) {
    outline: thin dotted;
    outline-offset: -2px;
  }

  &:hover:not(:disabled) {
    background: $rdl-btn-bg-active;
    border-color: $rdl-btn-border-hover;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:last-child {
    margin-bottom: 0;
  }

  .rdl-icon {
    display: inline-block;
    font-size: 14px;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    text-rendering: auto;
  }

  @media (min-width: $rdl-desktop-min-width) {
    margin: 0 0 5px;
  }
}

.rdl-no-options {
  height: 100%;
  padding: 4px 6px;
}

.rdl-align-top {
  .rdl-available {
    margin-bottom: 10px;
  }

  .rdl-control {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .rdl-actions-to-available,
  .rdl-actions-to-selected {
    flex-direction: row;
    margin: 0;
  }

  .rdl-list-box .rdl-move {
    flex: 0 1 50%;
    margin: 0;

    &:first-child {
      margin-bottom: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:last-child {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  &[dir="ltr"] {
    .rdl-list-box .rdl-move {
      &:first-child {
        border-right: 0;
        border-top-right-radius: 0;
      }

      &:last-child {
        border-top-left-radius: 0;
      }
    }
  }

  &[dir="rtl"] {
    .rdl-list-box .rdl-move {
      &:first-child {
        border-left: 0;
        border-top-left-radius: 0;
      }

      &:last-child {
        border-top-right-radius: 0;
      }
    }
  }

  @media (min-width: $rdl-desktop-min-width) {
    &[dir="ltr"] {
      .rdl-available {
        margin: 0 10px 0 0;
      }

      .rdl-selected {
        margin-left: 10px;
      }
    }

    &[dir="rtl"] {
      .rdl-available {
        margin: 0 0 0 10px;
      }

      .rdl-selected {
        margin-right: 10px;
      }
    }
  }
}

// Font Awesome styles
.rdl-icons-fa5,
.rdl-icons-fa6 {
  .rdl-icon {
    font-family: $rdl-icon-font-family;
    font-weight: 900;
  }

  .rdl-icon-move-all-to-selected::before,
  .rdl-icon-move-bottom::before {
    content: "\f103";
  }

  .rdl-icon-move-to-selected::before,
  .rdl-icon-move-down::before {
    content: "\f107";
  }

  .rdl-icon-move-to-available::before,
  .rdl-icon-move-up::before {
    content: "\f106";
  }

  .rdl-icon-move-all-to-available::before,
  .rdl-icon-move-top::before {
    content: "\f102";
  }

  // Larger screens will arrange the boxes as columns, so "left" and "right" icons apply
  @media (min-width: $rdl-desktop-min-width) {
    .rdl-icon-move-to-available::before {
      content: "\f104";
    }

    .rdl-icon-move-all-to-available::before {
      content: "\f100";
    }

    .rdl-icon-move-to-selected::before {
      content: "\f105";
    }

    .rdl-icon-move-all-to-selected::before {
      content: "\f101";
    }

    // Change directions when right-to-left
    &[dir="rtl"] {
      .rdl-icon-move-to-available::before {
        content: "\f105";
      }

      .rdl-icon-move-all-to-available::before {
        content: "\f101";
      }

      .rdl-icon-move-to-selected::before {
        content: "\f104";
      }

      .rdl-icon-move-all-to-selected::before {
        content: "\f100";
      }
    }
  }
}

.rdl-icons-native {
  .rdl-icon-move-all-to-selected::before,
  .rdl-icon-move-bottom::before {
    content: "⮇";
  }

  .rdl-icon-move-to-selected::before,
  .rdl-icon-move-down::before {
    content: "🠣";
  }

  .rdl-icon-move-to-available::before,
  .rdl-icon-move-up::before {
    content: "🠡";
  }

  .rdl-icon-move-all-to-available::before,
  .rdl-icon-move-top::before {
    content: "⮅";
  }

  // Larger screens will arrange the boxes as columns, so "left" and "right" icons apply
  @media (min-width: $rdl-desktop-min-width) {
    .rdl-icon-move-to-available::before {
      content: "⭠";
    }

    .rdl-icon-move-all-to-available::before {
      content: "⮄";
    }

    .rdl-icon-move-to-selected::before {
      content: "⭢";
    }

    .rdl-icon-move-all-to-selected::before {
      content: "⮆";
    }

    // Change directions when right-to-left
    &[dir="rtl"] {
      .rdl-icon-move-to-available::before {
        content: "⭢";
      }

      .rdl-icon-move-all-to-available::before {
        content: "⮆";
      }

      .rdl-icon-move-to-selected::before {
        content: "⭠";
      }

      .rdl-icon-move-all-to-selected::before {
        content: "⮄";
      }
    }
  }
}