@import 'susy';

.multi-select {
  @include container();

  padding-top: 1rem;

  select {
    display: block;
    height: 15rem;
  }

  a {
    height: 24px;
    width: 24px;
  }

  i {
    line-height: 24px;
  }
}

.multi-select--available-list {
  @include span(6 of 14);
}

.multi-select--selected-list {
  @include span(6 of 14 last);
}

.multi-select--controls {
  @include span(2 of 14);

  text-align: center;

  li {
    padding-bottom: .5rem;
  }
}

.flip-icon {
  transform: rotateY(180deg);
}