.apos-modal .apos-array-editor
{
  float: right;
  width: 75%;

  .apos-schema-group { width: 100%; }
}

.apos-ui {
  .apos-array-item-controls
  {
    display: flex;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    margin-right: @apos-margin-1;
  }
}

.apos-modal .apos-schema-tabs.apos-array-items
{
  padding-top: 50px;
  width: 25%;
  i
  {
    float: right;
    margin-left: @apos-margin-1;
    color: @apos-mid;
    &:hover
    {
      cursor: pointer;
      color: @apos-dark;
    }
    &:first-child {
      margin-left: 0;
    }
    .apos-transition();
  }
}

// TODO re-figure .apos-modal .apos-schema-group {} width when no tabs are present.
// Question: Do we need tabs in arrays?

// "Add Item" button
.apos-modal
{
  // Like apos-chooser, but without the 15% width, and let's
  // stop trying to reuse it because separate evolution already
  // broke this once. -Tom
  .apos-array-chooser
  {
    position: fixed;
    .apos-inline-block;
    height: 100%;
    overflow: auto;
    width: 25%;
    @media @apos-breakpoint-desktop-xl { width: 25%; }
    background-color: @apos-light;
  }

  .apos-array-add-item, .apos-array-limit-reached
  {
    position: absolute;
    top: 0;
    left: 0;
    width: 25%;
    text-align: center;
    padding: @apos-padding-2*.75 0;
    z-index: 1;
  }

  .apos-array-limit-reached
  {
    display: none;
    &:hover {
      background-color: @apos-base;
    }
  }
}