@import 'settings';

.form-toolbar {
  display: flex;
  flex-direction: column;

  background-color: white;
  padding: 1rem 1rem;
  text-align: center;

  // Remove the default .btn + .btn padding that messes up our vertical list.
  .btn {
    margin-left: 0;
  }

  // Bottom margin on form elements messes up the vertical alignment.
  .form-group {
    margin-bottom: 0;
  }
}

@include for-tablet-landscape-up() {
  .form-toolbar {
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;

    &.form-toolbar--sticky {
      position: sticky;
      z-index: 5;
      top: 10px;

      // Only include backdrop if this could float over things.
      @include z-depth-2;


      // Offset below site manager bar
      .toolbar-fixed.toolbar-horizontal & {
        top: 50px;
      }

      .toolbar-fixed.toolbar-horizontal.toolbar-tray-open & {
        top: 90px;
      }
    }

    &.form-toolbar--fixed-bottom {
      position: fixed;
      z-index: 5;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 0;
      margin-bottom: 0;
    }

    .btn {
      // Due to the reverse order we need to manually add some padding.
      margin-left: 5px;
      // Bottom margin on form elements messes up the vertical alignment.
      margin-bottom: 0;
    }
  }
}
