// Variables
$toolbar-background-color: $color-layer-2;
$toolbar-border-color: $global-border-color;

// Default toolbar styling (DbqDocumentClassListToolbar)
.dbqdcl-toolbar {
    display: flex;
    justify-content: space-between;
    padding: ($padding-default / 3);
    // overflow: hidden;
    background: $toolbar-background-color;
    border: 1px solid $toolbar-border-color;
    border-radius: 5px;

    .dbqdcl-toolbar-buttons {
        display: flex;

        .dbqdcl-toolbar-dropdown {
            border-radius: $border-radius-button-default;
            background: $modal-input-background;
            height: 30px;
            border: 2px solid $modal-border-color;
            margin-right: ($padding-default / 3);
            color: $modal-input-color;
            font-size: $font-size-small;
            font-weight: 600;
            outline: 0;
            cursor: pointer;

            &:hover {
                background: $color-primary;
                border-color: $color-primary;
                color: $color-white;
            }

            option {
                color: $text-color-default;
            }
        }

        .dbqdcl-toolbar-button {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 30px;
            height: 30px;
            padding: 4px !important;
            margin-right: ($padding-default / 3);
            border-radius: $border-radius-button-default;
            background: $modal-input-background;
            border: 2px solid $modal-border-color;
            color: $modal-input-color;
            font-size: $font-size-small;

            svg {
                fill: $text-color-default;
            }

            &:hover,
            &.dbqdcl-toolbar-button-active {
                background: $color-primary;
                border-color: $color-primary;
                svg {
                    fill: #fff;
                }
            }

            .dbqdcl-toolbar-badge {
                @include badge;
                position: absolute;
                top: -10px;
                right: -7px;
                padding: 1px 5px;
            }

            &.checkbox-inline {
                min-width: 185px;
                padding-right: 5px !important;
                border-radius: $border-radius-default;
                color: color(text-color-default);
                border: 2px solid $modal-border-color !important;
                line-height: 20px !important;
                width: auto;
                padding: 0 !important;
                font-weight: 500;
                
                .toggle.btn {
                    height: 26px !important;
                    min-height: 26px !important;
                    float: left;
                    font-size: 12px;
                    font-weight: 600;
                    margin-right: 10px;
                    border-radius: 8px 0 0 8px !important;
                    background: $modal-input-background !important;
                    border-color: $modal-border-color;
                    border: 0 !important;
                    -webkit-box-shadow: none !important;
                    -moz-box-shadow: none !important;
                    box-shadow: none !important;
                    margin-left: -6px !important;
                    top: 1px;
                }
                .toggle-on.btn {
                    font-size: 12px;
                    font-weight: 600;
                    padding: 2px 0 !important;
                }
                .toggle-off.btn {
                    font-size: 12px;
                    font-weight: 600;
                    padding: 7px 5px 8px 10px !important;
                }
                .toggle {
                    .btn.btn-default {
                        padding: 0;
                        margin: 0;
                        height: 26px;
                        line-height: 26px;
                        border-radius: 8px 0 0 8px;
                        border: 0;
                        &:hover {
                            border: 0;
                            color: #ffffff;
                        }
                    }
                    .btn.btn-default.toggle-handle {
                        width: 10px;
                    }
                    span.btn.btn-default.toggle-handle {
                        &:enabled {
                            width: 10px;
                        }
                    }
                    .toggle-group {
                        span.toggle-handle {
                            background: #008000 !important;
                            border: 0 !important;
                            &:hover {
                                border: 0 !important;
                            }
                        }
                    }
                    &:hover {
                        .toggle-group {
                            span.toggle-handle {
                                background: #008000 !important;
                            }
                        }
                    }
                    &:not(.off) {
                        .toggle-off {
                            background: transparent !important;
                        }
                    }
                }
                .toggle-group {
                    span.toggle-handle {
                        border-radius: 0 !important;
                        background: #cb4627 !important;
                        border: 0;
                    }
                    .btn-primary {
                        cursor: pointer;
                        background: #008000 !important;
                        border: 2px solid #008000 !important;
                        border-radius: $border-radius-default 0 0 $border-radius-default;
                        -webkit-box-shadow: none;
                        -moz-box-shadow: none;
                        box-shadow: none;
                        &:hover {
                            background: #008000 !important;
                            border: 2px solid #008000 !important;
                        }
                    }
                    label.btn-default {
                        cursor: pointer;
                        background: #cb4627 !important;
                        color: #fff !important;
                        border: 2px solid #cb4627;
                        padding: 1px 0 !important;
                        border-radius: $border-radius-default 0 0 $border-radius-default;
                        -webkit-box-shadow: none;
                        -moz-box-shadow: none;
                        box-shadow: none;
                        &:hover {
                            background: #cb4627 !important;
                            border: 2px solid #cb4627;
                        }
                    }
                }
                button.btn-default.dropdown-toggle {
                    &:enabled {
                        border-radius: $border-radius-default !important;
                    }
                }
                .toggle.btn.btn-primary {
                    &:hover {
                        border: 0 !important;
                        color: #ffffff !important;
                    }
                    &:enabled {
                        &:hover {
                            border: 0 !important;
                            color: #ffffff !important;
                        }
                    }
                }
                .toggle.btn.btn-default {
                    &:hover {
                        border: 0 !important;
                        color: #ffffff !important;
                    }
                    &:enabled {
                        &:hover {
                            border: 0 !important;
                            color: #ffffff !important;
                        }
                    }
                }
                .toggle.off {
                    .toggle-group {
                        span.toggle-handle {
                            background: #cb4627 !important;
                            border: 0 !important;
                            &:hover {
                                border: 0 !important;
                            }
                        }
                    }
                    &:hover {
                        .toggle-group {
                            span.toggle-handle {
                                background: #cb4627 !important;
                            }
                        }
                    }
                }

                a[data-toggle="tooltip"] {
                    svg {
                        fill: $text-color-default !important;
                    }

                    &:hover {
                        svg {
                            fill: $color-primary !important;
                        }
                    }
                }

                &:hover {
                    background-color: $global-background-color-default !important;
                }

                &.dbqdcl-toolbar-button-infinite-refresh {
                    min-width: 170px;

                    .toggle {
                        top: 1.5px;
                    }
                }
            }
        }
    
        .dbqdcl-toolbar-button.btn-group {
            background: 0 none;
            border: 0 none;
            color: transparent;
            padding: 0;
    
            &:hover {
                background: 0 none;
                border: 0 none;
                color: transparent;
                padding: 0;
            }
        
            &.classlist-view-mode svg {
                padding: 0;
                margin-top: -3px;
                margin-left: -2px;
            }
    
            .btn {
                border-radius: 0;
                height: 30px;
                line-height: 13px;
                padding: 5px;
                background: $modal-input-background;
                border: 2px solid $modal-border-color !important;
        
                svg {
                    fill: $color-primary;
                    width: $svg-icon-size;//20px;
                    height: $svg-icon-size;//20px;
                }

                &:first-of-type {
                    border-radius: $border-radius-button-default 0 0 $border-radius-button-default;
                    border-right: 0 !important;
                }
        
                &:last-of-type {
                    border-radius: 0 $border-radius-button-default $border-radius-button-default 0;
                    border-left: 0 !important;
                }

                &:hover {
                    border-color: color(button-border-color) !important;
                    background-color: transparent;
                }

                &.btn-primary {
                background-color: $color-primary;
                    svg {
                        fill: $color-white
                    }
                }
            }
        }
    }

    .dbqdcl-toolbar-search {
        display: flex;
        margin-left: auto;

        input {
            @include search-field;
        }
    }

    .dbqdcl-navigation-control {
        display: flex;
        border: 2px solid $modal-border-color;
        border-radius: $border-radius-button-default;
        margin-right: ($padding-default / 3);

        .dbqdcl-back-button {            
            display: flex;
            align-items: center;
            justify-content: center;
            width: 26px;
            height: 26px;
            padding: 2px;

            svg {
                fill: $text-color-default;
            }

            &:hover {
                background: $color-primary;
                border-color: $color-primary;
                svg {
                    fill: #fff;
                }
            }
        }

        .dbqdcl-items-dropdown {
            background: none;
            border: none;
            margin: 0 5px;
            outline: none;
            color: $modal-input-color;
            font-size: $font-size-small;
            font-weight: $font-weight-bold;
            cursor: pointer;
            border-radius: $border-radius-button-default;

            &:hover {
                background: $color-primary;
                border-color: $color-primary;
                color: $color-white;
            }

            option {
                color: $text-color-default;
            }
        }
    }
}

// Toolbar styling for other lists such as the Calendar and Kanban board
.document-class-list-control-container {
    .classlist-toolbar-item {
        position: relative;
        margin-right: 5px;
        height: 30px;
        border-radius: $border-radius-button-default;
        background: $modal-input-background;
        border: 2px solid $modal-border-color;
        color: $modal-input-color;
        font-size: $font-size-small;
        float: left;
        line-height: 30px;
        font-weight: 400;
        width: 30px;
        padding: 3px !important;

        .dbqdcl-toolbar-badge {
            @include badge;
            position: absolute;
            top: -10px;
            right: -7px;
            padding: 1px 5px;
        }
    }
  
    label.classlist-toolbar-item {
      background: 0;
    }
  
    .classlist-toolbar-item.btn-group {
      background: 0 none;
      border: 0 none;
      color: transparent;
      padding: 0;
  
      &:hover {
        background: 0 none;
        border: 0 none;
        color: transparent;
        padding: 0;
      }
  
      &.classlist-view-mode svg {
        padding: 0;
        margin-top: -3px;
        margin-left: -2px;
      }
  
      .btn {
        border-radius: 0;
        height: 30px;
        line-height: 13px;
        padding: 5px;
        background: $modal-input-background;
        border: 2px solid $modal-border-color !important;
  
        svg {
          fill: $color-primary;
          width: $svg-icon-size;//20px;
          height: $svg-icon-size;//20px;
        }

        &:first-of-type {
          border-radius: $border-radius-button-default 0 0 $border-radius-button-default;
          border-right: 0 !important;
        }
  
        &:last-of-type {
          border-radius: 0 $border-radius-button-default $border-radius-button-default 0;
          border-left: 0 !important;
        }

        &:hover {
          border-color: color(button-border-color) !important;
          background-color: transparent;
        }

        &.btn-primary {
          background-color: $color-primary;
          svg {
            fill: $color-white
          }
        }
      }

      
    }
  
    #classlist-search-list-table .classlist-toolbar-item {
      border-radius: $border-radius-button-default !important;
    }
  }