@import '../../themes/default/modules/progress.variables';

@if $use-progress {
  /*******************************
  //@-       Progress
  *******************************/

  .ui.progress {
    position: relative;
    display: block;
    max-width: 100%;
    border: $progress-border;
    margin: $progress-margin;
    box-shadow: $progress-box-shadow;
    background: $progress-background;
    padding: $progress-padding;
    border-radius: $progress-border-radius;
  }

  .ui.progress:first-child {
    margin: $progress-first-margin;
  }
  .ui.progress:last-child {
    margin: $progress-last-margin;
  }

  /*******************************
              Content
  *******************************/

  /* Activity Bar */
  .ui.progress .bar {
    display: block;
    line-height: 1;
    position: $progress-bar-position;
    width: $progress-bar-initial-width;
    min-width: $progress-bar-min-width;
    background: $progress-bar-background;
    border-radius: $progress-bar-border-radius;
    transition: $progress-bar-transition;
    overflow: hidden;
  }
  .ui.ui.ui.progress:not([data-percent]):not(.indeterminate) .bar,
  .ui.ui.ui.progress[data-percent="0"]:not(.indeterminate) .bar {
    background:transparent;
  }
  .ui.progress[data-percent="0"] .bar .progress {
    color: $text-color;
  }
  @if($use-progress-variation-inverted) {
    .ui.inverted.progress[data-percent="0"] .bar .progress {
      color: $inverted-text-color;
    }
  }

  /* Percent Complete */
  .ui.progress .bar > .progress {
    white-space: nowrap;
    position: $progress-position;
    width: $progress-width;
    font-size: $progress-size;
    top: $progress-top;
    right: $progress-right;
    left: $progress-left;
    bottom: $progress-bottom;
    color: $progress-color;
    text-shadow: $progress-text-shadow;
    margin-top: $progress-offset;
    font-weight: $progress-font-weight;
    text-align: $progress-text-align;
  }

  /* Label */
  .ui.progress > .label {
    position: absolute;
    width: $progress-label-width;
    font-size: $progress-label-size;
    top: $progress-label-top;
    right: $progress-label-right;
    left: $progress-label-left;
    bottom: $progress-label-bottom;
    color: $progress-label-color;
    font-weight: $progress-label-font-weight;
    text-shadow: $progress-label-text-shadow;
    margin-top: $progress-label-offset;
    text-align: $progress-label-text-align;
    transition: $progress-label-transition;
  }


  /*******************************
              Types
  *******************************/


  /* Indicating */
  .ui.indicating.progress[data-percent^="1"] .bar,
  .ui.indicating.progress[data-percent^="2"] .bar {
    background-color: $progress-indicating-first-color;
  }
  .ui.indicating.progress[data-percent^="3"] .bar {
    background-color: $progress-indicating-second-color;
  }
  .ui.indicating.progress[data-percent^="4"] .bar,
  .ui.indicating.progress[data-percent^="5"] .bar {
    background-color: $progress-indicating-third-color;
  }
  .ui.indicating.progress[data-percent^="6"] .bar {
    background-color: $progress-indicating-fourth-color;
  }
  .ui.indicating.progress[data-percent^="7"] .bar,
  .ui.indicating.progress[data-percent^="8"] .bar {
    background-color: $progress-indicating-fifth-color;
  }
  .ui.indicating.progress[data-percent^="9"] .bar,
  .ui.indicating.progress[data-percent^="100"] .bar {
    background-color: $progress-indicating-sixth-color;
  }

  /* Indicating Label */
  .ui.indicating.progress[data-percent^="1"] .label,
  .ui.indicating.progress[data-percent^="2"] .label {
    color: $progress-indicating-first-label-color;
  }
  .ui.indicating.progress[data-percent^="3"] .label {
    color: $progress-indicating-second-label-color;
  }
  .ui.indicating.progress[data-percent^="4"] .label,
  .ui.indicating.progress[data-percent^="5"] .label {
    color: $progress-indicating-third-label-color;
  }
  .ui.indicating.progress[data-percent^="6"] .label {
    color: $progress-indicating-fourth-label-color;
  }
  .ui.indicating.progress[data-percent^="7"] .label,
  .ui.indicating.progress[data-percent^="8"] .label {
    color: $progress-indicating-fifth-label-color;
  }
  .ui.indicating.progress[data-percent^="9"] .label,
  .ui.indicating.progress[data-percent^="100"] .label {
    color: $progress-indicating-sixth-label-color;
  }

  @if($use-progress-variation-inverted) {
    /* Inverted Indicating Label */
    .ui.inverted.indicating.progress[data-percent^="1"] .label,
    .ui.inverted.indicating.progress[data-percent^="2"] .label {
      color: $progress-inverted-indicating-first-label-color;
    }
    .ui.inverted.indicating.progress[data-percent^="3"] .label {
      color: $progress-inverted-indicating-second-label-color;
    }
    .ui.inverted.indicating.progress[data-percent^="4"] .label,
    .ui.inverted.indicating.progress[data-percent^="5"] .label {
      color: $progress-inverted-indicating-third-label-color;
    }
    .ui.inverted.indicating.progress[data-percent^="6"] .label {
      color: $progress-inverted-indicating-fourth-label-color;
    }
    .ui.inverted.indicating.progress[data-percent^="7"] .label,
    .ui.inverted.indicating.progress[data-percent^="8"] .label {
      color: $progress-inverted-indicating-fifth-label-color;
    }
    .ui.inverted.indicating.progress[data-percent^="9"] .label,
    .ui.inverted.indicating.progress[data-percent^="100"] .label {
      color: $progress-inverted-indicating-sixth-label-color;
    }
  }

  /* Single Digits */
  .ui.indicating.progress[data-percent="1"] .bar,
  .ui.indicating.progress[data-percent="2"] .bar,
  .ui.indicating.progress[data-percent="3"] .bar,
  .ui.indicating.progress[data-percent="4"] .bar,
  .ui.indicating.progress[data-percent="5"] .bar,
  .ui.indicating.progress[data-percent="6"] .bar,
  .ui.indicating.progress[data-percent="7"] .bar,
  .ui.indicating.progress[data-percent="8"] .bar,
  .ui.indicating.progress[data-percent="9"] .bar {
    background-color: $progress-indicating-first-color;
  }
  .ui.indicating.progress[data-percent="0"] .label,
  .ui.indicating.progress[data-percent="1"] .label,
  .ui.indicating.progress[data-percent="2"] .label,
  .ui.indicating.progress[data-percent="3"] .label,
  .ui.indicating.progress[data-percent="4"] .label,
  .ui.indicating.progress[data-percent="5"] .label,
  .ui.indicating.progress[data-percent="6"] .label,
  .ui.indicating.progress[data-percent="7"] .label,
  .ui.indicating.progress[data-percent="8"] .label,
  .ui.indicating.progress[data-percent="9"] .label {
    color: $progress-indicating-first-label-color;
  }

  @if($use-progress-variation-inverted) {
    .ui.inverted.indicating.progress[data-percent="0"] .label,
    .ui.inverted.indicating.progress[data-percent="1"] .label,
    .ui.inverted.indicating.progress[data-percent="2"] .label,
    .ui.inverted.indicating.progress[data-percent="3"] .label,
    .ui.inverted.indicating.progress[data-percent="4"] .label,
    .ui.inverted.indicating.progress[data-percent="5"] .label,
    .ui.inverted.indicating.progress[data-percent="6"] .label,
    .ui.inverted.indicating.progress[data-percent="7"] .label,
    .ui.inverted.indicating.progress[data-percent="8"] .label,
    .ui.inverted.indicating.progress[data-percent="9"] .label {
      color: $progress-inverted-indicating-first-label-color;
    }
  }

  /* Indicating Success */
  .ui.ui.indicating.progress.success .label {
    color: $success-header-color;
  }

  /* Multiple */
  .ui.multiple.progress {
    display: flex;
  }

  /*******************************
              States
  *******************************/


  /*--------------
      Success
  ---------------*/

  .ui.ui.progress.success .bar {
    background-color: $success-color;
  }
  .ui.ui.progress.success .bar,
  .ui.ui.progress.success .bar::after {
    animation: none;
  }
  .ui.progress.success > .label {
    color: $success-header-color;
  }

  /*--------------
      Warning
  ---------------*/

  .ui.ui.progress.warning .bar {
    background-color: $warning-color;
  }
  .ui.ui.progress.warning .bar,
  .ui.ui.progress.warning .bar::after {
    animation: none;
  }
  .ui.progress.warning > .label {
    color: $warning-header-color;
  }

  /*--------------
      Error
  ---------------*/

  .ui.ui.progress.error .bar {
    background-color: $error-color;
  }
  .ui.ui.progress.error .bar,
  .ui.ui.progress.error .bar::after {
    animation: none;
  }
  .ui.progress.error > .label {
    color: $error-header-color;
  }

  /*--------------
      Active
  ---------------*/

  .ui.active.progress .bar {
    position: relative;
    min-width: $progress-active-min-width;
  }
  .ui.active.progress .bar::after {
    content: '';
    opacity: 0;

    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: $progress-active-pulse-color;

    border-radius: $progress-bar-border-radius;

    animation: progress-active $progress-active-pulse-duration $default-easing infinite;
    transform-origin: left;
  }
  @keyframes progress-active {
    0% {
      opacity: $progress-active-pulse-max-opacity;
      transform: scale(0, 1);
    }
    100% {
      opacity: 0;
      transform: scale(1);
    }
  }

  /*--------------
      Disabled
  ---------------*/

  .ui.disabled.progress {
    opacity: 0.35;
  }
  .ui.ui.disabled.progress .bar,
  .ui.ui.disabled.progress .bar::after {
    animation: none;
  }


  /*******************************
            Variations
  *******************************/

  @if($use-progress-variation-inverted) {
    /*--------------
        Inverted
    ---------------*/

    .ui.inverted.progress {
      background: $progress-inverted-background;
      border: $progress-inverted-border;
    }
    .ui.inverted.progress .bar {
      background: $progress-inverted-bar-background;
    }
    .ui.inverted.progress .bar > .progress {
      color: $progress-inverted-color;
    }
    .ui.inverted.progress > .label {
      color: $progress-inverted-label-color;
    }
    .ui.inverted.progress.success > .label {
      color: $success-color;
    }
    .ui.inverted.progress.warning > .label {
      color: $warning-color;
    }
    .ui.inverted.progress.error > .label {
      color: $error-color;
    }
  }

  @if($use-progress-variation-attached) {
    /*--------------
        Attached
    ---------------*/

    /* bottom attached */
    .ui.progress.attached {
      background: $progress-attached-background;
      position: relative;
      border: none;
      margin: 0;
    }
    .ui.progress.attached,
    .ui.progress.attached .bar {
      display: block;
      height: $progress-attached-height;
      padding: 0;
      overflow: hidden;
      border-radius: 0 0 $progress-attached-border-radius $progress-attached-border-radius;
    }
    .ui.progress.attached .bar {
      border-radius: 0;
    }

    /* top attached */
    .ui.progress.top.attached,
    .ui.progress.top.attached .bar {
      top: 0;
      border-radius: $progress-attached-border-radius $progress-attached-border-radius 0 0;
    }
    .ui.progress.top.attached .bar {
      border-radius: 0;
    }

    /* Coupling */
    .ui.segment > .ui.attached.progress,
    .ui.card > .ui.attached.progress {
      position: absolute;
      top: auto;
      left: 0;
      bottom: 100%;
      width: 100%;
    }
    .ui.segment > .ui.bottom.attached.progress,
    .ui.card > .ui.bottom.attached.progress {
      top: 100%;
      bottom: auto;
    }
  }

  /*--------------
      Colors
  ---------------*/

  @each $key, $value in $colors {
    @if(index(join($main-colors-names, $use-progress-variation-colors), $key+'')) {
      $color: $key;
      $c: map-get($value, color);
      $l: map-get($value, light);

      .ui.indeterminate.#{$key + ""}.progress .bar::before,
      .ui.#{$key + ""}.progress .bar,
      .ui.progress .#{$key + ""}.bar {
        background-color: $c;
      }
      @if($use-progress-variation-inverted) {
        .ui.inverted.indeterminate.#{$key + ""}.progress .bar::before,
        .ui.#{$key + ""}.inverted.progress .bar,
        .ui.inverted.progress .#{$key + ""}.bar {
          background-color: $l;
        }
      }
    }
  }

  /*--------------
      Sizes
  ---------------*/

  .ui.tiny.progress {
    font-size: $tiny;
  }
  .ui.tiny.progress .bar {
    height: $progress-tiny-bar-height;
  }

  .ui.small.progress {
    font-size: $small;
  }
  .ui.small.progress .bar {
    height: $progress-small-bar-height;
  }

  .ui.progress {
    font-size: $medium;
  }
  .ui.progress .bar {
    height: $progress-bar-height;
  }

  .ui.large.progress {
    font-size: $large;
  }
  .ui.large.progress .bar {
    height: $progress-large-bar-height;
  }

  .ui.big.progress {
    font-size: $big;
  }
  .ui.big.progress .bar {
    height: $progress-big-bar-height;
  }

  /*---------------
    Indeterminate
  ----------------*/

  .ui.indeterminate.progress .bar {
    width: 100%;
  }
  .ui.indeterminate.progress .bar .progress,
  .ui.progress .bar .centered.progress {
    text-align: center;
    position: relative;
  }
  .ui.indeterminate.progress .bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: $progress-bar-border-radius;
    animation: progress-pulsating $progress-indeterminate-pulse-duration $default-easing infinite;
    transform-origin: center;
    width: 100%;
  }
  .ui.slow.indeterminate.progress .bar::before {
    animation-duration: $progress-indeterminate-pulse-duration-slow;
  }
  .ui.fast.indeterminate.progress .bar::before {
    animation-duration: $progress-indeterminate-pulse-duration-fast;
  }
  .ui.swinging.indeterminate.progress .bar::before {
    transform-origin: left;
    animation-name: progress-swinging;
  }
  .ui.sliding.indeterminate.progress .bar::before {
    transform-origin: left;
    animation-name: progress-sliding;
  }
  .ui.filling.indeterminate.progress .bar::before {
    animation-name: progress-filling;
  }
  .ui.indeterminate.progress:not(.sliding):not(.filling):not(.swinging) .bar::before {
    background: $progress-indeterminate-pulse-color;
  }
  .ui.sliding.indeterminate.progress .bar,
  .ui.swinging.indeterminate.progress .bar,
  .ui.filling.indeterminate.progress .bar {
    background: $progress-background;
  }
  @if($use-progress-variation-inverted) {
    .ui.inverted.sliding.indeterminate.progress .bar,
    .ui.inverted.swinging.indeterminate.progress .bar,
    .ui.inverted.filling.indeterminate.progress .bar {
      background: $progress-inverted-background;
    }
    .ui.sliding.indeterminate.progress .bar .progress,
    .ui.swinging.indeterminate.progress .bar .progress {
      color: $progress-inverted-color;
    }
    .ui.inverted.sliding.indeterminate.progress .bar .progress,
    .ui.inverted.swinging.indeterminate.progress .bar .progress {
      color: $progress-color;
    }
  }

  @keyframes progress-swinging {
    0%, 100% {
      width:10%;
      left:-25%;
    }
    25%, 65% {
      width:70%;
    }
    50% {
      width: 10%;
      left:100%;
    }
  }

  @keyframes progress-sliding {
    0% {
      width:10%;
      left:-25%;
    }
    50% {
      width:70%;
    }
    100% {
      width:10%;
      left:100%;
    }
  }

  @keyframes progress-filling {
    0% {
      transform: scale(0,1);
    }
    80% {
      transform: scale(1);
      opacity:1;
    }
    100% {
      opacity:0;
    }
  }

  @keyframes progress-pulsating {
    0% {
      transform: scale(0,1);
      opacity:0.7;
    }
    100% {
      transform: scale(1);
      opacity:0;
    }
  }
}

@import '../../themes/default/modules/progress.style';