// Base + Non-Slideable ============================
.apos-ui.apos-modal
.apos-modal-header
{
  position: relative;
  width: 100%;
  padding: @apos-padding-2 @apos-padding-3 @apos-padding-2;
  background-color: @apos-white;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  border-bottom: 2px solid @apos-mid;

  .apos-dropdown-items
  {
    text-align: left;
  }

  .apos-dropdown
  {
    vertical-align: top;
    box-shadow: none;
    .apos-rounded;
    &:hover, &.apos-active { .apos-drop-shadow; }
    .apos-dropdown-items{ min-width: 100px; }
    .apos-button { border-width: 0; &:hover { box-shadow: none; } }
  }

  .apos-modal-title
  {
    .apos-inline-block(top);
    max-width: 30%;
    margin-right: 2%;

    font-weight: 600;
    font-size: 32px;
    color: @apos-dark;
    line-height: 32px;
    letter-spacing: -1px;
  }

  .apos-modal-instructions
  {
    .apos-inline-block(bottom);
    width: 27%;
    margin-right: 1%;
    font-size: 14px;
    line-height: 19px;
    @media @apos-breakpoint-desktop-xl
    {
      font-size: 16px;
      line-height: 18px;
    }
    letter-spacing: 0px;
  }

  .apos-modal-controls
  {
    position: relative;
    .apos-inline-block(top);
    max-width: 100%;
    float: right;
    white-space: nowrap;
    text-align: right;

    // Too many buttons here right now.
    // Halfing the left/right padding on these "minor"
    // buttons for now.  -Matt C
    .apos-button.apos-button--minor
    {
      padding: @apos-padding-1 @apos-padding-2;
    }
    .apos-button.apos-button--minor + .apos-button.apos-button--major,
    .apos-button.apos-button--minor + .apos-button:last-of-type
    {
      margin-left: @apos-padding-1;
      @media @apos-breakpoint-desktop-xl { margin-left: @apos-padding-2; }
    }
    .apos-dropdown
    {
      margin-right: @apos-padding-1;
      @media @apos-breakpoint-desktop-xl { margin-right: @apos-padding-2; }
    }
  }
}