@use "../core/_index.scss" as *;
@use "../typography/variables.scss" as *;
@use "./_variables.scss" as *;

@mixin kendo-card--layout() {

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


    // Card
    .k-card {
        @include border-radius( var( --kendo-card-border-radius, #{$kendo-card-border-radius} ) );
        border-width: var( --kendo-card-border-width, #{$kendo-card-border-width} );
        border-style: solid;
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-card-font-family, #{$kendo-card-font-family} );
        font-size: var( --kendo-card-font-size, #{$kendo-card-font-size} );
        line-height: var( --kendo-card-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-inline-end: var( --kendo-card-avatar-spacing, #{$kendo-card-avatar-spacing} );
            width: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
            height: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
            flex-basis: var( --kendo-card-avatar-size, #{$kendo-card-avatar-size} );
        }
    }
    .k-card > .k-card-inner {
        @include border-radius( var( --kendo-card-inner-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

    // Card title
    .k-card-title {
        font-size: var( --kendo-card-title-font-size, #{$kendo-card-title-font-size} );
        font-family: var( --kendo-card-title-font-family, #{$kendo-card-title-font-family} );
        line-height: var( --kendo-card-title-line-height, #{$kendo-card-title-line-height} );
        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
        margin: 0 0 var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} );
    }


    // Card subtitle
    .k-card-subtitle {
        font-size: var( --kendo-card-subtitle-font-size, #{$kendo-card-subtitle-font-size} );
        font-family: var( --kendo-card-subtitle-font-family, #{$kendo-card-subtitle-font-family} );
        line-height: var( --kendo-card-subtitle-line-height, #{$kendo-card-subtitle-line-height} );
        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
        margin-block-end: var( --kendo-card-subtitle-margin-bottom, #{$kendo-card-subtitle-margin-bottom} );
    }

    @at-root .k-card-title + .k-card-subtitle {
        margin-block-start: calc( var( --kendo-card-title-margin-bottom, #{$kendo-card-title-margin-bottom} ) * -1 );
    }

    // Header
    .k-card-header {
        font-size: var( --kendo-card-header-font-size, #{$kendo-card-header-font-size} );
        font-family: var( --kendo-card-header-font-family, #{$kendo-card-header-font-family} );
        line-height: var( --kendo-card-header-line-height, #{$kendo-card-header-line-height} );
        font-weight: var( --kendo-card-title-font-weight, #{$kendo-card-title-font-weight} );
        margin: 0;
        padding-inline: var( --kendo-card-header-padding-x, #{$kendo-card-header-padding-x} );
        padding-block: var( --kendo-card-header-padding-y, #{$kendo-card-header-padding-y} );
        border-width: 0 0 var( --kendo-card-header-border-width, #{$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: 0;
        }
    }


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


    // Body
    .k-card-body {
        padding-inline: var( --kendo-card-body-padding-x, #{$kendo-card-body-padding-x} );
        padding-block: var( --kendo-card-body-padding-y, #{$kendo-card-body-padding-y} );
        outline: 0;
        flex: 1 1 auto;

        p {
            margin: var( --kendo-paragraph-margin, #{$kendo-paragraph-margin} );
        }

        > .k-last,
        > :last-child {
            margin-block-end: 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: var( --kendo-card-img-max-width, #{$kendo-card-img-max-width} );
        object-fit: cover;
    }

    // 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-inline: var( --kendo-card-actions-padding-x, #{$kendo-card-actions-padding-x} );
        padding-block: var( --kendo-card-actions-padding-y, #{$kendo-card-actions-padding-y} );
        border-width: var( --kendo-card-actions-border-width, #{$kendo-card-actions-border-width} );
        border-style: solid;
        border-color: inherit;
        overflow: hidden;
        display: flex;
        flex-shrink: 0;
        flex-basis: auto;
        gap: var( --kendo-card-actions-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-block-end: 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( var( --kendo-card-deck-scroll-button-radius, #{$kendo-card-deck-scroll-button-radius} ) );
            flex: 0 0 auto;
            position: absolute;
            z-index: 1;

            &:first-child {
                left: var( --kendo-card-deck-scroll-button-offset, #{$kendo-card-deck-scroll-button-offset} );
            }

            &:last-child {
                right: var( --kendo-card-deck-scroll-button-offset, #{$kendo-card-deck-scroll-button-offset} );
            }
        }

        > .k-card-deck {
            // hide scrollbar
            margin-block-end: -#{$kendo-scrollbar-width};
            padding-block-end: $kendo-scrollbar-width;
            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: var( --kendo-card-border-width, #{$kendo-card-border-width} );
        }


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

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

    .k-card-callout {
        margin: 0;
        width: var( --kendo-card-callout-size, #{$kendo-card-callout-size} );
        height: var( --kendo-card-callout-size, #{$kendo-card-callout-size} );
        border-width: var( --kendo-card-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( var( --kendo-card-shadow, #{$kendo-card-shadow} ) );
    }


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

}