@import "../variables";

.menu-column {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    bottom: 0;
    width: $columnWidth;
    background: #292d30;
    padding-top: 20px;

    $markWidth: 3px;

    overflow: auto;

    a.item {
        display: block;
        text-decoration: none;
        color: #fff;
        text-align: center;
        padding: 15px 0;
        border-bottom: 1px dashed #3f3f4f;
        border-left: $markWidth solid transparent;
        border-right: $markWidth solid transparent;

        &:hover {
            background: #15171a;
        }

        &.active {
            background: #15171a;
            border-right: $markWidth solid #16a085;
            border-bottom: 0;
        }

        i {
            display: block;
            font-size: 20px;
        }

        .name {
            display: block;
            font-size: 14px;
            margin-top: 5px;
        }
    }
}