coriolis/app/less/select.less

.select {
  color: @primary-disabled;
  position: absolute;
  left: -1px;
  padding: 0.5em 0;
  width: 100%;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 0;
  -webkit-overflow-scrolling: touch;
  background-color: @bg;
  border: 1px solid @primary;
  white-space: nowrap;
  text-align: center;

  .select-group {
    text-align: left;
    margin: 0.5em 0;
    padding-left: 5px;
    border-top: 1px solid @primary-disabled;
    border-bottom: 1px solid @primary-disabled;
  }

  .empty-c, .c, .lc {
    cursor: pointer;

    color: @primary-disabled;
    stroke-width: 1em;
    stroke: @primary-disabled;

    &:hover {
      color: @warning;
      stroke: @warning;
    }
    &.disabled {
      cursor: not-allowed;
      color: @disabled;
      stroke: @disabled;
    }
    &.active {
      color: @secondary;
      stroke: @secondary;
    }
  }

  @optionSpacing: 1.8em;

  .lc {
    line-height:@optionSpacing;
    text-align: left;
  }

  .empty-c {
    line-height:@optionSpacing;
    text-align: center;
  }


  .c {
    border:1px solid @primary-disabled;
    display: inline-block;
    padding: 0.1em;
    margin: 0.3em;
    width: 2em;
    line-height: @optionSpacing;
    text-align: center;

    &:hover {
      border:1px solid @warning;
    }

    &.disabled {
      border:1px solid @disabled;
    }
    &.active {
      border:1px solid @secondary;
    }
  }

  ul {
    display: inline-block;
    text-align: left;
    min-width: 15em;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }

  &.hardpoint {
    .c {
      width: 4em;
      padding: 0.1em 0.5em;
    }
    ul {
      width: 17em;
    }
  }

}