.timeline {
    &.no-forums .forums {
        display: none;
    }
    &.no-blogs .blogs {
        display: none;
    }
    &.no-wiki .wiki {
        display: none;
    }
    &.no-library .library {
        display: none;
    }
    &.no-snippets .snippets {
        display: none;
    }

    .timeline-item {
        @include usevar(background-color, card-background);
        @include usevar(color, main-color);
    }
}

.timeline-item {
    /*
    &:hover {
        @include usevar(background-color, card-background-hover);
    }
    */

    .avatar-icon {
        border: 2px solid;
        @include usevar(border-color, theme-color);

        &.big {
            width: 62px;
            height: 62px;
        }
    }

    .timeline-content-box > * {
        display: block;
        max-width: 100%;
        max-height: 80vh;
    }

    .timeline-content-box.youtube {
        // NOTE(asaf): CSS trick to get an iframe to auto resize
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 56.25%; // NOTE(asaf): As percentage of width. Ensures 16:9 aspect ratio.

        & > iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
    }
}

.timeline-modal {
    .container {
        max-height: 100vh;
        
        @media #{$breakpoint-not-small} {
            width: auto;
            max-height: calc(100vh - 2rem);
        }
    }
}