.xm__cell--box{
    position: relative;
    margin-bottom: 20px;
}

.xm__cell {
    background-color: $body-background;
    position: relative;

    & .xm__cell--title {
        padding: 0 10px 4px;
        font-size: $font-size-base;
        text-align: left;
        color: $text-color;
        position: relative;
        // z-index: 1;
        background-color: #f5f5f5;

        &:after {
            content: "";
            position: absolute;
            z-index: 3;
            bottom: 0;
            left: 0;
            width: 100%;
            border-bottom: $border-width-default $border-style-default $border-color-base;
            transform: scaleY(.5);
            transform-origin: 0 0;
        }
    
    }

    // & .xm__cell--item:not(textarea) {
    //     @include tap-color($background-color-base, .95);
    // }

    & .xm__cell--item {
        display: flex;
        position: relative;
        padding-left: 10px;
        overflow: hidden;
        font-size: $font-size-base;

        & .xm__cell--left, 
        & .xm__cell--right {
            display: flex;
            align-items: center;
        }
        
        & .xm__cell--left {
            color: $text-color;
            white-space: nowrap;

            & [class^="xm__icon--"], 
            & [class*=" xm__icon--"] {
                display: block;
                margin-right: 2px;
            }
        }
        
        & a.xm__cell--right{
            background-color: $body-background;
            text-decoration: none;
        }

        & .xm__cell--right {
            flex: 1;
            width: 100%;
            min-height: $line-height-computed*2.4;
            color: $text-color;
            text-align: right;
            padding-right: 10px;
            justify-content: flex-end;

            & [class^="xm__icon--"], 
            & [class*=" xm__icon--"] {
                display: block;
                margin-left: 2px;
            }

            & .dot {
                display: inline-block;
                width: 6px;
                height: 6px;
                @include border-radius(100px);
                background-color: $error-color;
            }

        }

        &:not(:last-child):after {
            margin-left: 10px;
            content: "";
            position: absolute;
            // z-index: 1;
            bottom: 0;
            left: 0;
            width: 100%;
            border-bottom: $border-width-default $border-style-default $border-color-split;
            transform: scaleY(.5);
            transform-origin: 0 0;
        }

    }

    &:after {
        content: "";
        position: absolute;
        // z-index: 1;
        bottom: 0;
        left: 0;
        width: 100%;
        border-bottom: $border-width-default $border-style-default $border-color-base;
        transform: scaleY(.5);
        transform-origin: 0 0;
    }

    
}