Lambda-School-Labs/kansha-fe

.feed-bar {
    background-color: $color-white;
    width: 55px;
    height: 100vh;
    right: 0px;
    position: fixed;
    display: flex;
    border-left: 2px solid lightgray;
    flex-direction: column;
    transition: width 500ms ease;
    z-index: 5;

    @media (max-width: 720px) {
        display: none;
    }

    .feed-headers {
        display: flex;
        margin-top: 3rem;
        margin-bottom: 3rem;
        margin-left: 1rem;
        justify-content: space-between;
        position: relative;
        user-select: none;

        &:hover {
            cursor: pointer;
        }

        h2 {
            margin-left: 5px;
        }

        .is-arrow-open:before {
            position: absolute;
            content: '';
            top: 50%;
            transform: translateY(-50%);
            left: -6px;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-color: transparent transparent transparent $color-secondary;
        }
        .is-arrow-closed:before {
            position: absolute;
            content: '';
            top: 50%;
            transform: translateY(-50%);
            left: -6px;
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-color: transparent $color-secondary transparent transparent;
        }

        .recently-thanked-title {
            min-width: 150px;
        }
    }

    .feed-rec-list {
        display: flex;
        flex-direction: column;
    }

    .hidden {
        width: 0;
        opacity: 0;
        height: 0;

        p {
            width: 0;
        }
    }
}

.is-rec-open {
    width: 400px;
    overflow: hidden;
}

.recognition {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 10px;
    width: 100%;

    &:nth-child(2n) {
        background-color: $color-white;
        padding: 8px 10px;
        .rec-message:before {
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                $color-white 100%
            );
        }
    }

    .rec-badge-and-message {
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        margin-left: 1rem;
        border-left: 2px solid lightgrey;
        width: 75%;
    }

    .rec-profile-pic {
        min-width: 25px;
        height: 25px;
        border-radius: 50%;
        margin-left: 0.3rem;

        &:hover {
            cursor: pointer;
        }
    }

    .rec-badge {
        width: 25px;
        height: 25px;
        margin-left: 1rem;
    }

    .rec-message {
        font-size: 1.6rem;
        margin-left: 0.3rem;
        width: 300px;
        height: 20px;
        word-wrap: none;
        overflow: hidden;
        position: relative;

        &:before {
            content: '';
            position: absolute;
            background: linear-gradient(
                90deg,
                rgba(255, 255, 255, 0) 0%,
                $color-white 100%
            );
            right: 0;
            width: 25%;
            height: 100%;
        }
    }

    .feed-reaction-buttons {
        display: flex;
        width: 25%;

        .reaction-button {
            border: none;
            margin-right: 1.5rem;
            color: rgba(0, 13, 34, 0.7);

            .heart-full {
                fill: $color-primary;
            }

            .heart-empty {
                fill: rgba(0, 13, 34, 0.7);
                cursor: pointer;
            }
        }
        .comment-button {
            border: none;
            margin-right: 1.5rem;
            color: rgba(0, 13, 34, 0.7);
            cursor: pointer;

            .comment-full {
                fill: $color-primary;
            }

            .comment-empty {
                fill: rgba(0, 13, 34, 0.7);
            }
        }
    }

    .hidden-rec {
        display: none;
    }
}