@import "./base/var";
@import "./mixins/index.scss";

@include c(card) {
    box-sizing: border-box;
    border: $--border-default;
    border-radius: $--border-radius-default;
    background-color: $--color-white;
    font-size: $--font-size-default;
    transition: all $--animation-time;

    &:hover,
    &:focus,
    &:active {
        box-shadow: $--card-box-shadow;
        border-color: mix($--color-white, $--border-color-default, 20%);
    }

    @include m(no-hover) {
        &:hover,
        &:focus,
        &:active {
            box-shadow: none;
            border: $--border-default;
        }
    }

    @include m(no-border) {
        border: none;
    }

    @include e(header) {
        padding: $--card-padding-vertical $--card-padding-horizontal;
        border-bottom: $--border-default;
        box-sizing: border-box;
        width: 100%;
        display: flex;
        font-size: $--font-size-title;
        font-weight: 600;
        @include clear-float;
    }
    @include e(header-title) {
        color: $--color-text-title;
        box-sizing: border-box;
        width: 100%;
        flex: 1;
        @include utils-ellipsis()
    }
    @include e(header-extra) {
        box-sizing: border-box;
        float: right;
        font-weight: normal;
    }

    @include e(body) {
        padding: $--card-padding-vertical $--card-padding-horizontal;
    }
    @include e(footer) {
        padding: $--card-padding-vertical $--card-padding-horizontal;
        border-top: $--border-default;
    }
}
