.editable-popup {
  .editable-input {
    @extend %flex;
    @extend %flex-wrap-wrap;
    min-width: 220px;

    & > input[type="text"],
    & > select {
      margin-right: 8px;
    }

    .editable-buttons {
      display: flex;

      button {
        @include flex(1 0 0);
        min-width: 34px;
        margin-right: 8px;
        text-align: center;

        &:last-of-type {
          margin-right: 0;
        }

        .ui-button-text {
          padding: .1em;
        }
      }

      .editable-cancel,
      .editable-submit {
        & > span { display: none }
      }

      .editable-cancel:before { @include icon("cancel") }
      .editable-submit:before { @include icon("checked") }
    }

    .editable-date {
      @include flex(0 0 100%);
      margin-bottom: 8px;

      .ui-datepicker {
        width: 100%;
      }
    }

    & > input[type="text"],
    & > select              { @extend %order-1; @include flex(2 0 0); }
    & > .editable-buttons   { @extend %order-2; @include flex(1 0 auto); }
    & > .editable-clear     { @extend %order-3; }

    .editable-clear a {
      position: absolute;
      right: 16px;
      bottom: 56px;
    }
  }
}