@import './var.scss';
@import '../../Style/mixin/index.scss';

:root {
    --cell-font-size: #{$cell-font-size};
    --cell-height: #{$cell-height};
    --cell-line-height: #{$cell-line-height};
    --cell-vertical-padding: #{$cell-vertical-padding};
    --cell-horizontal-padding: #{$cell-horizontal-padding};
    --cell-text-color: #{$cell-text-color};
    --cell-bg: #{$cell-bg};
    --cell-border-color: #{$cell-border-color};
    --cell-active-color: #{$cell-active-color};
    --cell-required-color: #{$cell-required-color};
    --cell-value-font-size: #{$cell-value-font-size};
    --cell-label-color: #{$cell-label-color};
    --cell-label-font-size: #{$cell-label-font-size};
    --cell-label-line-height: #{$cell-label-line-height};
    --cell-label-margin-top: #{$cell-label-margin-top};
    --cell-desc-color-size: #{$cell-desc-color-size};
    --cell-value-color: #{$cell-value-color};
    --cell-icon-color: #{$cell-icon-color};
    --cell-icon-margin-left: #{$cell-icon-margin-left};
    --cell-link-color: #{$cell-link-color};
    --cell-link-margin-left: #{$cell-link-margin-left};
    --cell-alone-color: #{$cell-alone-color};
    --cell-alone-font-size: #{$cell-alone-font-size};
    --cell-group-bg: #{$cell-group-bg};
    --cell-group-inset-margin: #{$cell-group-inset-margin};
    --cell-group-border-radius: #{$cell-group-border-radius};
}

.jing-cell {
    position: relative;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
    width: 100%;
    padding: var(--cell-horizontal-padding) var(--cell-vertical-padding);
    color: var(--cell-text-color);
    font-size: var(--cell-font-size);
    line-height: var(--cell-line-height);
    background-color: var(--cell-bg);

    &::after {
        left: var(--cell-vertical-padding) !important;
        @include hairline-bottom(var(--cell-border-color), 0, 0);
    }

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

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

    &--clickable {
        cursor: pointer;
        &:active {
            background-color: var(--cell-active-color);
        }
    }

    &__required {
        color: var(--cell-required-color);
        font-size: var(--cell-font-size);
        margin-left: 4px;
    }

    &__title {
        flex: 1;
        min-width: 30vw;
    }

    &__label {
        margin-top: var(--cell-label-margin-top);
        color: var(--cell-icon-color);
        font-size: var(--cell-label-font-size);
        line-height: var(--cell-label-line-height);
    }

    &__title,
    &__value {
        flex: 1;
    }

    &__value {
        position: relative;
        overflow: hidden;
        color: var(--cell-value-color);
        font-size: var(--cell-value-font-size);
        text-align: right;
        vertical-align: middle;
        word-wrap: break-word;
        &--alone {
            color: var(--cell-alone-color);
            text-align: left;
            font-size: var(--cell-alone-font-size);
        }
    }

    &__desc {
        font-size: var(--cell-desc-color-size);
    }

    &__icon,
    &__link {
        height: var(--cell-height);
        font-size: var(--cell-icon-size);
        line-height: var(cell-line-height);
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    &__icon {
        margin-right: var(--cell-icon-margin-left);
    }

    &__link {
        margin-left: var(--cell-link-margin-left);
        color: var(--cell-link-color);
    }
}

.jing-cell-group {
    background-color: var(--cell-group-bg);
    overflow: hidden;
    border-radius: var(--cell-group-border-radius);
    &--shadow {
        @include background-shadow();
    }
}