$bar-color: #BABABA !default;
$bar-stroke: #8D99A6 !default;
$border-color: #44444F1A !default;
$light-bg: #FAFAFB !default;
$light-border-color: #44444F1A !default;
$light-yellow: #3DD598 !default;
$text-muted: #92929D !default;
$text-light: #FFFFFF !default;
$text-color: #171725 !default;
$blue: #0f9ffa !default;
$handle-color: #E2E2EA !default;

$dark-bar-color: #BABABA !default;
$dark-bar-stroke: #8D99A6 !default;
$dark-border-color: #92929D !default;
$dark-light-bg: #13131A !default;
$dark-light-border-color: #92929D1A !default;
$dark-light-yellow: #3DD598 !default;
$dark-text-muted: #E2E2EA !default;
$dark-text-light: #B5B5BE !default;
$dark-text-color: #FAFAFB !default;
$dark-blue: #0f9ffa !default;
$dark-handle-color: #92929D !default;



.gantt-chart-container {
  font-family: 'Poppins', 'Montserrat';
  transition: all 0.5s;

  .gantt {
    .grid-background {
      fill: #FFF;
    }

    .grid-header {
      fill: #FFF;
      stroke: none;
      stroke-width: 1.4;
      width: 100%;
    }

    .grid-row {
      fill: none;
    }

    .grid-row:nth-child(even) {
      fill: none;
    }

    .row-line {
      stroke: $light-border-color;
    }

    .tick {
      stroke: $border-color;
      stroke-width: 0.2;

      &.thick {
        stroke-width: 0.4;
      }
    }

    .today-highlight {
      fill: $light-yellow;
      opacity: 0.5;
    }

    .arrow {
      fill: none;
      stroke: $text-muted;
      stroke-width: 1.4;
    }

    .bar {
      fill: $bar-color;
      stroke: $bar-stroke;
      stroke-width: 0;
      transition: stroke-width .3s ease;
      user-select: none;
    }

    .bar-progress {
      fill: $blue;
    }

    .bar-invalid {
      fill: transparent;
      stroke: $bar-stroke;
      stroke-dasharray: 5;
      stroke-width: 1;

      &~.bar-label {
        fill: $text-light;
      }
    }

    .bar-label {
      dominant-baseline: central;
      fill: $text-light;
      font-size: 12px;
      font-weight: lighter;
      text-anchor: middle;

      &.big {
        fill: $text-light;
        text-anchor: start;
      }
    }

    .handle {
      cursor: ew-resize;
      fill: #92929D;
      opacity: 0;
      transition: opacity .3s ease;
      visibility: hidden;
    }

    .bar-wrapper {
      cursor: pointer;
      outline: none;

      &:hover {
        .bar {
          fill: darken($bar-color, 5);
        }

        .bar-progress {
          fill: darken($blue, 5);
        }

        .handle {
          opacity: 1;
          visibility: visible;
        }
      }

      &.active {
        .bar {
          fill: darken($bar-color, 5);
        }

        .bar-progress {
          fill: darken($blue, 5);
        }
      }
    }

    .lower-text,
    .upper-text {
      font-size: 12px;
      text-anchor: middle;
    }

    .upper-text {
      fill: $text-color;
    }

    .lower-text {
      fill: $text-color;
    }

    .hide {
      display: none;
    }
  }

  .gantt-container {
    border-radius: 5px;
    font-size: 12px;
    overflow: auto;
    position: relative;

    .popup-wrapper {
      background: #FAFAFB;
      border-radius: 5px;
      box-shadow: 1px 1px 1px 1px #44444F1A;
      color: #171725;
      left: 0;
      padding: 0;
      position: absolute;
      top: 0;

      .title {
        border-bottom: 3px solid $blue;
        padding: 10px;
      }

      .subtitle {
        color: #696974;
        padding: 10px;
      }

      .pointer {
        border: 5px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.8);
        height: 5px;
        margin: 0 0 0 -5px;
        position: absolute;
      }
    }
  }
}

.gantt-chart-container.dark {
  .gantt {
    .grid-background {
      fill: $dark-light-bg;
    }

    .grid-header {
      fill: $dark-light-bg;
      /* stroke: $dark-border-color; */
    }

    .grid-row {
      fill: none;
    }

    .grid-row:nth-child(even) {
      fill: $dark-light-bg;
    }

    .row-line {
      stroke: $dark-light-border-color;
    }

    .tick {
      stroke: $dark-border-color;
    }

    .today-highlight {
      fill: $dark-light-yellow;
      opacity: 0.5;
    }

    .arrow {
      stroke: $dark-text-muted;
    }

    .bar {
      fill: $dark-bar-stroke;
      stroke: $dark-bar-stroke;
    }

    .bar-progress {
      fill: $blue;
    }

    .bar-invalid {
      fill: transparent;
      stroke: $dark-bar-stroke;

      &~.bar-label {
        fill: $dark-text-light;
      }
    }

    .bar-label {
      dominant-baseline: central;
      fill: #fff;
      font-size: 12px;
      font-weight: lighter;
      text-anchor: middle;

      &.big {
        fill: $dark-text-light;
        text-anchor: start;
      }
    }

    .handle {
      cursor: ew-resize;
      fill: $dark-handle-color;
      opacity: 0;
      transition: opacity .3s ease;
      visibility: hidden;
    }

    .bar-wrapper {
      cursor: pointer;
      outline: none;

      &:hover {
        .bar {
          fill: darken($dark-bar-color, 5);
        }

        .bar-progress {
          fill: darken($dark-blue, 5);
        }
      }

      &.active {
        .bar {
          fill: darken($dark-bar-color, 5);
        }

        .bar-progress {
          fill: darken($dark-blue, 5);
        }
      }
    }

    .upper-text {
      fill: $dark-text-light;
    }

    .lower-text {
      fill: $dark-text-color;
    }
  }

  .gantt-container {
    .popup-wrapper {
      background: #F1F1F5;
      box-shadow: 1px 1px 1px 2px #F1F1F5;
      color: #171725;

      .title {
        border-bottom: 3px solid $dark-blue;
      }

      .subtitle {
        color: #171725;
      }

      .pointer {
        border-top-color: #F1F1F5;
      }
    }
  }
}