@import "colors";
@import "constants";

.dossier-edit {
  .dossier-header {
    background-color: $light-grey;
    margin-bottom: $default-padding;

    .container {
      padding: $default-padding;
    }

    h1 {
      font-size: 22px;
    }
  }

  .prologue {
    margin: (1.5 * $default-padding) 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    .mandatory-explanation {
      flex-grow: 1;   // Push the "notice" button to the right
      flex-shrink: 1; // Allow the text to shrink
      margin-bottom: $default-spacer; // Leave space when the "notice" button wraps under the text
    }

    .button.notice {
      flex-shrink: 0; // Display the button label on a single line
    }
  }
}