#action-bar {
    display: flex;
    flex-direction: row;
    color: white;
    align-items: center;
    justify-content: space-between;
    column-gap: 4px;
    padding: 8px 12px 2px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 10%, #686868 100%);
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    #msg-form {
        display: flex;
        flex-grow: 1;
        background-color: white;
        border-radius: 32px;
        padding: 0px 12px;
        backdrop-filter: blur(10px);
        height: 100%;
        border: transparent;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;

        #msg-input-box {
            flex-grow: 1;
            padding: 8px 12px;
            background-color: transparent;
            color: black;
            border: transparent;
            border-radius: 32px;
            font-size: 15px;
            line-height: 15px;
            align-content: center;
            min-width: 0px;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        ::placeholder {
            color: grey;
            opacity: 1
        }
        
        #send-btn {
            display: flex;
            background-color: transparent;
            padding: 0;
            border: none;
            -webkit-tap-highlight-color: transparent;
        }

        :focus {
            outline: none
        }
    }

    .social-interact-btn {
        font-size: 10px;
        height: 40px;
        width: 40px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
        position: relative;

        .social-interact-icon {
            width: 24px;
            height: 24px;
            margin: auto;
        }
    }

    .send-button {
        background-color: grey;
        -webkit-mask: url(../image/sendButton.svg) no-repeat center;
        mask: url(../image/sendButton.svg) no-repeat center;
        width: 20px;
        height: 18px;
    }

    #share-btn {
        .social-interact-icon {
            background-image: url("/image/shareButton.svg");
        }
    }

    #like-btn {
        .social-interact-icon {
            background-image: url("/image/redHeart.svg");
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            position: relative;
            display: flex;
        }

        .liked {
            .bubble {
                position: absolute;
                animation: bubble 1s ease-in-out;
            }
        }

        .heart-animation-container {
            position: absolute;
            pointer-events: none;

            &.lv0, &.lv1 {
                height: 300px;
                top: -300px;
                width: 100px;
            }

            &.lv2 {
                height: 150px;
                top: -150px;
                width: 150px;
            }
        }
    }

    #hide-chat-toggle[data-chatroom-mode] {
        img {
            display: none;
        }
    }

    #hide-chat-toggle[data-chatroom-mode="SHOW_ALL"] {
        .hide-chat-toggle-icon-show-all {
            display: block;
        }
    }

    #hide-chat-toggle[data-chatroom-mode="HIDE_SYSTEM_MESSAGES"] {
        .hide-chat-toggle-icon-hide-system-messages {
            display: block;
        }
    }

    #hide-chat-toggle[data-chatroom-mode="HIDE_ALL"] {
        .hide-chat-toggle-icon-hide-all {
            display: block;
        }
    }
}

@keyframes bubble {
    from {
        top: 0%;
        opacity: 1;
        visibility: visible;
    }
    to {
        top: -100px;
        opacity: 0;
        visibility: hidden;
    }
}