@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixins';

.@{card-prefix-cls} {
    text-align: left;
    .basic-config(@card-default-tp, @card-default-p);
    font-weight: @card-font-weight;
    font-size: @card-font-size;
    position: relative;
    min-height: 80px;
    border-radius: @card-radius;

    &-selected {
        border-width: @card-border-width;
        border-style: solid;
        border-color: @blue-base;
        box-shadow: @card-shadow;
        transition: box-shadow 0.3s, border-color 0.3s;

        &:hover {
            border-color: @blue-base;
        }
    }

    &-hoverable {
        cursor: pointer;
        transition: box-shadow 0.3s, border-color 0.3s;

        &:hover {
            border-color: @card-hoverable-hover-border;
            box-shadow: @card-shadow;
        }
    }

    &-bordered {
        border-width: @card-border-width;
        border-style: solid;
    }

    &-loading-block {
        height: 14px;
        margin: 4px 0;
        background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
        background-size: 600% 600%;
        border-radius: @card-radius;
        animation: card-loading 1.4s ease infinite;
    }

    &-head {
        padding: 0 (4 * @P);
        font-weight: @card-font-weight;
        font-size: @T2;
        background: @card-head-background;
        border-radius: @card-radius @card-radius 0 0;

        &-wrapper {
            display: flex;
            align-items: center;
        }

        &-title {
            display: inline-block;
            flex: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            font-weight: @card-title-font-weight;
            color: @card-head-title-color;
            // margin-bottom: 4 * @P;
            padding-top: 4 * @P;

            &-with-tabs {
                font-size: @card-tabs-title-font-size;
            }

            > .@{acud-prefix}-typography,
            > .@{acud-prefix}-typography-edit-content {
                left: 0;
                margin-top: 0;
                margin-bottom: 0;
            }
        }

        .@{acud-prefix}-tabs {
            clear: both;
            margin-bottom: @card-head-tabs-margin-bottom;
            color: @text-color;
            font-weight: normal;
            font-size: @font-size-base;

            &-bar {
                border-bottom: @border-width-base @border-style-base @border-color-split;
            }
        }

        &-extra {
            float: right;
            margin-left: auto;
            padding-top: 4 * @P;
            font-size: @font-size-base;
            .basic-config(@card-head-extra-default-tp, @card-head-extra-default-p);

            a {
                &:not(:last-of-type) {
                    margin-right: @card-extra-margin;
                }
                .basic-config(@card-head-extra-default-tp, @card-head-extra-default-p);
            }

            .@{card-prefix-cls}-rtl & {
                margin-right: auto;
                margin-left: 0;
            }

            &-with-tabs {
                .basic-config(@card-head-extra-withtab-default-tp, @card-head-extra-default-p);

                a {
                    .basic-config(@card-head-extra-withtab-default-tp, @card-head-extra-default-p);
                }
            }
        }
    }

    &-footer {
        height: @card-head-height;
        line-height: @card-head-height;
        font-weight: @card-font-weight;
        font-size: @T2;
        background: @card-head-background;
        width: 100%;
        padding: 0 @card-extra-margin;
        margin-bottom: @card-extra-margin;

        &-wrapper {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        &-description {
            color: @card-footer-description-color;
            flex-shrink: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: left;
        }
        &-extra {
            font-weight: @card-font-weight;
            font-size: @font-size-base;
            .basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);
            white-space: nowrap;

            a {
                &:not(:last-child) {
                    margin-right: @card-extra-margin;
                }
                .basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);
            }

            .@{card-prefix-cls}-rtl & {
                margin-right: auto;
                margin-left: 0;
            }
        }
    }

    &-con {
        box-sizing: border-box;
        height: 100%;
        box-sizing: border-box;
        &.hasImage {
            display: flex;
            flex-flow: row nowrap;
            min-height: 48px;
            align-items: stretch; 
            padding: @card-image-padding;

            &.left {
                flex-direction: row;
            }

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

            .@{card-prefix-cls}-con-wrap {
                position: relative;

                .@{card-prefix-cls} {
                    &-head, &-body, &-footer {
                        padding: 0;
                    }
                    &-head {
                        margin-bottom: @P;
                        padding-top: 0;
                        &-title {
                            padding-top: 0;
                            font-size: @card-tabs-title-font-size;
                        }
                    }
                    &-footer {
                        margin-bottom: 0px;
                    }
                }

                .@{card-prefix-cls}-footer {
                    position: absolute;
                    bottom: 0px;
                }
            }
        }
        &-title {
            font-size: @font-weight-500;
            margin-bottom: 2 * @P;
        }
        &-image {
            height: 100%;
            line-height: 0;
            .img {
                display: inline-block;
                border-radius: @card-img-radius;
            }
            &.left {
                margin: auto @card-image-margin auto 0;
            }
            &.right {
                margin: auto 0 auto @card-image-margin;
            }
        }
        &-wrap {
            flex-grow: 1;
        }
    }

    &-body {
        overflow: hidden;
        padding: 0px @card-image-padding @card-image-padding;
        margin-top: 2 * @P;
        color: @card-content-color;
    }

    &-simple {
        &-con {
            padding: 40px 16px;
            text-align: center;
            .@{iconfont-css-prefix} {
                line-height: 0;
                color: @G5;
                opacity: 0.5;
            }

            &-description {
                margin-top: 4px;
            }

            .@{card-prefix-cls}-body {
                margin-bottom: 0;
            }
        }
    }

    &-meta {
        margin-bottom: @card-meta-margin;
        .clearfix();

        &-content {
            padding: @card-meta-padding-top 0 @card-meta-padding;

            &-detail {
                margin-top: @card-meta-content-margin;
            }
        }

        &-detail {
            overflow: hidden;
            > div:not(:last-child) {
                margin-bottom: @margin-xs;
            }
        }

        &-title {
            overflow: hidden;
            color: @card-head-color;
            font-weight: 500;
            font-size: @font-size-lg;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        &-description {
            color: @text-color-secondary;
            margin-top: 2px;
        }

        &-footer {
            display: flex;
            justify-content: space-between;
            height: 48px;
            line-height: 48px;
            border-top: @border-width-base @border-style-base @border-color-split;
            margin-bottom: -16px;

            &-actions {
                display: flex;
                align-items: center;
                & > li {
                    margin: @card-actions-li-margin;
                    color: @text-color-secondary;
                    text-align: center;
                    list-style: none !important;
                    .basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);

                    &:not(:last-of-type) {
                        margin-right: @card-actions-margin;
                    }

                    .@{card-prefix-cls}-rtl & {
                        float: right;
                    }

                    > span {
                        position: relative;
                        display: block;
                        font-size: @font-size-base;
                        line-height: @line-height-base;
                        cursor: pointer;
                        &:not(:last-of-type) {
                            margin-right: @card-actions-li-margin;
                        }

                        &:hover {
                            color: @primary-color;
                            transition: color 0.3s;
                        }

                        a:not(.@{acud-prefix}-btn),
                        > .@{iconfont-css-prefix} {
                            display: inline-block;
                            width: 100%;
                            line-height: 22px;
                            transition: color 0.3s;
                            .basic-config(@card-footer-extra-default-tp, @card-footer-extra-default-p);
                        }

                        > .@{iconfont-css-prefix} {
                            font-size: @card-action-icon-size;
                            line-height: 22px;
                        }
                    }

                    &:not(:last-child) {
                        .@{card-prefix-cls}-rtl & {
                            border-right: none;
                            border-left: @border-width-base @border-style-base @border-color-split;
                        }
                    }
                }
            }
        }
    }

    &-grid {
        float: left;
        width: 33.33%;
        border: 0;
        border-radius: 0;
        box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
        1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
        0 1px 0 0 @border-color-split inset;
        transition: all 0.3s;

        .@{card-prefix-cls}-rtl & {
            float: right;
        }

        &-hoverable {
            &:hover {
                position: relative;
                z-index: 1;
                box-shadow: @card-shadow;
            }
        }
    }

    &-contain-tabs {
        .@{card-prefix-cls}-head {
            padding-top: 0;
        }
        .@{card-prefix-cls}-body {
            margin: (4 * @P) 0 (6 * @P);
            padding-bottom: 0;
        }
    }

    &-bordered &-cover {
        margin-top: -1px;
        margin-right: -1px;
        margin-left: -1px;
        padding: 1px 1px 0 1px;
    }

    &-cover {
        > * {
            display: block;
            width: 100%;
        }

        .img {
            border-radius: @card-radius @card-radius 0 0;
            line-height: 0;
        }
    }

    &-actions-wrap {
        margin: 0 @card-actions-margin;
        background: @card-actions-background;
        border-top: @border-width-base @border-style-base @border-color-split;
        .clearfix();
        .@{iconfont-css-prefix} {
            line-height: 0;
        }
        .@{card-prefix-cls}-actions {
            float: left;
            .@{iconfont-css-prefix} {
                margin-right: @P;
                font-size: @font-size-base + 2;
                line-height: 15px;
            }
        }
        .@{card-prefix-cls}-actionsExtra {
            float: right;
        }
    }

    &-actions, &-actionsExtra {
        margin: 0;
        padding: 0;
        list-style: none;
        display: inline-block;
        .clearfix();

        & > li {
            float: left;
            margin: @card-actions-li-margin;
            color: @text-color-secondary;
            text-align: center;
            list-style: none !important;

            &:not(:last-of-type) {
                margin-right: @card-actions-margin;
            }

            .@{card-prefix-cls}-rtl & {
                float: right;
            }

            > span {
                position: relative;
                display: block;
                font-size: @font-size-base;
                line-height: @line-height-base;
                cursor: pointer;
                &:not(:last-of-type) {
                    margin-right: @card-actions-li-margin;
                }

                &:hover {
                    color: @primary-color;
                    transition: color 0.3s;
                }

                a:not(.@{acud-prefix}-btn),
                > .@{iconfont-css-prefix} {
                    display: inline-block;
                    width: 100%;
                    color: @text-color-secondary;
                    line-height: 22px;
                    transition: color 0.3s;

                    &:hover {
                        color: @primary-color;
                    }
                }

                > .@{iconfont-css-prefix} {
                    font-size: @card-action-icon-size;
                    line-height: 22px;
                }
            }

            &:not(:last-child) {
                .@{card-prefix-cls}-rtl & {
                    border-right: none;
                    border-left: @border-width-base @border-style-base @border-color-split;
                }
            }
        }
    }

    &-loading {
        overflow: hidden;
    }

    &-loading &-body {
        user-select: none;
    }

    &-loading-content {
        p {
            margin: 0;
        }
    }

    &-loading-block {
        height: 14px;
        margin: 4px 0;
        background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
        background-size: 600% 600%;
        border-radius: @card-radius;
        animation: card-loading 1.4s ease infinite;
    }
}

@keyframes card-loading {
    0%,
    100% {
        background-position: 0 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}