@use "../../mixins/index.import.scss" as *;
@use "../../color-system/_constants.scss" as *;
@use "../../typography/index.import.scss" as *;
@use "./variables.scss" as *;
@use "../typography/_variables.scss" as *;

@mixin kendo-card--layout-base() {


    // Angular elements
    kendo-card,
    kendo-card-header,
    kendo-card-body,
    kendo-card-actions,
    kendo-card-footer {
        display: block;
    }


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

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        // Card avatar
        .k-card-avatar,
        .k-avatar {
            margin-right: $kendo-card-avatar-spacing;
            width: $kendo-card-avatar-size;
            height: $kendo-card-avatar-size;
            flex-basis: $kendo-card-avatar-size;
        }
    }
    .k-card > .k-card-inner {
        @include border-radius( $kendo-card-inner-border-radius );
        display: flex;
        flex-direction: inherit;
        overflow: hidden;
        position: relative;
    }

    // Card orientation
    .k-card-horizontal { flex-flow: row nowrap; } // stylelint-disable-line block-opening-brace-space-before
    .k-card-vertical { flex-flow: column nowrap; } // stylelint-disable-line block-opening-brace-space-before

    // Header
    .k-card-header {
        padding-block: $kendo-card-header-padding-y;
        padding-inline: $kendo-card-header-padding-x;
        border-width: 0 0 $kendo-card-header-border-width;
        border-style: solid;
        outline: 0;
        flex-shrink: 0;
        overflow: hidden;
        position: relative;
        z-index: 1;

        .k-card-title,
        .k-card-subtitle {
            margin-bottom: 0;
        }
        .k-card-title + .k-card-subtitle,
        .k-card-subtitle + .k-card-subtitle {
            margin-top: $kendo-card-title-margin-bottom;
        }
    }


    // Footer
    .k-card-footer {
        padding-block: $kendo-card-footer-padding-y;
        padding-inline: $kendo-card-footer-padding-x;
        border-width: $kendo-card-footer-border-width 0 0;
        border-style: solid;
        outline: 0;
        flex-shrink: 0;
    }


    // Body
    .k-card-body {
        padding-block: $kendo-card-body-padding-y;
        padding-inline: $kendo-card-body-padding-x;
        outline: 0;
        flex: 1 1 auto;

        p {
            margin: $kendo-paragraph-margin;
        }

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

        > .k-card-actions {
            padding: 0;
        }
    }

    // Card media
    .k-card-media {
        border: 0;
        max-width: 100%;
        flex-shrink: 0;
        overflow: hidden;
    }

    .k-card-horizontal .k-card-media {
        max-width: $kendo-card-img-max-width;
        object-fit: cover;
    }


    // Card title
    .k-card-title {
        margin: 0 0 $kendo-card-title-margin-bottom;
        @include typography(
            $kendo-card-title-font-size,
            $kendo-card-title-font-family,
            $kendo-card-title-line-height,
            $kendo-card-title-font-weight,
            $kendo-card-title-letter-spacing
        );
    }


    // Card subtitle
    .k-card-subtitle {
        margin: 0 0 $kendo-card-subtitle-margin-bottom;
        @include typography(
            $kendo-card-subtitle-font-size,
            $kendo-card-subtitle-font-family,
            $kendo-card-subtitle-line-height,
            $kendo-card-subtitle-font-weight,
            $kendo-card-subtitle-letter-spacing
        );
    }


    // Separator
    .k-card-separator {
        margin: 0;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        display: block;
        flex: 0 0 auto;
        align-self: stretch;
    }

    .k-card-separator.k-separator-horizontal,
    .k-card-vertical > .k-card-separator {
        border-top-width: 1px;
    }

    .k-card-separator.k-separator-vertical,
    .k-card-horizontal > .k-card-separator {
        border-left-width: 1px;
    }

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

    // Card actions
    .k-card-actions {
        padding-block: $kendo-card-actions-padding-y;
        padding-inline: $kendo-card-actions-padding-x;
        border-width: 0;
        border-style: solid;
        border-color: inherit;
        overflow: hidden;
        display: flex;
        flex-shrink: 0;
        flex-basis: auto;
        gap: $kendo-card-actions-gap;
    }

    .k-card-horizontal .k-actions-horizontal {
        width: auto;
    }

    // List
    .k-card-list {
        display: flex;
        flex-flow: column nowrap;
        align-items: stretch;
        gap: $kendo-card-deck-gap;
        flex: 0 0 auto;

        .k-card {
            flex: 0 0 auto;
        }
    }


    // Deck
    .k-card-deck {
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        gap: $kendo-card-deck-gap;
        flex: 0 0 auto;

        .k-card {
            flex: 0 0 auto;
        }
    }

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

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

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

            &:last-child {
                right: $kendo-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-flow: row nowrap;
        align-items: stretch;
        flex: 0 0 auto;

        .k-card {
            @include border-radius( 0 );
            flex: 0 0 auto;
        }
        .k-card + .k-card {
            margin-inline-start: $kendo-card-border-width;
        }


        // Border-radius
        .k-card.k-first {
            @include border-left-radius( $kendo-card-border-radius );
        }
        .k-card.k-last {
            @include border-right-radius( $kendo-card-border-radius );
        }
        .k-card.k-only {
            @include border-radius( $kendo-card-border-radius );
        }
    }

    // Card with callout
    .k-card-with-callout {
        overflow: visible;
    }


    // Card callout
    .k-card-callout {
        margin: 0;
        width: $kendo-card-callout-width;
        height: $kendo-card-callout-height;
        border-width: $kendo-card-border-width;
        border-style: solid;
        box-sizing: border-box;
        position: absolute;
    }

    .k-card-callout.k-callout-n {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
    }
    .k-card-callout.k-callout-e {
        top: 50%;
        right: 0;
        transform: translate(50%, -50%) rotate(-45deg);
    }
    .k-card-callout.k-callout-s {
        bottom: 0;
        left: 50%;
        transform: translate(-50%, 50%) rotate(45deg);
    }
    .k-card-callout.k-callout-w {
        top: 50%;
        left: 0;
        transform: translate(-50%, -50%) rotate(45deg);
    }


    // Solid card
    .k-card-solid {
        @include box-shadow( $kendo-card-shadow );
    }


    // Flat card
    .k-card-flat {
        @include box-shadow( none );
    }

}


@mixin kendo-card--layout() {
    @include kendo-card--layout-base();
}