@import 'ant-design-vue/lib/style/themes/index.less';
@import '../../style/variable.less';

@card-border: #e6e6e6;
.j-card-panel {
    .j-card-item {
        border: 1px solid @card-border;
        border-radius: 4px;
        cursor: pointer;
        color: @black;
        display: flex;
        width: 100%;
        gap: 12px;

        .j-card-title-warp {
            flex: 1 1 auto;
        }

        &.vertical {
            flex-direction: column-reverse;
            padding: 22px 4px;
            align-items: center;

            .j-card-image {
                margin-bottom: 4px;
            }
        }

        &.horizontal {
            padding: 20px;
        }

        .sub-title {
            color: rgba(0, 0, 0, 0.24);
        }

        &.right {
            flex-direction: row-reverse;
        }
    }

    &.no-column {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;

        .j-card-item {
            min-width: 36px;
            width: unset;

            &.vertical {
                padding: 14px 16px;
            }
        }
    }

    .active {
        border: 1px solid @primary-color !important;
    }

    .disabled {
        cursor: not-allowed;
        opacity: 0.75;
    }
}