@import 'colors';
@import 'constants';

[data-fr-theme='dark'] .dossier-edit .dossier-edit-sticky-footer {
  background-color: var(--background-action-low-blue-france);
  border: none;
}

.dossier-header {
  .fr-container {
    padding-bottom: $default-padding;
  }

  h1 {
    font-size: 2rem;
  }

  .dossier-form-actions {
    margin-top: 2rem;
    margin-bottom: 1rem;
    text-align: right;
  }
}

.dossier-edit {
  .dossier-edit-sticky-footer {
    position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
    position: sticky;

    bottom: 0;

    padding: 0.5rem 1rem;

    background: var(--background-default-grey);

    border: 1px solid var(--border-contrast-grey);
    border-bottom: none;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;

    z-index: 10; // above DSFR btn which are at 1

    @media (min-width: 48em) {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }

  .send-dossier-actions-bar {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;

    a {
      white-space: nowrap;
    }

    @media (min-width: 48em) {
      flex-direction: row;
    }
  }

  .autosave {
    // Make the autosave block occupy the entire horizontal space,
    // to ensure the failed state has room to display its content.
    flex-grow: 1;
  }
}