@use "../../../styles/abstracts/functions" as fun;
@use "../../../styles/abstracts/mixins" as mix;
@use "../../../styles/abstracts/placeholders";

.section {
  &:not(:last-of-type) {
    margin-bottom: var(--spacing-md);
  }

  @include mix.media("screen") {
    @include mix.dimensions("md") {
      display: grid;
      grid-template-columns: fun.convert-px(150) minmax(0, 1fr);
      align-items: first baseline;
      margin-left: fun.convert-px(-150);
    }
  }
}

.list {
  .item {
    border-bottom: fun.convert-px(1) solid var(--color-border);
  }
}

.year {
  padding-bottom: fun.convert-px(3);
  background: linear-gradient(
      to top,
      var(--color-primary-dark) 0.3rem,
      transparent 0.3rem
    )
    0 0 / 3rem 100% no-repeat;
  font-size: var(--font-size-2xl);
  font-weight: 500;
  text-shadow: fun.convert-px(1) fun.convert-px(1) 0 var(--color-shadow-light);

  @include mix.media("screen") {
    @include mix.dimensions("md") {
      grid-column: 1;
      justify-self: end;
      padding-right: var(--spacing-lg);
      position: sticky;
      top: var(--spacing-xs);
    }

    @include mix.dimensions("lg") {
      padding-right: var(--spacing-xl);
    }
  }
}

.btn {
  display: flex;
  margin: auto;
}

.progress {
  margin-block: var(--spacing-md);
}