@import './var.less';

:root {
  --van-cell-group-background-color: @cell-group-background-color;
  --van-cell-group-title-color: @cell-group-title-color;
  --van-cell-group-title-padding: @cell-group-title-padding;
  --van-cell-group-title-font-size: @cell-group-title-font-size;
  --van-cell-group-title-line-height: @cell-group-title-line-height;
  --van-cell-group-inset-padding: @cell-group-inset-padding;
  --van-cell-group-inset-border-radius: @cell-group-inset-border-radius;
  --van-cell-group-inset-title-padding: @cell-group-inset-title-padding;
  --van-cell-group-gray-card-padding: @cell-group-gray-card-padding;
  --van-cell-group-gray-card-background: @cell-group-gray-card-background;
  --van-cell-group-gray-card-cell-background: @cell-group-gray-card-cell-background;
}

.van-cell-group {
  background: var(--van-cell-group-background-color);

  &--inset {
    margin: var(--van-cell-group-inset-padding);
    border-radius: var(--van-cell-group-inset-border-radius);
    overflow: hidden;
  }

  &--gray-card {
    margin: var(--van-cell-group-inset-padding);
    padding: var(--van-cell-group-gray-card-padding);
    overflow: hidden;
    background: var(--van-cell-group-gray-card-background);
    border-radius: var(--van-cell-group-inset-border-radius);

    > .van-cell {
      background: var(--van-cell-group-gray-card-cell-background);

      &:first-child {
        border-radius: var(--van-border-radius-md) var(--van-border-radius-md) 0 0;
      }

      &:last-child {
        border-radius: 0 0 var(--van-border-radius-md) var(--van-border-radius-md);
      }

      &:only-child {
        border-radius: var(--van-border-radius-md);
      }
    }
  }

  &__title {
    padding: var(--van-cell-group-title-padding);
    color: var(--van-cell-group-title-color);
    font-size: var(--van-cell-group-title-font-size);
    line-height: var(--van-cell-group-title-line-height);

    &--inset {
      padding: var(--van-cell-group-inset-title-padding);
    }
  }
}