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

@mixin kendo-timeline--layout() {

    .k-timeline {
        box-sizing: border-box;
        outline: 0;
        font-family: var( --kendo-timeline-font-family, #{ $kendo-timeline-font-family } );
        font-size: var( --kendo-timeline-font-size, #{ $kendo-timeline-font-size } );
        line-height: var( --kendo-timeline-line-height, #{ $kendo-timeline-line-height } );
        display: block;
        background-color: transparent;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $kendo-color-rgba-transparent;

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

        ul {
            margin: 0 0 1px;
            padding: 0;

            li {
                list-style-type: none;
            }
        }

        .k-timeline-flag {
            display: inline-block;
            text-align: center;
            padding-block: var( --kendo-timeline-flag-padding-y, #{ $kendo-timeline-flag-padding-y} );
            padding-inline: var( --kendo-timeline-flag-padding-x, #{ $kendo-timeline-flag-padding-x } );
            border-radius: var( --kendo-timeline-flag-border-radius, #{ $kendo-timeline-flag-border-radius } );
            line-height: var( --kendo-timeline-flag-line-height, #{ $kendo-timeline-flag-line-height } );
            min-width: var( --kendo-timeline-flag-min-width, #{ $kendo-timeline-flag-min-width } );
            max-width: var( --kendo-timeline-flag-max-width, #{ $kendo-timeline-flag-max-width } );
            position: relative;
            z-index: 1;
        }

        .k-timeline-circle {
            width: var( --kendo-timeline-circle-width, #{ $kendo-timeline-circle-width } );
            height: var( --kendo-timeline-circle-height, #{ $kendo-timeline-circle-height } );
            border-radius: 50%;
            flex-shrink: 0;
            position: relative;
            z-index: 1;
        }

        &.k-timeline-dates-hidden {
            .k-timeline-date {
                display: none;
            }
        }

        &.k-timeline-collapsible {
            .k-card-header {
                cursor: pointer;
            }

            .k-event-collapse {
                display: flex;
            }
        }
    }

    .k-timeline-card {
        .k-card {
            position: relative;
            overflow: visible;

            .k-card-header {
                overflow: visible;
                border-bottom: 0;
            }

            .k-card-header + .k-card-body {
                padding-block-start: 0;
            }

            .k-card-body {
                overflow-y: auto;

                // Scrollbar styles for Mozilla
                scrollbar-width: thin;

                // Scrollbar styles for Chrome, Safari and Opera
                &::-webkit-scrollbar {
                    width: 5px;
                }

                &::-webkit-scrollbar-thumb {
                    border-radius: var( --kendo-timeline-flag-border-radius, #{ $kendo-timeline-flag-border-radius } );
                }
            }
        }

        .k-timeline-card-callout {
            &.k-callout-w,
            &.k-callout-e {
                top: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
            }
        }
    }

    .k-timeline-vertical,
    .k-timeline-horizontal {
        padding-block: 0;
        padding-inline: var( --kendo-timeline-spacing-x, #{ $kendo-timeline-spacing-x } );
        margin-block: var( --kendo-timeline-spacing-y, #{ $kendo-timeline-spacing-y } );
        margin-inline: 0;
        width: 100%;
        position: relative;
        border: 0;
    }

    .k-timeline-vertical,
    .k-timeline-horizontal .k-timeline-track-wrap {
        &::after {
            content: "";
            position: absolute;
            top: 0;
            border-width: var( --kendo-timeline-track-border-width, #{ $kendo-timeline-track-border-width } );
            border-style: solid;
        }
    }

    .k-timeline-vertical {
        padding-inline-start: var( --kendo-timeline-vertical-padding-with-dates-calc, #{ $kendo-timeline-vertical-padding-with-dates-calc } );

        &.k-timeline-dates-hidden {
            padding-inline-start: var( --kendo-timeline-vertical-padding-calc, #{ $kendo-timeline-vertical-padding-calc } );
        }

        &::after {
            height: 100%;
            width: var( --kendo-timeline-track-size, #{ $kendo-timeline-track-size } );
            transform: translateX(-50%);
            border-radius: var( --kendo-timeline-vertical-border-radius, #{ $kendo-timeline-vertical-border-radius } );
        }

        .k-timeline-flag-wrap {
            display: flex;
            align-items: center;

            &:first-child {
                padding-block-start: var( --kendo-timeline-spacing-y, #{ $kendo-timeline-spacing-y} );
            }
        }

        .k-timeline-flag {
            transform: translateX(-50%);
        }

        .k-timeline-date-wrap {
            position: absolute;
            padding-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );
            margin-block-start: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
            transform: translate(-100%, -50%);
            text-align: end;
        }

        .k-timeline-event {
            display: flex;
            align-items: flex-start;
            padding-inline: 0;
            padding-block: var( --kendo-timeline-spacing-y, #{ $kendo-timeline-spacing-y} );
        }

        .k-timeline-card {
            padding-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );

            .k-card {
                margin-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );
                min-height: var( --kendo-timeline-event-min-height-calc, #{ $kendo-timeline-event-min-height-calc} );
                width: var( --kendo-timeline-event-width, #{ $kendo-timeline-event-width } );
                max-width: 100%;

                .k-card-header {
                    border-radius: 0; // In vertical collapsed mode there shold be a bottom border radius
                }

                .k-card-title {
                    display: flex;
                    justify-content: space-between;

                    .k-event-title {
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }

                }
            }

            .k-event-collapse {
                margin-block: calc( var( --kendo-timeline-icon-spacing, #{ $kendo-timeline-icon-spacing } ) * -1);
                margin-inline: 0;
                transform: rotate(90deg);
                transition: transform .2s ease-in-out;
            }

            &.k-collapsed {
                .k-card-body,
                .k-card-actions {
                    display: none;
                }

                .k-event-collapse {
                    transform: rotate(0deg);
                }
            }

        }

        .k-timeline-circle {
            margin-block-start: var( --kendo-timeline-track-event-offset, #{ $kendo-timeline-track-event-offset } );
            margin-inline-end: calc( -1 * var( --kendo-timeline-circle-width, #{ $kendo-timeline-circle-width} ) / 2);
            transform: translate(-50%, -50%);
        }

        &.k-timeline-alternating {
            padding-inline-start: var( --kendo-timeline-spacing-x, #{ $kendo-timeline-spacing-x } );

            &::after {
                left: 50%;
            }

            .k-timeline-flag-wrap {
                justify-content: center;
            }

            .k-timeline-flag {
                transform: translateX(0);
            }

            .k-timeline-event {
                justify-content: space-between;

                &.k-reverse {
                    flex-direction: row-reverse;

                    .k-timeline-date-wrap {
                        text-align: start;
                        padding-inline-end: 0;
                        padding-inline-start: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding } );
                    }

                    .k-timeline-card {
                        padding-inline-start: 0;
                        padding-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );

                        .k-card {
                            margin-inline-start: auto;
                            margin-inline-end: var( --kendo-timeline-items-padding, #{ $kendo-timeline-items-padding} );
                        }
                    }
                }
            }

            .k-timeline-card,
            .k-timeline-date-wrap {
                flex-basis: 50%;
                min-width: 0;
            }

            .k-timeline-date-wrap {
                position: static;
                transform: translateY(-50%);
            }

            .k-timeline-circle {
                transform: translateY(-50%);
                margin-right: 0;
            }
        }
    }

    .k-timeline-horizontal {

        .k-timeline-track-item {
            flex: 1 0 20%; // 20% are default, this will be calculated when rendered
            display: flex;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            flex-direction: column;

            &:hover {
                cursor: pointer;
            }

            &.k-timeline-flag-wrap:hover {
                cursor: default;
            }
        }

        .k-timeline-date-wrap {
            margin-block-start: auto;
            margin-block-end: var( --kendo-timeline-date-margin-bottom, #{ $kendo-timeline-date-margin-bottom } );
        }

        .k-timeline-card {
            height: 100%;
            padding-inline: .5em;
        }

        .k-card {
            max-height: 100%;
        }

        .k-timeline-events-list {
            overflow-x: hidden;
            padding-block-start: var( --kendo-timeline-track-margin-bottom, #{ $kendo-timeline-track-margin-bottom} );

            .k-timeline-scrollable-wrap {
                position: relative;
                height: var( --kendo-timeline-event-height, #{ $kendo-timeline-event-height } );

                .k-timeline-event {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .k-timeline-track-wrap {
            position: relative;
            padding-block: calc( var( --kendo-timeline-track-arrow-height, #{ $kendo-timeline-track-arrow-height } ) / 2 );
            padding-inline: 0;

            &::after {
                inset-block-start: auto;
                inset-block-end: var( --kendo-timeline-track-bottom-calc, #{ $kendo-timeline-track-bottom-calc } );
                inset-inline-start: var( --kendo-timeline-track-start-calc, #{ $kendo-timeline-track-start-calc } );
                inset-inline-end: var( --kendo-timeline-track-end-calc, #{ $kendo-timeline-track-end-calc } );
                transform: translateY(-50%);
                height: var( --kendo-timeline-track-size, #{ $kendo-timeline-track-size } );
            }

            .k-timeline-track {
                overflow: hidden;
                margin-block: 0;
                margin-inline: var( --kendo-timeline-track-arrow-width, #{ $kendo-timeline-track-arrow-width } );
                position: relative;
                z-index: 2;

                .k-timeline-scrollable-wrap {
                    transition: transform 1s ease-in-out;
                }
            }

            .k-timeline-flag {
                margin-block-end: var( --kendo-timeline-flag-margin-bottom-calc, #{ $kendo-timeline-flag-margin-bottom-calc } );
                position: relative;
                min-width: var( --kendo-timeline-horizontal-flag-min-width, #{ $kendo-timeline-horizontal-flag-min-width } );

                &::after {
                    content: "";
                    width: var( --kendo-timeline-flag-callout-width, #{ $kendo-timeline-flag-callout-width } );
                    height: var( --kendo-timeline-flag-callout-height, #{ $kendo-timeline-flag-callout-height } );
                    position: absolute;
                    left: 50%;
                    bottom: 0;
                    transform: translate(-50%, 50%) rotate(45deg);
                }
            }
        }

        .k-timeline-scrollable-wrap {
            padding-bottom: var( --kendo-timeline-track-wrap-padding-bottom, #{ $kendo-timeline-track-wrap-padding-bottom } );
            display: flex;
            outline: 0;
        }
    }

    .k-timeline-arrow {
        width: var( --kendo-timeline-track-arrow-width, #{ $kendo-timeline-track-arrow-width } );
        height: var( --kendo-timeline-track-arrow-height, #{ $kendo-timeline-track-arrow-height } );
        border-radius: 50%;
        position: absolute;
        inset-block-end: var( --kendo-timeline-arrow-inset-block-end, #{ $kendo-timeline-arrow-inset-block-end } );
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .k-timeline-arrow-left {
        inset-inline-start: 0;
    }

    .k-timeline-arrow-right {
        inset-inline-end: 0;
    }

    .k-timeline-mobile {
        padding-block: 0;
        padding-inline: var( --kendo-timeline-mobile-spacing-x, #{ $kendo-timeline-mobile-spacing-x } );
        margin-block: var( --kendo-timeline-mobile-spacing-y, #{ $kendo-timeline-mobile-spacing-y } );
        margin-inline: 0;

        .k-timeline-flag {
            max-width: var( --kendo-timeline-mobile-flag-max-width, #{ $kendo-timeline-mobile-flag-max-width } );
        }

        &.k-timeline-horizontal {
            .k-timeline-flag-wrap {
                display: none;
            }
        }

        &.k-timeline-vertical {
            padding-inline-start: var( --kendo-timeline-mobile-vertical-padding-with-dates-calc, #{ $kendo-timeline-mobile-vertical-padding-with-dates-calc } );

            &.k-timeline-dates-hidden {
                padding-inline-start: var( --kendo-timeline-mobile-vertical-padding-calc, #{ $kendo-timeline-mobile-vertical-padding-calc } );
            }

            &.k-timeline-alternating {
                padding-inline-start: var( --kendo-timeline-mobile-spacing-x, #{ $kendo-timeline-mobile-spacing-x } );
            }

            .k-timeline-card {
                width: 100%;


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