@import './theme/default';
@import './theme/timing-functions';
@import './mixins/clearfix';

.zent-loading--block {
  position: relative;

  .zent-loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    > .zent-loading-icon-and-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &.zent-loading--has-children {
    .zent-loading-mask {
      @include theme-color(background-color, stroke, 9, 0.5);
    }
  }
}

.zent-loading--inline {
  display: inline-block;
}

.zent-loading--fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1100;

  .zent-loading-mask {
    background: rgba($color-black, 0.5);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  &.zent-loading--show-background .zent-loading-icon-and-text {
    @include theme-color(background-color, stroke, 9);
    padding: 32px;
    border-radius: 4px;
  }
}

.zent-loading-icon-youzan {
  display: inline-block;
  position: relative;

  &:before,
  &:after {
    display: block;
    box-sizing: border-box;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  &:before {
    z-index: 2;
    border-width: 2px;
    border-style: solid;
    animation: zent-ani-spin 0.6s $timing-fn-linear infinite;
  }

  &:after {
    @include theme-shadow(layer);
    z-index: 1;
  }

  &-svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
  }
}

.zent-loading-icon-circle {
  display: inline-block;
  animation: zent-ani-spin 0.6s $timing-fn-linear infinite;
}

.zent-loading-icon-and-text {
  @include theme-color(color, stroke, 1);

  display: flex;
  align-items: center;
  justify-content: center;

  &--bottom {
    flex-direction: column;

    .zent-loading-icon-text {
      margin-top: 4px;
    }
  }

  &--top {
    flex-direction: column;

    .zent-loading-icon-text {
      margin-bottom: 4px;
      order: 1;
    }

    .zent-loading-icon {
      order: 2;
    }
  }

  &--right {
    .zent-loading-icon-text {
      margin-left: 6px;
    }
  }

  &--left {
    .zent-loading-icon {
      order: 2;
    }

    .zent-loading-icon-text {
      order: 1;
      margin-right: 6px;
    }
  }
}

.zent-loading-color-preset--primary {
  .zent-loading-icon-circle {
    + .zent-loading-icon-text {
      @include theme-color(color, primary, 4);
    }
  }

  .zent-loading-icon-youzan {
    &:before {
      border-color: transparent;
      border-right-color: $loading-icon-youzan-color;
    }

    &:after {
      @include theme-color(background-color, stroke, 9);
    }

    &-svg {
      fill: $loading-icon-youzan-color;
    }
  }
}

.zent-loading-color-preset--grey {
  .zent-loading-icon-text {
    @include theme-color(color, stroke, 3);
  }

  .zent-loading-icon-youzan {
    &:before {
      border-color: transparent;

      @include theme-color(border-right-color, stroke, 4);
    }

    &:after {
      @include theme-color(background-color, stroke, 9);
    }

    &-svg {
      @include theme-color(fill, stroke, 4);
    }
  }
}