$gray: #f0f0f0;

$font-gray:#777;

.gantt {
  &-chart {
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    outline: 1px solid $gray;
  }

  &-container{
    width: 100%;
    height: 100%;
  }

  &-header {
    display: flex;
    background-color: #fff;
    outline: 1px solid $gray;

    &-title {
      flex: none;
      width: 100%;
      background: whitesmoke;
      color: #777;
      font-weight: bold;
      text-align: center;

      border-right: 1px solid #eee;
      border-bottom: 1px solid #eee;
    }

    &-timeline {
      overflow: hidden;
    }
  }

  &-body {
    position: relative;
  }

  &-timeline {
    position: relative;
    text-align: center;
    display: flex;

    &-day {
      overflow: hidden;
      font-weight: bold;
      color: $font-gray;
    }

    &-scale {
      display: flex;

      &>div {
        height: 100%;
        font-size: 0.8rem;
        font-weight: bold;
        color: $font-gray;
      }
    }

    // 隐藏第一个时间节点，不然会只显示一半，不好看
    &-block:first-child &-scale div:first-child {
      visibility: hidden;
    }
  }

  &-leftbar {
    width: 100%;
    height: 100%;
    background: #fff;
    color: $font-gray;
    font-size: 0.8rem;

    &-wrapper {
      flex: none;
      position: relative;
      overflow: hidden;
      background: #fff;
      outline: 1px solid $gray;
      z-index: 100;
    }

    &-item {}

    &-defalutItem {
      width: 100%;
      height: 100%;
      outline: 1px solid $gray
    }
  }

  &-table {
    display: flex;
    width: 100%;
    height: 100%;
  }

  &-markline-area {
    position: absolute;
    z-index: 99;
  }

  &-markline {
    position: absolute;
    z-index: 100;
    width: 2px;
    height: 100vh;

    &-label {
      padding: 3px;
      float: left;
      color: #fff;
      font-size: 0.7rem;
    }
  }

  &-blocks {
    border: 1px solid #eee;
    background-image: linear-gradient(rgba(236, 236, 236) 1px, transparent 0),
    linear-gradient(90deg, rgba(236, 236, 236) 1px, transparent 0);
    &-wrapper {
      overflow: hidden;
    }
  }

  &-block {
    position: relative;
    // background-image: url('./assets/block.png');
    background-repeat: repeat;

    &-container {
      position: relative;
      height: 100%;
    }

    &-item {
      position: absolute;
      height: 100%;
    }

    &-defaultBlock {
      width: 100%;
      height: 100%;
      outline: 1px solid $gray;
      background: $gray;
    }
  }

  &-scroll-y {
    display: none;
    overflow-y: scroll;
    position: absolute;
    z-index: 1000;
    top: 0;
    right: 0;
    height: 100%;
    width: 17px;

    &>div {
      width: 17px;
    }
  }

  &-scroll-x {
    overflow-x: scroll;
    position: absolute;
    z-index: 1000;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 17px;

    &>div {
      //height: 17px;
      height: 8px;
    }
  }
}