/**
 * TODO This file is a duplication of the file in tao-core. It should be removed later!
*/

@import 'inc/bootstrap';

.action-bar {
    background: whiten($info, .1);
    padding: 3px;
    overflow: hidden;
    color: whiten($info, .9);

    li {
        float: left;
        .li-inner {
            display: inline-block;
            height: 100%;
            padding-bottom: 1px;
            background: transparent;
            color: inherit;
            text-decoration: none !important;
            text-shadow: none;
            outline: 0;
            -webkit-touch-callout: none;

            &:hover {
                color: white;
            }
        }
        .menu-inner {
            text-align: left;
        }
        // clarification icon vs. glyph: same thing but due to certain CSS rules a second class is required

        img.glyph {

        }
        span.glyph {
            text-shadow: 0 0 0 transparent;
            color: inherit;
        }
        input {
            width: 100%;
            @include font-size(12);
            padding: 2px 4px;
        }
        &.active .li-inner{
            color: white;
        }
    }

    &.horizontal-action-bar {
        padding: 5px;
        height: 35px;
        .search-area {
            margin: 2px 0 0 0;
            border: none;
            float:right;
            display:inline-block;
            position: relative;
            padding: 0 30px 0 0;
            input {
                padding-right: 34px;
                min-width: 250px !important;
            }
            button {
                position: absolute;
                right: 32px;
                top: -2px;
                cursor: default;
                opacity: .5;
                background: transparent;
                width: 25px;
                height : 25px;
                &:before {
                    color: #666;
                }
            }
            .icon-help {
                position: absolute;
                right: 5px;
                top: -1px;
                text-shadow: 0px 0px transparent;
                color: white;
                cursor: pointer;
                display: block;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center
            }
        }
        li {
            margin: 0 1px;
            border: 1px transparent solid;
            text-align: center;
            float: left;

            .glyph {
                width: 14px;
            }
            .svg-glyph {
                height: 14px;
                width: 14px;
                margin-right: 9px;
            }
            &.btn-info {
                overflow: hidden;
                background: transparent;
                &:hover, &.active {
                    border-color: white(.3);
                    opacity: 1;
                }
            }
            &.disabled {
                background: none !important;
                text-shadow: inherit !important;
                opacity : 0.45 !important;
                color: inherit !important;
                a {
                    cursor: not-allowed !important;
                }
            }
        }
    }
    &.vertical-action-bar {
        li {
            max-height: 60px;
            .li-inner {
                height: 60px;
                display:block;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
                @include font-size(12);
                line-height: 12px;
            }
            .glyph {
                display: block;
                margin: 12px auto 3px;
                width: 20px;
                height: 20px;
            }
        }
    }
    &.tree-action-bar {
        background: $canvas;
        position: relative;
        left: -1px;
        padding: 0;
        margin: 0 widthPerc(8, $treeSidebar) 8px widthPerc(8, $treeSidebar);
        width: widthPerc($treeSidebar - 15, $treeSidebar);
        @include font-size(13);
        li {
            background: white(.5);
            @include simple-border();
            line-height: 1.3;
            padding: 0;
            text-align: center;
            float: left;
            width: 65px;
            height: 65px;
            margin: 0 1px 1px 0;
            .glyph,
            .svg-glyph {
                display:block;
                color: $info;
                margin: 12px auto 1px !important;
            }
            .svg-glyph {
                width: 20px;
                height: 20px;
            }
            .glyph {
                @include font-size(17, true);
            }
            .li-inner {
                display:block;
                height: 65px;
                padding: 2px;
                @include font-size(11);
                color: $textColor;
            }
            &:hover {
                background: #ddd;
                color: #666
            }
        }
    }
    .tree-filters {
        width: 160px;
        position: relative;
        input {
            padding-right: 24px;
        }
        span {
            position: absolute;
            right: 3px;
            color: #555;
            width: 22px;
            top: 2px;
            line-height: 20px;
            display: inline-block;
            text-align: center;
            text-shadow: 0 0 0 transparent;
            border-left: 1px solid #ddd;
            cursor:pointer;
            &.icon-close {
                display: none;
            }
            &:hover {
                color: $info;
            }
        }
    }
}

@mixin mobile-search() {
    .action-bar {
        &.horizontal-action-bar {
            .search-area {
                float: none;
                position: absolute;
                right: 0px;
                input {
                    padding-right: 30px;
                    min-width: auto !important;
                    width: 150px;
                    &:focus {
                        width: 220px;
                    }
                }
            }
        }
    }
}

@media (max-width: 1150px) {
    @include mobile-search();
}

// works in conjunction with layout/nav.js
body.oversized-nav:not(.delivery-scope){
    @include mobile-search();
}