.select {
  color: @primary-disabled;
  position: absolute;
  left: -1px;
  padding: 5px 0;
  width: 100%;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  background-color: @bg;
  border: 1px solid @primary;
  white-space: nowrap;

  .select-group {
    clear: both;
    margin: 5px 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 {
    padding-left: 5px;
    line-height:@optionSpacing;
  }

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


  .c {
    border:1px solid @primary-disabled;
    display: block;
    float:left;
    padding: 0;
    margin: 0.5em;
    width: 2em;
    line-height: @optionSpacing;
    text-align: center;

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

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

  ul {
    margin: 0;
    margin-left: 1.5em;
    padding: 0;
    list-style: none;
    overflow: hidden;
  }

  &.hardpoint {
    .c {
      width: auto;
      padding: 0.1em 0.5em;
    }
    ul {
      margin-left: 0.5em;
    }
  }

}