/*------------------------------------
  Multi Select v1
------------------------------------*/
.u-multi-select--v1 {
  display: block;
  width: auto;
  background: none;

  .ms-selectable,
  .ms-selection {
    width: 100%;
    float: none;

    .ms-list {
      height: auto;
      border-color: $g-color-gray-light-v7;
      border-radius: 4px;
      box-shadow: none;

      li {
        display: flex;
        align-items: center;
        background-color: $g-color-white;
        color: $g-color-gray-dark-v6;
        white-space: nowrap;
        @include px-to-rem(min-height, 48px);
        border-bottom: none;
        @include px-to-rem(padding, 0 20px !important);

        i {
          color: $g-color-gray-dark-v9;
        }

        &.ms-hover,
        &:hover {
          text-decoration: none;
          background-color: $g-color-gray-light-v8;
          color: $g-color-black;

          i {
            color: $g-color-gray-dark-v9;
          }
        }
      }
    }
  }

  .ms-selection {
    margin-left: auto;
  }
}

.u-multi-select--blue-theme {
  .ms-selectable,
  .ms-selection {
    background-color: $g-color-gray-light-v8;

    .ms-list {
      li {
        &.ms-hover,
        &:hover {
          background-color: $g-color-lightblue-v9;
          color: $g-color-white;

          i {
            color: $g-color-white;
          }
        }
      }
    }
  }
}

.u-multi-select--items-lg {
  .ms-selectable,
  .ms-selection {
    .ms-list {
      li {
        @include px-to-rem(min-height, 56px);
      }
    }
  }
}

.u-multi-select--rounded-0 {
  .ms-selectable,
  .ms-selection {
    .ms-list {
      border-radius: 0;
    }
  }
}

.u-multi-select--items-icons {
  .ms-selectable,
  .ms-selection {
    .ms-list {
      li {
        position: relative;

        &::after {
          position: absolute;
          top: 50%;
          right: 15px;
          display: inline-block;
          font-family: "hs-admin-icons", sans-serif;
          color: $g-color-gray-dark-v9;
          opacity: 0;
          transform: translateY(-50%);
        }

        &:hover {
          &::after {
            opacity: 1;
          }
        }
      }
    }
  }

  .ms-selectable {
    .ms-list {
      li {
        &::after {
          content: "\e9fd";
          width: 18px;
          height: 18px;
          line-height: 18px;
          background-color: $g-color-lightblue-v3;
          font-size: 14px;
          color: $g-color-white;
          text-align: center;
          border-radius: 50%;
        }
      }
    }
  }

  .ms-selection {
    .ms-list {
      li {
        &::after {
          content: "\ea3b";
          font-size: 18px;
        }
      }
    }
  }
}

@media (min-width: $g-md) {
  .u-multi-select--v1 {
    display: flex;

    .ms-selectable,
    .ms-selection {
      width: 45%;

      .ms-list {
        height: 100%;
      }
    }
  }
}