@use 'sass:math';
@import '../style/base.scss';
// #variables
$sar-steps-step-font-size: $sar-text-base !default;
$sar-steps-step-active-opacity: $sar-active-opacity !default;

$sar-steps-icon-finish-color: $sar-primary !default;
$sar-steps-icon-process-color: $sar-primary !default;
$sar-steps-icon-wait-color: $sar-tertiary-color !default;
$sar-steps-icon-error-color: $sar-danger !default;

$sar-steps-text-finish-color: $sar-body-color !default;
$sar-steps-text-process-color: $sar-primary !default;
$sar-steps-text-wait-color: $sar-tertiary-color !default;
$sar-steps-text-error-color: $sar-danger !default;

$sar-steps-header-gap-y: 4px !default;
$sar-steps-header-gap-x: 12px !default;
$sar-steps-header-vertical-top: 4px !default;

$sar-steps-line-thickness: 1px !default;
$sar-steps-line-gap: 3px !default;
$sar-steps-line-color: $sar-border-color !default;
$sar-steps-line-active-color: $sar-primary !default;

$sar-steps-icon-font-size: $sar-text-base !default;

$sar-steps-body-padding-x: 8px !default;
$sar-steps-body-padding-y: 4px !default;

// 暗黑模式
$sar-steps-icon-wait-dark-color: $sar-dark-tertiary-color !default;
$sar-steps-text-finish-dark-color: $sar-dark-body-color !default;
$sar-steps-text-wait-dark-color: $sar-dark-tertiary-color !default;
$sar-steps-line-dark-color: $sar-dark-border-color !default;
$sar-steps-line-active-dark-color: $sar-primary !default;
// #endvariables

@include bem(steps) {
  @include b() {
    @include universal;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
  }

  @include m(vertical) {
    flex-direction: column;
    align-items: stretch;
  }

  @include e(step) {
    @include universal;
    flex: 1;
    font-size: $sar-steps-step-font-size;

    @include m(last) {
      flex: none;
      @include if-web {
        white-space: nowrap;
      }
    }

    @include m(center) {
      justify-content: center;
    }

    @include m(center-last) {
      flex: 1;
      @include if-web {
        white-space: unset;
      }
    }

    @include m(vertical) {
      flex-direction: row;
    }

    @include m(vertical-center) {
      justify-content: center;
      align-items: center;
    }

    @include m(vertical-center-last) {
      flex: 1;
      @include if-web {
        white-space: unset;
      }
    }

    @include m(clickable) {
      @include if-web {
        cursor: pointer;
      }
    }

    @include m(disabled) {
      @include disabled;
    }
  }

  @include e(header) {
    @include universal;
    flex-direction: row;
    align-items: center;
    padding-top: $sar-steps-header-gap-y;
    padding-bottom: $sar-steps-header-gap-y;

    @include m(vertical) {
      top: $sar-steps-header-vertical-top + $sar-steps-body-padding-y;
      flex: none;
      flex-direction: column;
      padding-top: 0;
      padding-bottom: 0;
      padding-left: $sar-steps-header-gap-x;
      padding-right: $sar-steps-header-gap-x;
    }

    @include m(vertical-center) {
      top: 0;
      align-self: stretch;
    }
  }

  @include e(line) {
    @include universal;
    height: $sar-steps-line-thickness;
    width: 0;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    margin-left: $sar-steps-line-gap;
    margin-right: $sar-steps-line-gap;
    background-color: $sar-steps-line-color;

    @include m(behind) {
      background-color: $sar-steps-line-active-color;
    }

    @include m(last) {
      display: none;
    }

    @include m(center-last) {
      display: flex;
    }

    @include m(vertical) {
      width: $sar-steps-line-thickness;
      height: 0;
      margin-left: 0;
      margin-right: 0;
      margin-top: $sar-steps-line-gap;
      margin-bottom: $sar-steps-line-gap;
    }

    @include m(vertical-last) {
      @include if-web {
        white-space: unset;
      }
    }

    @include m(vertical-center-last) {
      display: flex;
    }
  }

  @include e(line-before) {
    display: none;

    @include m(self) {
      background-color: $sar-steps-line-active-color;
    }

    @include m(first) {
      opacity: 0;
    }

    @include m(center) {
      display: flex;
      margin-left: 0;
    }

    @include m(vertical-center) {
      margin-top: 0;
    }
  }

  @include e(line-after) {
    @include m(last) {
      opacity: 0;
    }

    @include m(center) {
      margin-right: 0;
    }

    @include m(vertical-center) {
      margin-bottom: 0;
    }
  }

  @include e(icon) {
    @include universal;
    font-size: $sar-steps-icon-font-size;

    @include m(finish) {
      color: $sar-steps-icon-finish-color;
    }

    @include m(process) {
      color: $sar-steps-icon-process-color;
    }

    @include m(wait) {
      color: $sar-steps-icon-wait-color;
    }

    @include m(error) {
      color: $sar-steps-icon-error-color;
    }

    @include m(pressed) {
      opacity: $sar-steps-step-active-opacity;
    }
  }

  @include e(body) {
    @include universal;

    @include m(vertical) {
      flex: 1;
      padding-top: $sar-steps-body-padding-y;
      padding-bottom: $sar-steps-body-padding-y;
    }

    @include m(center) {
      align-items: center;
    }

    @include m(vertical-center) {
      justify-content: center;
      align-items: flex-start;
    }

    @include m(finish) {
      color: $sar-steps-text-finish-color;
    }

    @include m(process) {
      color: $sar-steps-text-process-color;
    }

    @include m(wait) {
      color: $sar-steps-text-wait-color;
    }

    @include m(error) {
      color: $sar-steps-text-error-color;
    }

    @include m(pressed) {
      opacity: $sar-steps-step-active-opacity;
    }
  }
}

@include theme(dark) {
  @include bem(steps) {
    @include e(line) {
      background-color: $sar-steps-line-dark-color;

      @include m(behind) {
        background-color: $sar-steps-line-active-dark-color;
      }
    }

    @include e(line-before) {
      @include m(self) {
        background-color: $sar-steps-line-active-dark-color;
      }
    }

    @include e(icon) {
      @include m(wait) {
        color: $sar-steps-icon-wait-dark-color;
      }
    }

    @include e(body) {
      @include m(finish) {
        color: $sar-steps-text-finish-dark-color;
      }

      @include m(wait) {
        color: $sar-steps-text-wait-dark-color;
      }
    }
  }
}