@import '~antd/es/spin/style/index.less';
@import '../variable.less';

@spin-prefix-cls: ~'@{ant-prefix}-spin';
@spin-hexagon-size: 48px;
@spin-hexagon-size-lg: 64px;
@spin-hexagon-size-sm: 32px;
@spin-hexagon-size-xs: 20px;

.@{spin-prefix-cls} {
  // hexagon
  // ------------------------------
  &-hexagon {
    position: relative;
    display: inline-block;
    font-size: @spin-hexagon-size;
    width: 1em;
    height: 1em;
  }

  // xsmall
  &-xs &-hexagon {
    font-size: @spin-hexagon-size-xs;
  }

  // small
  &-sm &-hexagon {
    font-size: @spin-hexagon-size-sm;
  }

  // large
  &-lg &-hexagon {
    font-size: @spin-hexagon-size-lg;
  }

  // nested hexagon
  // ------------------------------
  &-nested-loading {
    > div > .@{spin-prefix-cls} {
      .@{spin-prefix-cls}-hexagon {
        margin: -(@spin-hexagon-size / 2);
      }

      .@{spin-prefix-cls}-text {
        padding-top: ((@spin-hexagon-size - @font-size-base) / 2) + 2px;
      }

      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-hexagon {
        margin-top: -(@spin-hexagon-size / 2) - 10px;
      }
    }

    // xsmall
    > div > .@{spin-prefix-cls}-xs {
      .@{spin-prefix-cls}-hexagon {
        margin: -(@spin-hexagon-size-xs / 2);
      }
      .@{spin-prefix-cls}-text {
        padding-top: ((@spin-hexagon-size-xs - @font-size-base) / 2) + 2px;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-hexagon {
        margin-top: -(@spin-hexagon-size-xs / 2) - 10px;
      }
    }

    // small
    > div > .@{spin-prefix-cls}-sm {
      .@{spin-prefix-cls}-hexagon {
        margin: -(@spin-hexagon-size-sm / 2);
      }
      .@{spin-prefix-cls}-text {
        padding-top: ((@spin-hexagon-size-sm - @font-size-base) / 2) + 2px;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-hexagon {
        margin-top: -(@spin-hexagon-size-sm / 2) - 10px;
      }
    }

    // large
    > div > .@{spin-prefix-cls}-lg {
      .@{spin-prefix-cls}-hexagon {
        margin: -(@spin-hexagon-size-lg / 2);
      }
      .@{spin-prefix-cls}-text {
        padding-top: ((@spin-hexagon-size-lg - @font-size-base) / 2) + 2px;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-hexagon {
        margin-top: -(@spin-hexagon-size-lg / 2) - 10px;
      }
    }
  }
}