@import './var.less';

:root {
  --van-bottom-action-bar-background-color: @bottom-action-bar-background-color;
  --van-bottom-action-bar-z-index: @bottom-action-bar-z-index;
  --van-bottom-action-bar-padding: @bottom-action-bar-padding;
  --van-bottom-action-bar-gap: @bottom-action-bar-gap;
  --van-bottom-action-bar-button-height: @bottom-action-bar-button-height;
  --van-bottom-action-bar-button-radius: @bottom-action-bar-button-radius;
  --van-bottom-action-bar-secondary-width: @bottom-action-bar-secondary-width;
  --van-bottom-action-bar-icon-button-width: @bottom-action-bar-icon-button-width;
  --van-bottom-action-bar-more-width: @bottom-action-bar-more-width;
  --van-bottom-action-bar-more-icon-size: @bottom-action-bar-more-icon-size;
  --van-bottom-action-bar-more-text-color: @bottom-action-bar-more-text-color;
  --van-bottom-action-bar-more-text-font-size: @bottom-action-bar-more-text-font-size;
  --van-bottom-action-bar-more-text-line-height: @bottom-action-bar-more-text-line-height;
  --van-bottom-action-bar-more-popover-width: @bottom-action-bar-more-popover-width;
  --van-bottom-action-bar-more-popover-action-height: @bottom-action-bar-more-popover-action-height;
  --van-bottom-action-bar-more-popover-icon-size: @bottom-action-bar-more-popover-icon-size;
  --van-bottom-action-bar-more-popover-text-font-size: @bottom-action-bar-more-popover-text-font-size;
  --van-bottom-action-bar-shadow: @bottom-action-bar-shadow;
}

.van-bottom-action-bar {
  z-index: var(--van-bottom-action-bar-z-index);
  box-sizing: border-box;
  width: 100%;
  background: var(--van-bottom-action-bar-background-color);
  box-shadow: var(--van-bottom-action-bar-shadow);

  &--fixed {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &__actions {
    display: flex;
    box-sizing: border-box;
    align-items: center;
    gap: var(--van-bottom-action-bar-gap);
    width: 100%;
    padding: var(--van-bottom-action-bar-padding);
  }

  &__checkbox-action {
    padding: 12px 12px 0;
  }

  &__checkbox-action-content {
    display: flex;
    align-items: center;
    padding: var(--van-padding-xs) var(--van-padding-sm);
    background: linear-gradient(
      90deg,
      var(--van-gray-2),
      rgb(241 244 246 / 20%)
    );
    border-radius: var(--van-border-radius-lg);

    .van-checkbox {
      margin: 0;
    }
  }

  .van-button {
    height: var(--van-bottom-action-bar-button-height);
    border-radius: var(--van-bottom-action-bar-button-radius);
  }

  &__confirm {
    flex: 1;
    min-width: 58px;
  }

  &__secondary {
    flex: 0 0 var(--van-bottom-action-bar-secondary-width);
    width: var(--van-bottom-action-bar-secondary-width);
  }

  &__icon-button {
    flex: 0 0 var(--van-bottom-action-bar-icon-button-width);
    width: var(--van-bottom-action-bar-icon-button-width);
    padding: 0;

    .van-button__icon {
      font-size: var(--van-font-size-lg);
    }
  }

  &__icon-action {
    flex: 0 0 auto;
  }

  &__more-action {
    position: relative;
    display: flex;
    flex: 0 0 var(--van-bottom-action-bar-more-width);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--van-padding-base);
    width: var(--van-bottom-action-bar-more-width);
    min-height: var(--van-bottom-action-bar-button-height);
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;

    &:not(:disabled) {
      cursor: pointer;

      &:active {
        opacity: var(--van-active-opacity);
      }
    }

    &:disabled {
      opacity: var(--van-disabled-opacity);
    }
  }

  &__more-icon {
    font-size: var(--van-bottom-action-bar-more-icon-size);
  }

  &__more-text {
    color: var(--van-bottom-action-bar-more-text-color);
    font-size: var(--van-bottom-action-bar-more-text-font-size);
    line-height: var(--van-bottom-action-bar-more-text-line-height);
    white-space: nowrap;
  }

  &__more-popover {
    .van-popover__content {
      padding: var(--van-padding-xs) 0;
      border-radius: var(--van-border-radius-lg);
      box-shadow: 0 2px 10px rgb(27 33 41 / 10%);
    }
  }

  &__more-popover-action {
    position: relative;
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    width: var(--van-bottom-action-bar-more-popover-width);
    height: var(--van-bottom-action-bar-more-popover-action-height);
    padding: var(--van-padding-xs) 0;
    color: var(--van-text-color);
    background: var(--van-background-color-light);
    border: 0;

    &:not(:last-child) {
      &::after {
        position: absolute;
        right: var(--van-padding-md);
        bottom: 0;
        left: var(--van-padding-md);
        height: 1px;
        background: #e1e5eb;
        transform: scaleY(0.5);
        content: '';
      }
    }

    &:not(:disabled) {
      cursor: pointer;

      &:active {
        background: var(--van-active-color);
      }
    }

    &:disabled {
      opacity: var(--van-disabled-opacity);
    }
  }

  &__more-popover-icon {
    font-size: var(--van-bottom-action-bar-more-popover-icon-size);
  }

  &__more-popover-text {
    color: #626c78;
    font-size: var(--van-bottom-action-bar-more-popover-text-font-size);
    line-height: 16px;
    white-space: nowrap;
  }
}