@import '../../themes/index';
$wcapacity-prefix: '.#{$base-name}.#{$base-prefix}-wcapacity';

$bg-color: getVar(widgets-color-container-background, $widgets-color-container-background);
$label-size: getVar(widgets-font-size-6, $widgets-font-size-6);
$unit-size: getVar(widgets-font-size-2, $widgets-font-size-2);
$label-medium-size: getVar(widgets-font-size-3, $widgets-font-size-3);
$title-size: getVar(widgets-font-size-1, $widgets-font-size-1);
$label-color: getVar(widgets-numbercard-color-text, $widgets-numbercard-color-text);
$title-color: getVar(widgets-color-text-2, $widgets-color-text-2);

$normal-background: getVar(widgets-capacity-background-normal, $widgets-capacity-background-normal);
$default-background: getVar(widgets-capacity-background-default, $widgets-capacity-background-default);
$success-background: getVar(widgets-capacity-background-success, $widgets-capacity-background-success);
$warning-background: getVar(widgets-capacity-background-warning, $widgets-capacity-background-warning);
$error-background: getVar(widgets-capacity-background-error, $widgets-capacity-background-error);

#{$wcapacity-prefix} {
  overflow: hidden;

  #{$wcapacity-prefix}-percent-container {
    display: flex;
    align-items: center;
    position: relative;
    height: 100%;
    width: 200px;

    #{$wcapacity-prefix}-bar-container {
      position: relative;
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      &.empty {
        background: $bg-color;
      }

      &.error {
        background: $error-background;
      }

      &.normal {
        background: $normal-background;
      }

      &.default {
        background: $default-background;
      }

      &.success {
        background: $success-background;
      }

      &.warning {
        background: $warning-background;
      }

      #{$wcapacity-prefix}-bar-guide-line {
        position: absolute;
        bottom: 0;
        width: 100%;
        border-width: 1px;
        border-style: dashed;
        border-bottom: none;
        border-left: none;
        border-right: none;
        z-index: 999;

        #{$wcapacity-prefix}-bar-guide-text {
          text-align: left;
          font-size: $title-size;
          position: relative;
          top: -20px;
          left: 8px;
        }
      }

      #{$wcapacity-prefix}-process-bar {
        position: absolute;
        bottom: 0;
        width: 100%;
        overflow: hidden;

        #{$wcapacity-prefix}-process-back {
          position: relative;
          width: 200%;
          height: 100%;
          opacity: 0.4;
          backface-visibility: hidden;
          transform: translate3d(0, 0, 0) scale(1, 1) perspective(1px);
          -webkit-font-smoothing: subpixel-antialiased;
          animation: wave 3s linear infinite;
        }
      }

      #{$wcapacity-prefix}-percent-bar-label-content {
        position: relative;
        z-index: 3;
        margin-bottom: 8px;
        line-height: 1;
        color: $label-color;

        &.medium {
          font-size: $label-medium-size;
        }

        &.large {
          font-size: $label-size;
        }

        #{$wcapacity-prefix}-percent-bar-label-unit {
          font-size: $unit-size;
        }
      }

      #{$wcapacity-prefix}-percent-bar-label-title {
        position: relative;
        z-index: 3;
        line-height: 1;
        font-size: $title-size;
        color: $title-color;
      }
    }
  }
}

@keyframes wave {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}