.param-aggregations {
  @include param-list();

  li.aggregation {
    select.operation {
      // 1. operation: has top radius, not bottom radius
      @extend %custom-select;
      border-radius: 3px 3px 0 0;
    }

    .single {
      // 2. (optional) colname: has no radius
      .react-select__control {
        // @extend %custom-select;
        background-color: lighten($Vlight-gray, 3%);
        border: 2px solid $Vlight-gray;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-radius: 0;
        cursor: pointer;
        &:hover {
          border-color: darken($Vlight-gray, 7%);
        }
        &.react-select__control--is-focused {
          border-color: $data-action--border;
        }
      }
    }

    label.outname {
      // 3. outname: no top radius
      display: flex;
      margin: 0;

      span {
        font-size: 1.4rem;
        flex: 0 0 auto;
        line-height: 3.1rem; // line up with <input>
        border: 2px solid $Vlight-gray;
        border-right: 0;
        border-radius: 0 0 0 3px;
        padding: 0 1.2rem; // line up with <select> innards above it
        color: $placeholder;
      }

      input {
        @include module-parameter;
        padding: 0 1.3rem; // same as <span>
        border-radius: 0 0 3px 0;
        border-top-color: transparent;
        display: block;
        flex: 1 1 auto;
        &:hover {
          border-color: darken($Vlight-gray, 7%);
        }
        &:focus {
          border-color: $data-action--border;
        }
      }
      &:nth-child(2) {
        // change color depending if it's in position 2 or not
        input {
          background-color: lighten($Vlight-gray, 3%);
        }
        span {
          border-top: lighten($Vlight-gray, 3%);
        }
      }
    }
  }
}
