@use "./config";
@use "../../../styles/tools/generate";
@use "../../../styles/tools/convert";
@use "../../../styles/tokens/breakpoint";
@use "../../../styles/tokens/space";

@mixin timeline() {
  list-style: none;
  margin: 0 0 space.get("large") 0;
  padding: 0;
}

@mixin item() {
  display: grid;
  grid-template-columns: config.$number-column-width minmax(0, 1fr);
  column-gap: convert.to-rem(10px);
  align-items: stretch;
  padding-bottom: config.$item-spacing-bottom;

  @include breakpoint.get("md") {
    column-gap: convert.to-rem(20px);
  }
}

@mixin item-last-child() {
  padding-bottom: 0;
}

@mixin number-column() {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: config.$number-column-width;
  grid-column: 1;
  grid-row: 1 / span 3;
}

@mixin number() {
  @include generate.responsive-css-map(config.$headline);
  color: var(--color-text-accent);
  display: block;
  text-align: center;
  margin: 0;
  margin-top: config.$label-space;
}

@mixin number-first-item() {
  margin-top: 0;
}

@mixin line() {
  flex: 1 1 auto;
  width: config.$line-width;
  background-color: var(--color-border-strong);
  margin-bottom: convert.to-rem(-30px);
  margin-top: config.$line-indent;
}

@mixin label() {
  @include generate.responsive-css-map(config.$caption);
  color: var(--color-text-default);
  height: config.$label-slot-height;
  min-height: config.$label-slot-height;
  display: flex;
  align-items: center;
  margin: 0;
  grid-column: 2;
}

@mixin label-spaced() {
  margin-bottom: config.$label-gap;
}

@mixin empty-label() {
  height: 0;
  min-height: 0;
}

@mixin headline() {
  @include generate.responsive-css-map(config.$headline);
  color: var(--color-text-default);
  margin: 0 0 space.get("small");
  grid-column: 2;
  max-width: config.$content-max-width;
  min-width: 0;

  > :last-child {
    margin-bottom: 0;
  }
}

@mixin description() {
  @include generate.responsive-css-map(config.$body);
  color: var(--color-text-default);
  grid-column: 2;
  max-width: config.$content-max-width;
  min-width: 0;

  > :last-child {
    margin-bottom: 0;
  }
}