@import '../../base.less';

@import './_var.less';

.@{prefix}-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  padding: @cell-vertical-padding @cell-horizontal-padding;
  height: @cell-height;
  background-color: @cell-bg-color;

  &::after {
    .hairline-bottom(@cell-border-color);

    left: @cell-border-left-space;
    right: @cell-border-right-space;
  }

  &:last-child::after,
  &--borderless::after {
    display: none;
  }

  &__description {
    font: @cell-description-font;
    color: @cell-description-color;
    margin-top: calc(@spacer / 2);
  }

  &__note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    color: @cell-note-color;
    font: @cell-note-font;
  }

  &__title {
    color: @cell-title-color;
  }

  &__title {
    margin-right: @spacer-2;
  }

  &__title,
  &__note {
    flex: 1 1 auto;

    &:empty {
      display: none;
    }
  }

  &__title-text {
    display: flex;
    font: @cell-title-font;
    color: @cell-title-color;
  }

  &__left,
  &__right {
    align-self: stretch;

    .@{prefix}-icon {
      display: block;
    }
  }

  &__left {
    &:not(:empty) {
      margin-right: @spacer-1;
    }

    &-icon {
      color: @cell-left-icon-color;
      font-size: @cell-left-icon-size;
    }

    &-image {
      height: @cell-image-height;
      width: @cell-image-width;
    }
  }

  &__note:not(:empty) + &__right {
    margin-left: calc(@spacer / 2);
  }

  &__right {
    display: flex;

    &-icon {
      color: @cell-right-icon-color;
      font-size: @cell-right-icon-size;
    }

    &--middle {
      align-items: center;
    }

    &--top {
      align-items: flex-start;
    }

    &--bottom {
      align-items: flex-end;
    }
  }

  &--hover {
    background-color: @cell-hover-color;
  }

  &--required {
    font: @cell-required-font;
    color: @cell-required-color;
  }
}

.@{prefix}-cell-group {
  position: relative;

  &__title {
    font-family: PingFangSC-Regular;
    font-size: @cell-group-title-font-size;
    color: @cell-group-title-color;
    text-align: left;
    line-height: @cell-group-title-line-height;
    background-color: @cell-group-title-bg-color;
    padding-left: @cell-group-title-padding-left;
  }

  &--bordered {
    &::before {
      .hairline-top(@cell-group-border-color);

      z-index: 1;
    }

    &::after {
      .hairline-bottom(@cell-group-border-color);

      z-index: 1;
    }
  }

  &--card {
    margin: 0 16px;
    border-radius: @radius-large;
    overflow: hidden;
  }
}