.refund-operation-bar-wrap {
  background-color: var(--color-white, #fff);
  position: relative;

  &.normal {
    .bar-content {
      height: auto;
      padding-bottom: 0;
    }

    .more-wrap {
      padding-bottom: 0;
    }

    .more-list {
      bottom: calc(82rpx + env(safe-area-inset-bottom));
    }
  }

  &.bar-extra-wrap {
    padding-left: 80rpx;
  }

  .bar-content {
    width: 100%;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: center;
    overflow-x: auto;
    overflow-y: visible;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .button-item {
    margin-right: 24rpx;
    &:first-child {
      margin-right: 0;
    }
  }

  .more-wrap {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    outline: none;
    padding-left: 24rpx;
    padding-bottom: env(safe-area-inset-bottom);
    justify-content: center;
  }

  .more-button {
    display: inline-block;
    padding-bottom: 20rpx;
    color: #bfbebe;
    font-size: var(--p-headline-font-size, 42rpx);
    letter-spacing: 2rpx;
    justify-content: center;
  }

  .more-list {
    width: 180rpx;
    padding: 0 10rpx;
    position: absolute;
    left: 14rpx;
    bottom: 82rpx;
    bottom: calc(82rpx + env(safe-area-inset-bottom));
    font-size: var(--p-body-1-font-size, 28rpx);
    text-align: center;
    background-color: var(--color-white, #fff);
    color: var(--color-text1-3, #666);
    z-index: 1;
    border-radius: 6rpx;
    box-shadow: 0px 0px 4px #888;
  }

  .more-item {
    width: 100%;
    height: 70rpx;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.08);

    &.no-border {
      border: none;
    }
  }

  .more-arrow {
    width: 0;
    height: 0;
    position: absolute;
    left: 18rpx;
    bottom: -26rpx;
    border: 11rpx solid transparent;
    border-top: 16rpx var(--color-text1-1, #ccc) solid;
    border-bottom-width: 10rpx;
  }

  .more-arrow-inner {
    width: 0;
    height: 0;
    position: absolute;
    left: 20rpx;
    bottom: -20rpx;
    z-index: 99;
    border: 9rpx solid transparent;
    border-top: 14rpx var(--color-text2-4, #fff) solid;
  }
}

.refund-operation-placeholder {
  height: 130rpx;
  height: calc(130rpx + env(safe-area-inset-bottom));
  margin-top: 25rpx;
}