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

.two-columns {
  @media (min-width: $two-columns-breakpoint) {
    background: linear-gradient(
      to right,
      transparent 0%,
      transparent 50%,
      var(--background-alt-blue-france) 50%,
      var(--background-alt-blue-france) 100%
    );
  }

  .columns-container {
    // TODO: https://github.com/betagouv/demarches-simplifiees.fr/issues/7882, once implemented, we won't need container anymore
    @extend %container;
    display: flex;
    flex-direction: column;
    justify-content: center;

    @media (min-width: $two-columns-breakpoint) {
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
    }
  }

  .column {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: ($default-padding * 2) 0 0 0;

    &:last-of-type {
      padding-bottom: $default-padding * 2;
    }

    @media (min-width: $two-columns-breakpoint) {
      width: 45%;
      margin: 0;
      padding: $two-columns-padding 0 $two-columns-padding 0;

      &:last-of-type {
        padding-bottom: $two-columns-padding;
      }
    }
  }
}

.one-column-centered {
  margin: auto;
  max-width: $page-width / 2;
}

.blank-tab {
  text-align: center;
}

.sticky--top {
  position: sticky;
  position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
  top: 1rem;
}

.sticky--bottom {
  position: sticky;
  position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
  bottom: 0;

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

html.scroll-margins-for-sticky-footer {
  scroll-padding: 0 0 100px 0;
}