@import './var.less';

:root {
  --van-background-min-height: @background-min-height;
  --van-background-color: @background-color;
  --van-background-size: @background-size;
  --van-background-position: @background-position;
}

.van-background {
  min-height: var(--van-background-min-height);
  background-color: var(--van-background-color);
  background-position: var(--van-background-position);
  background-repeat: no-repeat;
  background-size: var(--van-background-size);

  &--default {
    --van-background-image: url('./assets/background-default.png');
  }

  &--light {
    --van-background-image: url('./assets/background-light.png');
  }

  &--solid {
    --van-background-color: #e4effd;
    --van-background-image: none;
  }

  &--gray {
    --van-background-color: var(--van-grey-200);
    --van-background-image: none;
  }

  &--style-1 {
    --van-background-image: url('./assets/background-style-1.png');
  }

  &--style-2 {
    --van-background-image: url('./assets/background-style-2.png');
  }

  &--style-3 {
    --van-background-image: url('./assets/background-style-3.png');
  }

  &,
  &[style*='--van-background-image'] {
    background-image: var(--van-background-image);
  }
}