@import 'scss/styles.scss';

.progress-bar-parent {
  gap: 4px;
  padding: 0 4px;
  border-radius: 2px;
  .progress-bar-tooltip {
    padding: 4px 4px;
    .progress-text {
      color: $ta-black-2;
      width: 100%;

      &.table-progress-text {
        font-size: 14px;
        font-weight: 400;
        line-height: 18px;
      }

      &::-moz-selection {
        color: $ta-black-2;
        background: $grey-14;
      }

      &::selection {
        color: $ta-black-2;
        background: $grey-14;
      }

      &.progress-bar-text {
        color: $white;
      }
    }

    .progress-bar-holder {
      width: 35px;
      height: 8px;
      border-radius: 2px;
      overflow: hidden;
      position: relative;

      .progress-child-back {
        opacity: 0.2;
        width: 100%;
        height: 8px;
        position: absolute;
      }

      .progress-child-front {
        height: 8px;
        position: absolute;
        left: 0;
        top: 0;
      }

      .expired {
        background: $ta-red-11;
        opacity: 1;
      }

      .back-gray {
        background: $muted;
        opacity: 0.2;
      }

      .back-yellow {
        background: $ta-yellow-5;
        opacity: 0.2;
      }

      .back-red {
        background: $ta-red-11;
        opacity: 0.2;
      }

      .front-gray {
        background: $muted;
      }
      .front-yellow {
        background: $ta-yellow-5;
      }
      .front-red {
        background: $ta-red-11;
      }
    }

    &.disable-hover:hover {
      background-color: unset;
      cursor: default;
    }

    &:hover {
      background-color: $dark-2;
      cursor: pointer;
    }

    &.progress-bar-active-dropdown {
      background-color: $black;
    }
  }
}

// Progress Container
.bg-sliver-container {
  background: $dark-2;
}

.bg-expired-container {
  background: $ta-red;
}

.bg-inactive-container {
  background: $ta-light-grey;
}

.bg-orange-container {
  background: $ta-yellow-7;
}

.bg-danger-container {
  background: $ta-red-16;
}

// Progress Bar
.bg-progress-sliver {
  background: $muted;
  width: 80%;
}

.bg-progress-orange {
  background: $ta-yellow-1;
  width: 50%;
}

.bg-progress-danger {
  background: $ta-red-10;
  width: 20%;
}