@import '../../../style/mixin.less';

.@{prefix}-swipe-action {
    position: relative;
    transition: transform 0s;
    .use-var(font-size,swipe-action-text-font-size);

    &, &-menu {
        &.action-open {
            .use-var(transition-timing-function, swipe-action-open-transition);
        }
        &.action-close {
            .use-var(transition-timing-function, swipe-action-close-transition);
        }
    }

    &-content {
        width: 100%;
    }

    &-menu {
        display: flex;
        position: absolute;
        height: 100%;
        overflow: visible;
        flex-wrap: nowrap;
        top: 0;
        transition: width 0s;

        &-left {
            right: 100%;
        }

        &-right {
            left: 100%;
        }
        &-action {
            &-left {
                &::after {
                    right: 100%;
                    margin-right: -1PX;
                }
            }
            &-right {
                &::after {
                    left: 100%;
                    margin-left: -1PX;
                }
            }
            &-info {
                height: 100%;
                .use-var(padding, swipe-action-info-padding);
                display: flex;
                justify-content: center;
                align-items: center;

                &-container {
                    position: relative;
                    &.open-style-layer {
                        position: absolute;
                        height: 100%;
                    }
                    &::after {
                        content: " ";
                        position: absolute;
                        top: 0;
                        height: 100%;
                        .use-var(width, swipe-action-info-bounce-buffer);
                        background: inherit;
                    }
                }

                &-text {
                    white-space: nowrap;
                    .use-var(font-size,swipe-action-text-font-size);
                    .use-var(line-height,swipe-action-text-line-height);
                    .use-var(color, swipe-action-text-color);
                }

                &-icon {
                    .use-var(margin-right,swipe-action-icon-margin-right);
                    .use-var(height, swipe-action-icon-height);
                    .use-var(width, swipe-action-icon-width);
                    .use-var(color, swipe-action-text-color);
                }
            }
        }
    }
}

/***************************************************
 *                                                 *
 *               Arco Theme Style                  *
 *                                                 *
 ***************************************************/
& when (@use-dark-mode = 1) {
    
  .process-bg-color-with-config,
  .process-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(color, dark-steps-process-with-config-item-icon-color);
      .use-var(color, dark-steps-process-with-config-item-icon-color);
    }
  }
  .wait-custom-icon-bg-color-with-config {
    @{arco-dark-mode-selector} & {
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
      .use-var(background, dark-steps-wait-icon-num-background);
      .use-var(color, dark-sub-info-font-color);
    }
  }
  .@{prefix}-swipe-action {
    &-menu {
      &-action {
        &-info {
          &-text {
            @{arco-dark-mode-selector} & {
              .use-var(color, dark-swipe-action-text-color);
            }
          }
          &-icon {
            @{arco-dark-mode-selector} & {
              .use-var(color, dark-swipe-action-text-color);
            }
          }
        }
      }
    }
  }
}
/********************* End *************************/