@include exports("card/layout") {

    // Placeholder selectors
    %top-rounded-child {
        .k-card > &:first-child {
            @include border-top-radius( $card-border-radius );
        }
    }
    %bottom-rounded-child {
        .k-card > &:last-child {
            @include border-bottom-radius( $card-border-radius );
        }
    }

    %left-rounded-child {
        .k-card-horizontal > &:first-child {
            @include border-left-radius-only( $card-border-radius );
        }

        .k-card-horizontal.k-rtl > &:first-child,
        .k-rtl .k-card-horizontal > &:first-child,
        [dir="rtl"] .k-card-horizontal > &:first-child {
            @include border-right-radius-only( $card-border-radius );
        }
    }

    %right-rounded-child {
        .k-card-horizontal > &:last-child {
            @include border-right-radius-only( $card-border-radius );
        }

        .k-card-horizontal.k-rtl > &:last-child,
        .k-rtl .k-card-horizontal > &:last-child,
        [dir="rtl"] .k-card-horizontal > &:last-child {
            @include border-left-radius-only( $card-border-radius );
        }
    }

    // Card
    .k-card {
        @include border-radius( $card-border-radius );
        @include box-shadow( $card-box-shadow );
        border-width: $card-border-width;
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: $card-font-family;
        font-size: $card-font-size;
        line-height: $card-line-height;
        display: flex;
        flex-direction: column;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .k-card-callout {
            position: absolute;
            width: $card-callout-width;
            height: $card-callout-height;
            border-width: $card-border-width $card-border-width 0 0;
            border-style: solid;
            margin: 0;

            &.k-callout-n {
                top: 0;
                left: 50%;
                transform: translate(-50%, -50%) rotate(-45deg);
            }

            &.k-callout-e {
                top: 50%;
                left: auto;
                right: 0;
                transform: translate(50%, -50%) rotate(135deg) scaleX(-1);
            }

            &.k-callout-s {
                top: auto;
                bottom: 0;
                left: 50%;
                transform: translate(-50%, 50%) rotate(135deg);
            }

            &.k-callout-w {
                top: 50%;
                left: 0;
                transform: translate(-50%, -50%) rotate(-135deg);
            }
        }
    }
    .k-card.k-card-flat {
        box-shadow: none;
    }

    // Orientation
    .k-card-horizontal {
        flex-direction: row;
    }

    // Header
    .k-card-header {
        @extend %top-rounded-child;
        @extend %bottom-rounded-child;
        padding: $card-header-padding-y $card-header-padding-x;
        border-width: 0 0 $card-header-border-width;
        border-style: solid;
        display: block;
        overflow: hidden;
        position: relative;
        z-index: 1;

        > h1,
        > h2,
        > h3,
        > h4,
        > h5,
        > h6 {
            margin: 0;
        }

        .k-card-title + .k-card-subtitle {
            margin-top: $card-subtitle-margin-top;
        }

        &.k-hbox,
        &.k-vbox {
            display: flex;
        }
    }

    // Footer
    .k-card-footer {
        @extend %top-rounded-child;
        @extend %bottom-rounded-child;
        padding: $card-footer-padding-y $card-footer-padding-x;
        border-width: $card-footer-border-width 0 0;
        border-style: solid;
        display: block;

        &.k-hbox,
        &.k-vbox {
            display: flex;
        }
    }

    // Body
    .k-card-body {
        @extend %top-rounded-child;
        @extend %bottom-rounded-child;
        padding: $card-body-padding-y $card-body-padding-x;
        display: block;
        flex: 1 1 auto;

        p {
            margin: 0 0 $paragraph-margin-bottom;
        }

        > .k-last,
        > :last-child {
            margin-bottom: 0;
        }

        &.k-hbox,
        &.k-vbox {
            display: flex;
        }
    }


    // Card image
    .k-card-image,
    .k-card-media {
        @extend %top-rounded-child;
        @extend %bottom-rounded-child;
        @extend %left-rounded-child;
        @extend %right-rounded-child;
        border: 0;
        max-width: 100%;
        overflow: hidden;

        > img {
            border: 0;
            max-width: 100%;
        }

        .k-card-horizontal & {
            flex-shrink: 0;
            max-width: $card-img-max-width;
            object-fit: cover;
        }
    }


    // Card title
    .k-card-title {
        @include typography( map-get( $typography-config, card-title ) );
        margin: 0 0 $card-title-margin-bottom;
    }

    // Card subtitle
    .k-card-subtitle {
        @include typography( map-get( $typography-config, card-subtitle ) );
        margin: 0 0 $card-subtitle-margin-bottom;
    }
    .k-card-title + .k-card-subtitle {
        margin-top: -( $card-title-margin-bottom * .75 );
    }


    // Separator
    .k-card-separator {
        margin: 0;
        border-width: 1px 0 0;
        border-style: solid;
        display: block;
        flex: 0 0 auto;

        &.k-separator-vertical {
            width: 0;
            border-width: 0 0 0 1px;
        }
    }

    .k-card > .k-hr {
        margin: 0;
        flex: 0 0 auto;
        border-color: inherit;
    }


    // Card actions
    .k-card-actions {
        @extend %top-rounded-child;
        @extend %bottom-rounded-child;
        padding: $card-actions-padding-y $card-actions-padding-x;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        flex-shrink: 0;
        flex-basis: auto;

        .k-card > & {
            border-top-width: $card-actions-border-width;
            border-color: inherit;
        }

        .k-card-horizontal &,
        .k-card-vertical & {
            border: 0;
        }

        .k-card-horizontal & {
            @extend %right-rounded-child;
        }

        .k-button {
            max-width: 100%;
            white-space: normal;
        }

        > .k-button.k-flat:first-child {
            margin-left: $card-button-negative-spacing;
        }

        &.k-card-actions-start { justify-content: flex-start; }
        &.k-card-actions-end { justify-content: flex-end; }
        &.k-card-actions-center { justify-content: center; }
    }

    .k-card-action {
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        display: inline-flex;
        flex: 1 1 auto;

        > .k-button {
            @include border-radius( 0 );
            padding: ($card-actions-padding-y + $button-padding-y) $card-actions-padding-x;
            flex: 1 1 auto;
        }
    }

    .k-card-actions-vertical {
        padding: 0;
        display: flex;
        flex-direction: column;

        .k-button {
            padding: ($card-actions-padding-y + $button-padding-y) $card-actions-padding-x;

            &.k-flat:first-child {
                margin-left: 0;
            }
        }

        .k-card-action + .k-card-action {
            border-top-width: $card-actions-border-width;
        }

        .k-card-horizontal & {
            border-top-width: 0;
            border-left-width: $card-actions-border-width;
        }

        .k-card-vertical & {
            &.k-card-actions-start { align-items: flex-start; }
            &.k-card-actions-end { align-items: flex-end; }
            &.k-card-actions-center { align-items: center; }

            &.k-card-actions-start,
            &.k-card-actions-end,
            &.k-card-actions-center {
                padding: $card-actions-padding-y $card-actions-padding-x;

                .k-button {
                    padding: $button-padding-y $button-padding-x;
                }
            }
        }
    }

    .k-card-actions-stretched {
        padding: 0;
        display: flex;
        flex-direction: row;

        .k-button {
            padding: ($card-actions-padding-y + $button-padding-y) $card-actions-padding-x;
            flex-grow: 1;

            &.k-flat:first-child {
                margin-left: 0;
            }
        }

        .k-card-action + .k-card-action {
            border-left-width: $card-actions-border-width;
        }

        &.k-card-actions-vertical {
            flex-direction: column;
        }
    }


    // List
    .k-card-list {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        flex: 0 0 auto;

        .k-card {
            flex: 0 0 auto;
        }
        .k-card + .k-card {
            margin-top: $card-deck-gap;
        }
    }


    // Deck
    .k-card-deck {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        flex: 0 0 auto;

        .k-card {
            flex: 0 0 auto;
        }
        .k-card + .k-card {
            margin-left: $card-deck-gap;
        }
    }

    .k-card-deck-scrollwrap {
        margin-right: -$chat-message-list-padding-y;
        margin-left: -$chat-message-list-padding-y;
        padding-left: $chat-message-list-padding-y;
        padding-bottom: 3px; // prevents trimming of card shadows on OSX (0-width scrollbar)
        padding-right: $chat-message-list-padding-y;
        width: 100%;
        box-sizing: content-box;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        position: relative;
        overflow: hidden;

        > .k-button {
            @include border-radius( $card-deck-scroll-button-radius );
            flex: 0 0 auto;
            position: absolute;
            z-index: 1;

            &:first-child {
                left: $card-deck-scroll-button-offset;
            }

            &:last-child {
                right: $card-deck-scroll-button-offset;
            }
        }

        > .k-card-deck {
            // hide scrollbar
            $scrollbar-size: 20px;

            margin-bottom: -$scrollbar-size;
            padding-bottom: $scrollbar-size;
            flex: 1 1 auto;
        }
    }


    // Group
    .k-card-group {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        flex: 0 0 auto;

        .k-card {
            @include border-radius(0);
            flex: 0 0 auto;

            > .k-card-header {
                @include border-radius(0);
            }
        }
        .k-card + .k-card {
            margin-left: -1px;
        }


        // Border-radius
        .k-card.k-first {
            @include border-left-radius( $card-border-radius );

            > .k-card-header {
                border-top-left-radius: $card-border-radius;
            }
        }
        .k-card.k-last {
            @include border-right-radius( $card-border-radius );

            > .k-card-header {
                border-top-right-radius: $card-border-radius;
            }
        }
        .k-card.k-only {
            @include border-radius( $card-border-radius );

            > .k-card-header {
                @include border-top-radius( $card-border-radius );
            }
        }
    }


}




@include exports("card/layout/rtl") {

    .k-rtl,
    [dir="rtl"] {

        // Deck
        .k-card-deck {
            .k-card + .k-card {
                margin-left: 0;
                margin-right: $card-deck-gap;
            }
        }
    }

}




@include exports("card/layout/ie11") {

    .k-ie11 {

        // IE11 needs units to be added to flex-basis when in shorthand
        // Thus, `flex: x x 0` will be ignored and we need `flex: x x auto`
        // See https://github.com/philipwalton/flexbugs#flexbug-4
        .k-card-body {
            flex: 1 1 auto;
        }

    }
}