/* Copyright (C) 2016 NooBaa */

side-nav {
    @border-width: 3px;
    @transition-duration: 250ms;

    .column();
    padding: @gutter/4 0;

    .nav-link {
        color: rgb(var(--color02));
        cursor: @cursor-pointer;
        position: relative;
        padding-left: @gutter - @border-width;
        overflow-x: hidden;
        border-left: @border-width solid transparent;
        border-top: 1px solid transparent;
        transition: all @transition-duration ease-in-out;


        > svg-icon {
            z-index: 1;
            transition: opacity @transition-duration ease-in-out;
            fill: rgb(var(--color02));
        }

        > span {
            position: absolute;
            left: 100%;
            top: 0;
            background-color: rgb(var(--color15));
            line-height: 24px;
            width: 150px;
            box-shadow: 2px 2px 2px rgba(var(--shadow1));
            transform:  translateX(@gutter * 3);
            transition: all @transition-duration ease-out;
        }

        &.selected {
            border-left-color: rgb(var(--color20));
            background-color: rgb(var(--color15));

            > svg-icon {
                fill: rgb(var(--color20));
            }
        }

        &:hover {
            background: rgb(var(--color15));
            overflow: visible;
            box-shadow: 0 2px 2px rgb(var(--shadow1));

            > svg-icon {
                fill: rgb(var(--color20));
                transform: scale(1.3, 1.3);
            }

            > span {
                transform:  translateX(-@gutter/2);
            }
        }

        + .nav-link {
            border-top-color: rgb(var(--color18));
        }
    }
}
