.collapse {

  small {
    color: var(--grey-4);
    margin: auto .3125rem;
  }

  .item {
    position: relative;
    padding: 1.25rem 1.875rem;
    margin: 0;


    &::before {
      content: "";
      position: absolute;
      z-index: $zindex-1;
      the-transition();
      box-sizing: unset;
      top: 1.9rem;
      left: 0;
      width: .6rem;
      height: .6rem;
      border: .15rem solid var(--primary-color);
      border-radius: 50%;
      background: var(--grey-1);
    }

    &:not(:last-child):not(.title)::after {
      content: "";
      position: absolute;
      top: 1.9rem;
      bottom: -1.9rem;
      left: .35rem;
      border-left: .2rem solid var(--color-red-a3);
    }

    &:hover::before {
      border-color: var(--color-blue);
    }
  }


  .item.header {

    &::after {
      border-left-style: dashed !important;
    }

    .cheers {
      display: block;
    }
  }

  .item.section {
    &::before {
      width: .4rem;
      height: .4rem;
      margin-left: .1rem;
    }
  }

  .item.title, .item.header, .item.section {
    a {
      border-bottom: .0625rem dashed var(--grey-4);
    }
    &:hover a {
      border-bottom-color: var(--color-blue);
    }
  }

  .item.normal {

    &::before {
      top: 1.4rem;
      width: .2rem;
      height: .2rem;
      margin-left: .2rem;
      background: var(--primary-color);
    }

    &:hover::before {
      background: var(--color-blue);
    }

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: .625rem 1.875rem;


    .meta {
      display: inline;
      font-size: $font-size-smallest;
      margin-right: .625rem;

      time {
        color: var(--grey-4);
      }
    }

    .title {
      display: inline;

      a {
        color: var(--primary-color);

        &:hover {
          color: var(--color-blue);
        }
      }

      .i-link-alt {
        font-size: $font-size-small;
        margin-left: .3125rem;
      }
    }
  }
}