@import "../styles/mixins/index.less";
@import "../styles/themes/index.less";

.@{wux-prefix}-cell {
    .button-reset();

    padding: @cell-padding;
    position: relative;
    display: flex;
    align-items: center;
    background: @cell-bg;

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

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

    &--has-line&::after {
        .setBottomLine(@border-color-split);

        left: 15px;
    }

    &--has-line&--last::after {
        display: none;
    }

    &--hover {
        background-color: @active-state-bg !important;
    }

    &--disabled {
        opacity: @disabled-opacity;
        cursor: not-allowed;
    }

    &__thumb {
        .square(@cell-icon-size);

        display: block;
        margin-right: @margin-component-base;
    }

    &__bd {
        flex: 1;
    }

    &__text {
        text-align: left;
    }

    &__desc {
        text-align: left;
        line-height: 1.2;
        font-size: @font-size-sm;
        color: @text-color-secondary;
    }

    &__ft {
        display: flex;
        align-self: center;
        text-align: right;
        color: @text-color-secondary;
    }

    &__arrow:not(:empty) {
        flex: none;
        display: flex;
        align-items: center;
        margin-left: @margin-component-base;
    }

    &--access > &__ft {
        padding-right: 19px;
        position: relative;

        &::after {
            content: " ";
            .setArrow(right);

            transform: rotate(0) translateY(-50%);
            position: absolute;
            top: 50%;
            right: 0;
        }
    }
}