@import 'base.less';

.aesop-timeline {
    position: fixed;
    bottom:0;
    left:0;
    right:0;

    ol {
        margin:0;
        padding:0;
        .clearfix();
        position:relative;
        background:@baseContrast;
        padding:5px 10px;
        .box-shadow(inset 0 7px 7px -7px darken(@baseContrast,40));

        li {
            display: inline-block;
            margin-right:5px;

            &:last-child {
                margin-right:0;
            }

            a {
                text-transform: uppercase;
                font-size:14px;
                color:inherit;
                padding:2px 10px 8px;
                display: block;
                position:relative;

                &:after {
                    content: '';
                    height: 20px;
                    border-right: 1px solid darken(@baseContrast,50);
                    width: 1px;
                    position: absolute;
                    left: 50%;
                    bottom: -10px;
                }
            }

            &.active a {
                color:@link-color;

                &:after {
                    border-right-color:@link-color;
                }
            }
        }
    }
}