@use "../mixins/bem" as *;
@use "../mixins/function" as *;

@include b(archives) {
  .count {
    font-size: 0.85rem;
    opacity: 0.8;
    font-weight: 300;
    font-style: oblique;
  }

  @include e(header) {
    .count {
      font-style: normal;
    }
  }

  @include e(timeline) {
    margin: 2rem 0;

    @include m(year) {
      border-bottom: 1px solid getCssVar("line-color");
      margin-top: 2rem;
      position: sticky;
      top: var(--vp-nav-height);
      background-color: getCssVar("bg-color-1");
      z-index: 1;

      .year {
        padding: 0.5rem 0;
        font-size: 1.5rem;
        font-weight: 500;
      }
    }

    @include e(timeline__m) {
      margin-top: 1rem;

      @include m(month) {
        border-bottom: 1px solid getCssVar("line-color");
        margin-top: 1rem;
        .month {
          padding-bottom: 0.5rem;
          font-size: 1.2rem;
        }
      }

      ul {
        padding: 0.5rem 1rem;
        li {
          line-height: 2;
          a {
            display: block;
            transition: padding 0.3s;
            &:hover {
              padding-left: 1rem;
              color: getCssVar("theme-color");
              background: getCssVar("item-bg-color-hover");
            }

            .date {
              opacity: 0.6;
              font-size: 0.85rem;
              margin-right: 0.5rem;
            }
          }
        }
      }
    }
  }
}