#action-bar {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    flex-direction: row;
    width: 86%;
    height: 100%;

    & > .action-bar-buttons {
        width: 100%;
        height: 70%;

        & .button {
            width: 100%;
            height: 31px;
            align-self: center;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
    
            & .icon {
                width: 100%;
                position: relative;
                font-size: 31px;
            }

            &::after {
                content: '';
                position: absolute;
                bottom: -4.5px;
                width: 100%;
                height: 1.5px;
                background: #e2e2e2;
                transition: background-color 0.2s ease-out;
            }

            &:active {
                opacity: 80%;       
            }

            &:hover::after {
                background: #2aa882;
                box-shadow: 0px 0px 5px #2aa882;
            }
        }

        // button hover transition
        & .button:hover > .icon {      
            color: rgb(155, 155, 155);
        }

        // Activated button styles
        & .button.activated::after {
            background: #2aa882;
            box-shadow: 0px 0px 5px #2aa882;
        }
    }
}