@use "./config";
@use "./mixins";

@layer components {
  .timeline {
    @include mixins.timeline();

    &__item {
      @include mixins.item();
    }

    &__item:last-child {
      @include mixins.item-last-child();
    }

    &__number-column {
      @include mixins.number-column();
    }

    &__number {
      @include mixins.number();
    }

    &__line {
      @include mixins.line();
    }

    &__label {
      @include mixins.label();
    }

    &__item:not(:first-child) &__label {
      @include mixins.label-spaced();
    }

    &__item:first-child &__number {
      @include mixins.number-first-item();
    }

    &__item:first-child:has(.timeline__label:not(:empty)) &__number {
      margin-top: config.$label-space;
    }

    &__item:first-child:has(.timeline__label:not(:empty)) &__label {
      @include mixins.label-spaced();
    }

    &__item:first-child &__label:empty {
      @include mixins.empty-label();
    }

    &__headline {
      @include mixins.headline();
    }

    &__description {
      @include mixins.description();
    }
  }
}