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

.card-button-style(@theme, @color) {
    &--@{theme} {
        color: @color !important;
    }
}

.@{wux-prefix}-card {
    position: relative;
    min-height: @card-height;
    padding-bottom: 6px;
    display: flex;
    -webkit-box-orient: vertical;
    flex-direction: column;
    background-color: @card-bg;

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

    &--bordered {
        border-radius: @card-radius;

        &::before {
            .hairline(@border-color-split);

            border-radius: @card-radius;
            border-top-width: @border-width-base;
            border-right-width: @border-width-base;
            border-bottom-width: @border-width-base;
            border-left-width: @border-width-base;
        }
    }

    &--full {
        border-radius: 0;

        &::before {
            border-radius: 0;
            border-right-width: 0;
            border-left-width: 0;
        }
    }

    &--has-actions {
        padding-bottom: 0;
    }

    &__hd {
        position: relative;
        display: flex;
        font-size: 17px;
        padding: @card-hd-padding;
        align-items: center;

        &::before {
            .setBottomLine(@border-color-split);
        }
    }

    &__content {
        flex: 1;
        text-align: left;
        color: @black;
    }

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

        display: inline-block;
        position: relative;
        margin-left: auto;
        margin-right: @margin-component-base;
        overflow: hidden;
        vertical-align: middle;
    }

    &__extra {
        flex: 1;
        text-align: right;
        font-size: 17px;
        color: @text-color-secondary;
    }

    &__bd {
        position: relative;
        padding: @card-bd-padding;
        font-size: 15px;
        color: @heading-color;
        min-height: 40px;
    }

    &__ft {
        display: flex;
        font-size: @font-size-base;
        color: @text-color-secondary;
        padding: @card-ft-padding;
    }

    &__actions {
        position: relative;
        display: flex;
        line-height: 50px;
        margin-top: 6px;
        justify-content: center;
        align-items: center;

        &::before {
            .setTopLine(@border-color-split);
        }
    }

    &__action {
        position: relative;
        display: block;
        flex: 1;
        color: @balanced;
        text-align: center;

        &::before {
            .setRightLine(@border-color-split);
        }

        &:last-child::before {
            display: none;
        }

        .card-button-style(default, @dark);
        .card-button-style(primary, @balanced);
        .card-button-style(light, @light-inverse);
        .card-button-style(stable, @stable-inverse);
        .card-button-style(positive, @positive);
        .card-button-style(calm, @calm);
        .card-button-style(assertive, @assertive);
        .card-button-style(balanced, @balanced);
        .card-button-style(energized, @energized);
        .card-button-style(royal, @royal);
        .card-button-style(dark, @dark);

        &--bold {
            font-weight: 500 !important;
        }

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

        &--disabled {
            opacity: @disabled-opacity;
        }
    }
}