/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
.dag-taskbar {
  width: 190px;
  height: 100%;
  background-color: #fff;
  margin-right: 20px;

  .taskbar-title {
    display: flex;
    border-bottom: dashed 1px #e5e5e5;
    height: 42px;
    padding: 0 20px;
    align-items: center;

    h4 {
      color: #666;
      font-size: 14px;
    }
  }

  .tasks {
    width: 100%;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-height: calc(100% - 42px);
    overflow: auto;

    .draggable-box {
      cursor: move;
      width: 100%;
      height: 32px;
      margin-bottom: 10px;

      .task-item {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        border: 1px dashed #e4e4e4;
        padding: 0 10px;
        border-radius: 4px;

        em {
          margin-right: 10px;
          display: block;
          width: 18px;
          height: 18px;
          background-size: 100% 100%;
          &.icos-shell {
            background-image: url("../images/task-icos/shell.png");
          }
          &.icos-sub_process {
            background-image: url("../images/task-icos/sub_process.png");
          }
          &.icos-procedure {
            background-image: url("../images/task-icos/procedure.png");
          }
          &.icos-sql {
            background-image: url("../images/task-icos/sql.png");
          }
          &.icos-flink {
            background-image: url("../images/task-icos/flink.png");
          }
          &.icos-mr {
            background-image: url("../images/task-icos/mr.png");
          }
          &.icos-python {
            background-image: url("../images/task-icos/python.png");
          }
          &.icos-dependent {
            background-image: url("../images/task-icos/dependent.png");
          }
          &.icos-http {
            background-image: url("../images/task-icos/http.png");
          }
          &.icos-datax {
            background-image: url("../images/task-icos/datax.png");
          }
          &.icos-pigeon {
            background-image: url("../images/task-icos/pigeon.png");
          }
          &.icos-sqoop {
            background-image: url("../images/task-icos/sqoop.png");
          }
          &.icos-conditions {
            background-image: url("../images/task-icos/conditions.png");
          }
          &.icos-waterdrop {
            background-image: url("../images/task-icos/waterdrop.png");
          }
          &.icos-spark {
            background-image: url("../images/task-icos/spark.png");
          }
          &.icos-switch {
            background-image: url("../images/task-icos/switch.png");
          }
        }

        span {
          font-size: 12px;
        }

        &:hover {
          color: #288fff;
          border: 1px dashed #288fff;
          background-color: rgba(40, 143, 255, 0.1);

          em {
            &.icos-shell {
              background-image: url("../images/task-icos/shell_hover.png");
            }
            &.icos-sub_process {
              background-image: url("../images/task-icos/sub_process_hover.png");
            }
            &.icos-procedure {
              background-image: url("../images/task-icos/procedure_hover.png");
            }
            &.icos-sql {
              background-image: url("../images/task-icos/sql_hover.png");
            }
            &.icos-flink {
              background-image: url("../images/task-icos/flink_hover.png");
            }
            &.icos-mr {
              background-image: url("../images/task-icos/mr_hover.png");
            }
            &.icos-python {
              background-image: url("../images/task-icos/python_hover.png");
            }
            &.icos-dependent {
              background-image: url("../images/task-icos/dependent_hover.png");
            }
            &.icos-http {
              background-image: url("../images/task-icos/http_hover.png");
            }
            &.icos-datax {
              background-image: url("../images/task-icos/datax_hover.png");
            }
            &.icos-pigeon {
              background-image: url("../images/task-icos/pigeon_hover.png");
            }
            &.icos-sqoop {
              background-image: url("../images/task-icos/sqoop_hover.png");
            }
            &.icos-conditions {
              background-image: url("../images/task-icos/conditions_hover.png");
            }
            &.icos-waterdrop {
              background-image: url("../images/task-icos/waterdrop_hover.png");
            }
            &.icos-spark {
              background-image: url("../images/task-icos/spark_hover.png");
            }
            &.icos-switch {
              background-image: url("../images/task-icos/switch_hover.png");
            }
          }
        }
      }

      &.disabled{
        cursor: default
      }
    }
  }
}
