@import "../../theme/scss/variables.scss";

.bar-menu {
    list-style: none;
    font-size: 16px;
    padding: 0;
    margin: 0;
    a {
        color: $color-gray-deep;
        text-decoration: none;
        border: 0px;
    }
    & > li {
        position: relative;
        margin: 0;
        // padding: 0 10px;
        background: rgb(46, 59, 76);
        border-top: 2px solid rgb(34, 49, 68);
        // box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.03);
        &:hover {
            & > a {
                color: $color-gray-deep;
                border: 0px;
            }
        }
        &.active {
            & > a {
                color: $color-gray-deep;
                border: 0px;
            }
        }
        & > a {
            padding: 8px 5px 8px 60px;
            display: block;
            border-left: 3px solid transparent;
            color: $color-gray-deep;
            border: 0px;
            &:hover {
                color: $color-white;
                -webkit-transition: 0.3s;
                transition: 0.3s;
                -moz-transition: 0.3s;
                -webkit-transition: 0.3s;
                -o-transition: 0.3s;
                cursor: pointer;
                filter: alpha(opacity=35);
                -moz-opacity: 0.35;
                opacity: 0.35;
                margin-left: 5px;
            }
            & > .fa {
                &::before {
                    width: 25px;
                }
            }
        }
    }
    & > li.active {
        background: rgb(47, 94, 182);
    }
}