@import 'inc/bootstrap';

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

    li {
        float: left;
        .li-inner {
            padding-bottom: 1px;
            text-decoration: none !important;
            outline: 0;
            display: inline-block;
            color: inherit;
            &:hover {
                color: white;
            }
        }
        // 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;
            input {
                padding-right: 34px;
                min-width: 250px !important;
            }
            .search-area-buttons-container {
                position: absolute;
                top: 0;
                right: 0;
                .icon-ul {
                    display: none;
                }

                &.has-results-counter {
                    right: 5px;
                    .icon-ul {
                        display: initial;
                    }
                }
            }

            .icon-find,
            .icon-ul {
                cursor: pointer;
                background: transparent;
                height: 19px;
                margin: 1px 0;
                border: 1px dashed transparent;
                &::before {
                    color: $darkBar;
                    vertical-align: top;
                }
            }

            .icon-find:focus,
            .icon-ul:focus {
                outline: none;
                border-color: $darkBar;
            }
            .icon-help {
                position: absolute;
                right: 5px;
                top: -1px;
                text-shadow: 0 0 transparent;
                color: white;
                cursor: pointer;
                display: block;
                width: 24px;
                height: 24px;
                line-height: 24px;
                text-align: center;
            }
            .icon-find {
                padding: 0;
                width: 25px;
            }
            .icon-ul {
                margin-left: 4px;
                padding: 0 2px 0 4px;
                position: relative;
                &::after {
                    content: '';
                    position: absolute;
                    left: -5px;
                    top: 2px;
                    bottom: 2px;
                    border-left: 1px solid $grey;
                }
                .results-counter {
                    color: $darkBar;
                    margin-left: 5px;
                    display: inline;
                    vertical-align: top;
                    line-height: 14px;
                    font-family: $regularFont;
                }
            }
        }
        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(0.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(0.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: 0;
                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();
}