.timeline {
    position: relative;

    overflow: hidden;

    &--comment {
        .timeline__item {
            align-items: flex-start;
        }
    }

    &__overflow {
        position: relative;

        overflow: auto;

        height: 32.5rem;
    }

    &__wrapper {
        position: relative;

        margin: 4rem 2rem;

        &:before {
            position: absolute;
            top: 2rem;
            left: 1.5rem;

            display: block;

            width: 0.7rem;
            height: 85%;

            content: "";

            background-color: @minion;
        }

        &--comment {
            margin: 3rem 2rem;

            &:before {
                height: 100%;
            }
        }
    }

    &__avatar {
        position: relative;
        z-index: 2;

        margin-right: 2rem;
    }

    &__item {
        display: flex;
        align-items: flex-start;

        margin-bottom: 2rem;

        &:last-child {
            .timeline__date:after {
                position: absolute;
                bottom: 0;
                left: 0;

                width: 100%;
                height: 1000%;

                content: "";
                transform: translateY(100%);

                background: @stormtrooper;
            }
        }
    }

    &__date {
        position: relative;
        z-index: 2;
        top: 2rem;

        margin-right: 1.5rem;

        &--comment {
            position: absolute;
            z-index: 10;
            top: -2rem;
            left: 2rem;
        }
    }
}