@use "./variables" as vars;
@use "./functions" as fn;

.multi-select-dropdown
{
  position : relative;
  width    : 100%;
}

.input-container
{
  display          : flex;
  flex-wrap        : wrap;
  align-items      : center;
  padding          : fn.px2Rem(1) fn.px2Rem(5);
  border           : fn.px2Rem(2) solid vars.$input-border-color;
  border-radius    : vars.$input-border-radius;
  background-color : vars.$body-bg;
}

.input-container input
{
  flex-grow        : 1;
  border           : none; //solid 1px red;
  outline          : none;
  padding          : 0.2rem 0.5rem;
  line-height      : 1.5;
  //font-size        : fn.px2Rem(14);
  background-color : vars.$input-bg;
}

.selected-item
{
  display          : flex;
  align-items      : center;
  margin           : fn.px2Rem(2);
  padding          : 0 fn.px2Rem(2) fn.px2Rem(1) fn.px2Rem(8);
  background-color : vars.$primary-bg-subtle;
  border-radius    : fn.px2Rem(16);
}

.selected-item .btn-remove
{
  @extend .text-danger;
  line-height : fn.px2Rem(5);
  padding-top : 0;
}

.selected-item img
{
  width         : fn.px2Rem(20);
  height        : fn.px2Rem(20);
  border-radius : 50%;
  margin-right  : fn.px2Rem(5);
}

.selected-item button
{
  background  : none;
  border      : none;
  cursor      : pointer;
  //font-size   : 16px;
  color       : vars.$btn-color;
  margin-left : fn.px2Rem(5);
}

.dropdown-list
{
  position         : absolute;
  top              : 100%;
  left             : 0;
  width            : 100%;
  max-height       : fn.px2Rem(200);
  overflow-y       : auto;
  background-color : vars.$form-select-bg;
  border           : fn.px2Rem(1) solid vars.$input-border-color;
  border-top       : none;
  border-radius    : 0 0 fn.px2Rem(4) fn.px2Rem(4);
  box-shadow       : vars.$form-select-box-shadow;
}

.dropdown-item
{
  display     : flex;
  align-items : center;
  padding     : fn.px2Rem(2) fn.px2Rem(8);
  cursor      : pointer;
}

.dropdown-item:hover
{
  background-color : vars.$list-group-hover-bg;
}

.dropdown-item input[type="checkbox"]
{
  margin-right : fn.px2Rem(10);
}

.dropdown-item img
{
  width         : fn.px2Rem(24);
  height        : fn.px2Rem(24);
  border-radius : 50%;
  margin-right  : fn.px2Rem(10);
}

.dropdown-item .description
{
  font-size   : fn.px2Rem(0.8);
  color       : vars.$list-group-action-color;
  margin-left : fn.px2Rem(5);
}

.dropdown-item .checkbox
{
  width           : fn.px2Rem(18);
  height          : fn.px2Rem(18);
  border          : fn.px2Rem(2) solid vars.$input-border-color;
  border-radius   : fn.px2Rem(3);
  margin-right    : fn.px2Rem(10);
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
}

.dropdown-item .checkbox.checked
{
  background-color : vars.$form-check-input-checked-bg-color;
  border-color     : vars.$form-check-input-checked-border-color;
}

.dropdown-item .checkmark
{
  color : vars.$input-bg;
  //font-size : 14px;
}