.zui-cell {
  $v-cell-gap-sm: 0.35rem;
  
  display: flex;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
  font-size: $font-md;
  background-color: $color-white;
  padding-left: $v-gap-md;
  &--border-short {
    padding-left: $v-gap-md;
    padding-right: $v-gap-md;
    .zui-cell__content {
      padding-left: 0;
      padding-right: 0;
    }
  }
  &--border-long {
    padding-left: 0;
    padding-right: 0;
    .zui-cell__content {
      padding-left: $v-gap-md;
      padding-right: $v-gap-md;
    }
  }
  &__content {
    width: 100%;
    padding: $h-gap-lg $v-gap-md $h-gap-lg 0;
    position: relative;
    display: flex;
    justify-content: space-between;
    &.zui-cell--border {
      border-bottom: 1px solid $color-field;
    }
    &.zui-cell--border-solid::after {
      position: absolute; 
      content: '';
      width: 100%;
      left: 0;
      bottom: 0;
      height: 1px;
      background-color: $color-field;
      -webkit-transform: scale(1, 0.5);
      transform: scale(1, 0.5);
      -webkit-transform-origin: center bottom;
      transform-origin: center bottom;
    }
  }
  &.large {
    .zui-cell__content {
      padding-top: $h-gap-lg * 1.2;
      padding-bottom: $h-gap-lg * 1.2;
    }
    .zui-cell__icon {
      padding-right: $v-gap-sm;
    }
    .zui-cell__right-icon {
      font-size: $font-lg;
    }
  }
  &__title, &__value {
    flex: auto;
  }
  &__label {
    font-size: $font-md * 0.8;
    color: $color-text-minor;
  }
  &__value {
    text-align: right;
    color: $color-text-minor;
  }
  &__icon {
    display: flex;
    align-items: center;
    padding-right: $v-cell-gap-sm;
  }
  &__right-icon {
    display: flex;
    align-items: center;
    padding-left: $v-cell-gap-sm;
    color: $color-disabled;
    &, .zui-icon {
      font-size: $font-md * 1.25;
    }
  }
  &--clickable {
    cursor: pointer;
    &.zui-cell--hover {
      background-color: $bg-active;
    }
  }
  &--center {
    align-items: center;
    .zui-cell__title, .zui-cell__content {
      align-items: center;
    }
  }
}