.archive {
  position: relative;
  padding: 2rem 2rem 0;
  width: 100%;
  @include flexbox();
  @include flex-direction(column);
  @include justify-content(flex-start);

  &__container {
    width: 100%;
  }

  &__ul {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      left: 2.25rem;
      top: 0;
      width: 0.125rem;
      height: 100%;
      @include themify($themes) {
        background-color: themed('toc-vertical-line');
      }
    }

    @include respond-to(sm) {
      &::before {
        content: none;
      }
    }
  }

  &__li {
    margin-bottom: 0.5rem;
    margin-left: 4rem;
    z-index: 0;    

    @include transition(margin-left, 0.1s, ease);
    @include flexbox();
    @include align-items(center);
    @include respond-to(sm) {
      margin-left: 0;
      position: relative;

      &:not(:last-child) {
        &::before {
          content: '';
          left: 2.25rem;
          top: -0.03rem;
          height: 45px;
          position: absolute;
          z-index: -1;
          @include themify($themes) {
            border-left: 0.125rem solid themed('toc-vertical-line');
          }       
        }        
      }
      
      &:last-child {
        &::before {
          content: '';
          left: 2.25rem;
          top: -0.03rem;
          height: 28px;
          position: absolute;
          z-index: -1;
          @include themify($themes) {
            border-left: 0.125rem solid themed('toc-vertical-line');
          }
        }
      }
    }    
  }

  &__key {
    margin-right: 0.5rem;
    border-radius: 2px;
    height: 28px;
    width: 75px;
    padding: 0;
    font-size: 0.8rem;
    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    @include themify($themes) {
      color: themed('archive-key-color');
      background-color: themed('archive-key-background-color');
    }

    &:not(:first-child) {
      margin: 4rem 0 1rem 0;
    }
    &:first-child {
      margin: 1rem 0;
    }
  }

  &__type {
    margin-right: 0.5rem;
    border-radius: 2px;
    height: 18px;
    width: 75px;
    padding: 0;
    font-size: 0.8rem;
    @include flexbox();
    @include align-items(stretch);
    @include justify-content(center);
    @include themify($themes) {
      color: themed('archive-type-color');
      background-color: themed('archive-type-background-color');
    }
  }

  &__title {
    margin-right: 0.5rem;    

    @include truncate($grid-max-width);
    @include on-event {      
      &::before {
        content: '';
        position: absolute;
        left: 2.25rem;        
        top: inherit;
        width: 0.125rem;
        height: 23px;
        @include themify($themes) {
          background-color: themed('archive-hover-line-color');
        }
      }

      @include respond-to(sm) {
        &::before {
          content: none;
        }
      }
    }
  }

  &__date {
    font-size: 12px;
    @include themify($themes) {
      color: themed('archive-meta-color');
    }
  }
}