.maha-assignment {
  flex: 1;
  display: flex;
}
.maha-assignment-unassigned {
  background-color: lighten(@black, 90);
  display: flex;
}
.maha-assignment-assigned {
  .scrollable();
  flex: 1;
}
.maha-assignment-add {
  border-bottom: 1px solid fadeout(@black, 95);
  padding: 0.8em;
  color: fadeout(@black, 50);
}
.maha-assignment-item {
  display: flex;
  border-bottom: 1px solid fadeout(@black, 95);
  transition: background-color 0.5s ease;
  &.expanded-enter {
    background-color: fadeout(@yellow, 90);
  }
  &.expanded-enter.expanded-enter-active {
    background-color: @white;
  }
}
.maha-assignment-item-token {
  flex: 1;
  .item-token {
    cursor: pointer;
  }
}
.maha-assignment-item-icon {
  flex: 0 0 3em;
  display: flex;
  cursor: pointer;
  padding: 0.8em 0.8em 0.8em 0;
  &:hover i {
    color: fadeout(@black, 50);
  }
  i {
    color: fadeout(@black, 70);
    margin: auto auto auto 0.5em;
    font-size: 1.2em;
  }
}

.maha-assignment-item-dropdown {
  border: 1px solid fadeout(@black, 90);
  background-color: #FFF;
  border-radius: 0.5em;
  .maha-assignment-item-dropdown-option {
    padding: 0.8em;
    border-bottom: 1px solid fadeout(@black, 95);
    cursor: pointer;
    i {
      margin-right: 0.8em;
    }
    &:hover {
      background-color: fadeout(@black, 97);
    }
    &:last-child {
      border: none;
    }
  }
}
.maha-assignment-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  .opacity-transition(0, 0.5, .5s);
  .opacity(0.5);
  background-color: @black;
}
@media (max-width: 768px) {
  .maha-assignment {
    position: relative;
    &.adding {
      .maha-assignment-unassigned {
        .translateX(0);
      }
    }
    .maha-assignment-unassigned {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      .transition(transform .15s cubic-bezier(0.7, 0, 0.175, 1) 0s);
      .translateX(100%);
    }
  }
  .maha-assignment-item-dropdown {
    .translate-y-transition(100%, 0, .15s);
    position: absolute;
    bottom: 0.5em;
    left: 0.5em;
    right: 0.5em;
  }
}
@media (min-width: 769px) {
  .maha-assignment-add {
    display: none;
  }
  .maha-assignment {
    position: relative;
    display: flex;
    .reframe-message {
      flex: 1;
      order: 2;
    }
  }
  .maha-assignment-unassigned {
    flex: ~"0 0 calc(100% / 3)";
    order: 1;
  }
  .maha-assignment-assigned {
    flex: 1;
    order: 2;
  }
  .maha-assignment-item-dropdown {
    position: absolute;
    width: 250px;
    top: 50%;
    left: 50%;
    .translateXY(-50%, -50%);
  }
}