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

%horizontal-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 0px;
  display: flex;
  flex-wrap: wrap;
}

%horizontal-list-item {
  display: inline-block;
}

%animation {
  animation-fill-mode: forwards;
  animation-duration: 0.3s;
}

%outline {
  &:active:not(:disabled),
  &:focus {
    outline: 3px solid $blue-france-500;
  }
}

%container { // TODO: switch to new design with preview in two view not in two column https://github.com/betagouv/demarches-simplifiees.fr/issues/7882
  @include horizontal-padding($default-padding);
  max-width: $page-width + 2 * $default-padding;
  margin-left: auto;
  margin-right: auto;
}