@import '../../../common/variables';

@keyframes bcs-ActivityItem-callout {
    0%,
    100% {
        background-color: transparent;
    }

    30%,
    70% {
        background-color: $bdl-box-blue-05;
    }
}

.be .bcs-activity-feed {
    position: relative;
    display: flex;
    flex-direction: column;
    width: $sidebarContentWidth;
    height: 100%;

    ol,
    ul {
        list-style: none;
    }

    li {
        line-height: 20px;
    }

    &.bcs-is-scrolled::before {
        position: absolute;

        // position it behind bcs-content-header
        top: -$sidebarHeaderHeight;
        right: $sidebarActivityFeedSpacingHorizontal;
        left: $sidebarActivityFeedSpacingHorizontal;
        height: $sidebarHeaderHeight;
        box-shadow: 0 $bdl-grid-unit $bdl-grid-unit * 3 $bdl-gray-10;
        content: ' ';
    }

    .bcs-activity-feed-items-container {
        $container-padding: 25px;
        $container-transition-delay: 25ms;
        $container-transition-duration: 200ms;

        position: relative;
        display: flex;
        flex: 1 1 auto;
        flex-direction: column;
        width: 100%; // Explicit width required since flex-direction is column
        min-height: $sidebarContentMinHeight;
        overflow: hidden auto;

        > .inline-alert-error {
            margin: 9px 20px;
        }

        .bcs-ActivityItem {
            position: relative;
            box-shadow: 0 $container-padding 0 -#{$container-padding - 1} $bdl-gray-10;
            backface-visibility: hidden; // Prevent visual shifting during pseudo-element scale transitions
            transition: box-shadow $container-transition-duration ease $container-transition-delay;

            &.bcs-is-focused {
                .bcs-ActivityCard {
                    box-shadow: 0 0 $bdl-grid-unit * 4 $bdl-gray-30;
                    animation: bcs-ActivityItem-callout 1s ease-in-out $container-transition-delay 0 normal none; // Disabled by default

                    &:not(:focus-within) {
                        animation-iteration-count: 1; // Only play the animation if the user is not interacting directly with the element or its descendents
                        animation-fill-mode: forwards;
                    }
                }
            }
        }

        .bcs-version-item {
            padding-top: 0;
            padding-bottom: 0;
            box-shadow: none;

            &,
            & + .bcs-ActivityItem {
                margin-top: $bdl-grid-unit * 4;
            }
        }

        .bcs-activity-feed-annotation-activity {
            .bcs-ActivityCard {
                &::before {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    display: block;
                    width: $bdl-grid-unit;
                    background-color: $bdl-yellorange;
                    transform: scaleY(0); // Visually hidden, but available for transition
                    transition: transform $container-transition-duration ease $container-transition-delay;
                    content: '';
                }
            }

            &.bcs-is-focused {
                .bcs-ActivityCard {
                    &::before {
                        transform: scaleY(1);
                    }
                }

                .bcs-SelectableActivityCard {
                    background-color: transparent;
                }
            }
        }
    }

    .bcs-activity-feed-active-state {
        padding-bottom: $bdl-grid-unit * 4;
    }

    .bcs-activity-feed-loading-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 20px;
    }

    .bcs-feedItemInlineError {
        margin: 20px 25px;
    }

    .bcs-activity-feed-comment-input {
        flex: 0 0 auto;
        min-height: $sidebarContentMinHeight;
        max-height: 500px;
        overflow: hidden;
        background-color: $white;

        &.bcs-is-disabled {
            opacity: 0.4;
            pointer-events: none;
        }

        .selector-dropdown-wrapper {
            // Override z index to prevent a new stacking context under the approval comment form
            z-index: auto;
            width: 100%;
        }

        .overlay {
            max-height: 95px;
            overflow: auto;
        }
    }
}

.bcs-is-wider .bcs-activity-feed {
    width: $sidebarContentIncreasedWidth;
}

@include breakpoint($medium-screen) {
    .be .bcs-activity-feed {
        width: 100%;

        .bcs-activity-feed-comment-input {
            width: 100%;
        }
    }
}
