@import '../../src/scss/vars';
@import '../../src/scss/mixins';
@import '../../src/scss/animate';

.ymu-flow-item {
  position: relative;
  font-size: 12px;
  line-height: 18px;
  color: #969799;
}

.ymu-flow-item__icon {
  position: relative;
  width: 1em;
  height: 1em;
  font-size: 16px;
  line-height: 16px;
  img {
    width: 100%;
    height: 100%;
  }
}

.ymu-flow-item--horizontal {
  flex: 1;
  text-align: center;

  .ymu-flow-item-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
  }

  .ymu-flow-item__line {
    position: absolute;
    top: 27px;
    left: 50%;
    top: 50%;
    right: -50%;
    height: 1px;
    margin-left: 7px;
    margin-right: 7px;
    transform: translateY(-50%);
    background: $border-color;
  }

  .ymu-flow-item__icon {
    z-index: 2;
    position: absolute;
  }

  &:last-child {
    .ymu-flow-item__line {
      display: none;
    }
  }
}

.ymu-flow-item--vertical {
  display: flex;

  .ymu-flow-item-head {
    position: relative;
    display: flex;
    justify-content: center;
    width: 40px;
  }

  .ymu-flow-item-main {
    flex: 1;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid $border-color;
  }

  .ymu-flow-item__line {
    z-index: 2;
    position: absolute;
    width: 1px;
    left: 50%;
    top: 18px;
    bottom: 2px;
    transform: translateX(-50%);
    background: $border-color;
  }

  .ymu-flow-item__icon {
    z-index: 3;
    position: absolute;
  }

  &:last-child {
    .ymu-flow-item__line {
      display: none;
    }
  }
}

.ymu-flow-item--process {
  .ymu-flow-item__icon {
    width: 14px;
    height: 14px;
    color: $color-primary;
    border-radius: 50%;
    background-color: $color-primary;
    .ymuicon {
      display: none;
    }
  }
}

.ymu-flow-item--finish {
  .ymu-flow-item__icon {
    font-size: 18px;
    color: $color-primary;
  }
  .ymu-flow-item__line {
    background-color: $color-primary;
  }
}