.toolbar {
    float: left;
    width: 2%;
    height: 100%;
    background: $colorNeutralBg;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    .tool {
        height: 40px;
        position: relative;;
        margin: 6px 0;

        > [class^="icon-"] {
            width: 100%;
            height: 100%;
            cursor: pointer;
            color: $colorMainDarken;
            font-size: 21px;
            background: $colorNeutralBg;
            z-index: 1;
            position: relative;
            transition: all 0.2s ease-in-out 0s;
            display: flex;
            justify-content: center;
            align-items: center;

            &:hover {
                color: #fff;
                background: $colorMainDarken;
                transition: all 0.1s ease-in-out 0.05s;

                + .tool-label {
                    transform: translateX(0);
                }
            }
        }

        &:hover, &.active {
            > [class^="icon-"] {
                color: #fff;
                background: $colorMainDarken;
            }
        }

        &.active {
            .tool-content {
                animation: display-none-in-transition 0.4s forwards;
                opacity: 1;
                visibility: visible;
                z-index: 9;
            }
            > [class^="icon-"]:hover + .tool-label {
                transform: translateX(-100%);
            }
        }

        &.disabled {
            opacity: 0.5;
            cursor: default;

            &:hover .tool-label {
                display: none;
            }
        }

    }

    .tool-label {
        text-transform: uppercase;
        color: #fff;
        font-size: 10px;
        padding: 0 15px 0 8px;
        position: absolute;
        left: 30px;
        top: 0;
        height: 100%;
        background: $colorMainDarken;
        cursor: pointer;
        white-space: nowrap;
        transform: translateX(-100%);
        transition: translateX, 0.1s, ease-in-out;
        display: flex;
        align-items: center;
        border-top-right-radius: 0.3rem;
        border-top-left-radius: 0.3rem;

        .shortcut {
            text-transform: capitalize;
            line-height: 1;
            margin: 0 0 0 5px;
            font-size: 9px;
        }
    }

    .tool-content {
        background: #fff;
        min-width: 300px;
        position: absolute;
        left: 60px;
        top: 0;
        opacity: 0;
        z-index: -9;
        border-radius: 0.3rem;
        flex-direction: column;
        animation: display-none-out-transition 0.4s;

        .open {
            opacity: 1;
            z-index: 9;
        }

        header {
            width: 100%;
            height: 30px;
            background: $colorMainDarken;
            color: #fff;
            position: relative;
            border-top-right-radius: 0.3rem;
            border-top-left-radius: 0.3rem;

            .title {
                font-family: $fontTitlesB;
                font-size: 14px;
                line-height: 30px;
                text-transform: uppercase;
                text-align: center;
                margin: 0;
            }

            .close {
                position: absolute;
                display: block;
                top: 0;
                bottom: 0;
                margin: auto;
                font-size: 14px;
                width: 14px;
                height: 14px;
                right: 10px;
                cursor: pointer;
            }
        }

        .main {
            padding: 20px 25px 50px;
            border: 1px solid $colorNeutralBd;
            border-top: 0;
            min-width: 250px;
            overflow: auto;
            width: 100%;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;

            &.float-footer {
                padding-bottom: 60px;
                border-bottom: 0;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }

        footer {
            width: 100%;
            height: 50px;
            padding: 0 25px;
            position: absolute;
            bottom: -10px;
            background: $colorNeutralBg;
            border: 1px solid $colorNeutralBd;
            border-top: 0;
            align-items: center;
            justify-content: space-between;
            display: flex;
            border-bottom-left-radius: 0.3rem;
            border-bottom-right-radius: 0.3rem;
        }
        display: flex;
        align-items: center;
        justify-content: space-between;

        .btn-blue-small {
            font-family: "Century Gothic Bold", sans-serif;
            color: #fff;
            background-color: #397999;
            text-transform: uppercase;
            border: none;
            text-shadow: none;
            border-radius: 3px;
            transition: all, 0.2s, ease-in-out;
        }

        .action-filter {
            float: right;
            display: inline-block;
            width: 100px;
            padding: 0 30px;
            line-height: 32px;
            font-size: 11px
        }

        .clear-filter {
            font-family: $fontTitlesB;
            text-decoration: none;
            transition: all .2s ease-in-out;

            &:hover {
                color: $colorFontNeutral
            }

            &.disabled {
                opacity: 0.3;
                cursor: default;
            }
            color: lighten($colorFontNeutral, 20%);
            font-size: 12px;

            i {
                font-size: 7px;
                margin-right: 2px;
            }
        }
    }

    &:before {
        content: '';
        position: absolute;
        top: 7px;
        z-index: 1;
        @include triangle(left, 20px, 20px, $colorMainDarken);
        border-top-width: 8px;
        border-bottom-width: 8px;
        left: -10px;
    }
}

.tool {
    .filtro-dds {
        width: 640px;

        form {
            width: 100%;
            height: 100%;
            display: block;
            overflow: auto;
        }
    }

    .area-esquerda, .area-direita {
        overflow: hidden;
    }

    .area-esquerda {
        float: left;
    }

    .area-direita {
        float: right;
    }

    .menu-filtro {
        border: 1px solid $colorNeutralBd;
        border-radius: 0.3rem;
        margin: 10px 5px 0 0;
        min-height: 24px;
        padding: 5px;
        width: 152px;
    }

    .listas {
        display: table;
        min-height: 50px;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .listas li {
        background: $colorMain;
        border-radius: 0.3rem;
        color: $colorMainRoyal;
        cursor: pointer;
        font-weight: $fontBold;
        font-size: 12px;
        margin-bottom: 2px;
        overflow: hidden;
        padding: 5px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 140px;

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

        &:hover {
            background: $colorMainDarken;
            color: #fff;
            cursor: pointer;
        }

    }

    .lista-a li {
        margin-left: 0 !important;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
    }

    .lista-b {
        padding-bottom: 60px;
    }

    .area-filtro {
        width: 422px;

        .legend {
            color: $colorFontNeutral;
            font-weight: $fontBold;
            font-size: 12px;
            margin: 0 0 3px;
            padding: 0;
        }
    }

    .container-warning {
        text-align: center;
    }

    .warning-filtro {
        display: inline-block;
        text-align: center;
        padding: 10px;
        margin: 30px auto;
        font-size: 13px;
        border-radius: 0.3rem;
        border: 1px solid lighten($colorError, 15%);
        background: lighten($colorError, 20%);
        color: darken($colorError, 40%);
    }

    .area-menu-filtro {
        border: 0.1rem solid $colorNeutralBd;
        border-radius: 0.3rem;
        overflow-x: auto;
        padding: 5px;
        margin-bottom: 10px;

        &::-webkit-scrollbar:horizontal {
            height: 10px;
        }

        &.active {
            background: $colorHovered;
        }

        .listas li {
            background: darken($colorNeutralBg, 10%);
            color: darken($colorNeutralBd, 30%);
            cursor: pointer;

            &:hover {
                background: darken($colorNeutralBg, 20%);
                color: $colorFont;
            }

            &.ativado, &.valido {
                background: $colorMain;
                color: $colorMainRoyal;
                cursor: pointer;
            }

            &:hover, &.selecionado {
                background: $colorMainDarken;
                color: #fff;
                cursor: pointer;
            }
        }

        @for $i from 0 through $filterItens {
            #{li}:nth-child(#{$i+1}) {
                margin-left: 3 * $i#{rem}
            }
        }
    }

    .conteudo-filtro {
        padding: 5px 0;

        &.ng-enter {
            -webkit-transition: 0.5s linear all;
            -moz-transition: 0.5s linear all;
            -o-transition: 0.5s linear all;
            transition: 0.5s linear all;
        }

        &.ng-enter {
            z-index: 100;
            opacity: 0;
        }

        &.ng-enter.ng-enter-active {
            opacity: 1;
        }

        &.ng-leave {
            z-index: 101;
            opacity: 1;
        }

        &.ng-leave.ng-leave-active {
            opacity: 0;
        }

        [class^=item-] {
            border: 1px solid $colorNeutralBd;
            border-radius: 0.3rem;
            overflow: hidden;
            max-height: 356px;
            position: relative;

            .legend {
                background-color: $colorNeutralBg;
                padding: 10px;
                margin-bottom: 5px;
            }
        }

        div input[type=text], .filtro-abas div textarea {
            width: 96% !important;
            margin: 10px auto !important;
        }

        div[class^=aba-] {
            color: $colorFontNeutral;
            padding: 10px 0;
        }
    }

    .campos-fitlro {
        width: 96%;
        padding: 0;
        border: none;
        margin: 10px 2%;

        input[type="search"] {
            box-sizing: border-box;
        }
    }

    .lista-filtro {
        padding: 5px 10px;
        list-style-type: none;
        max-height: 170px;
        overflow-y: auto;

        li {
            margin: 20px 0;

            &:first-child {
                margin-top: 0;
            }
        }
    }
}

/* custom ui */
.ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled {
    background-color: $colorNeutralBd !important;
    color: $colorFont !important;
    opacity: .35;
}


