@use "sass:math";
@use "../../color-system/_constants.scss" as *;
@use "../../border-radii/index.scss" as *;
@use "../icons/_variables.scss" as *;
@use "./variables.scss" as *;
@use "../card/_variables.scss" as *;
@use "../../z-index/index.scss" as *;
@use "../../motion/index.scss" as *;

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

    .k-timeline {
        box-sizing: border-box;
        outline: 0;
        font-family: $kendo-timeline-font-family;
        font-size: $kendo-timeline-font-size;
        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;
            padding: 0;

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

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

        .k-timeline-circle {
            width: $kendo-timeline-circle-width;
            height: $kendo-timeline-circle-height;
            border-radius: 50%;
            flex-shrink: 0;
            position: relative;
            z-index: k-z-index("base", 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-block-end: 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: k-border-radius(md);
                }
            }
        }

        .k-timeline-card-callout {
            &.k-callout-w,
            &.k-callout-e {
                inset-block-start: $kendo-timeline-track-event-offset;
            }
        }
    }

    .k-timeline-vertical,
    .k-timeline-horizontal {
        padding-block: 0;
        padding-inline: $kendo-timeline-spacing-x;
        margin-block: $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;
            inset-block-start: 0;
            border-width: $kendo-timeline-track-border-width;
            border-style: solid;
        }
    }

    .k-timeline-vertical {
        padding-inline-start: $kendo-timeline-vertical-padding-with-dates-calc;

        &.k-timeline-dates-hidden {
            padding-inline-start: $kendo-timeline-vertical-padding-calc;
        }

        &::after {
            height: 100%;
            width: $kendo-timeline-track-size;
            transform: translateX(-50%);
            border-radius: k-border-radius(lg);
        }

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

            &:first-child {
                padding-block-start: $kendo-timeline-spacing-y;
            }
        }

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

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

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

        .k-timeline-card {
            padding-inline-start: $kendo-timeline-items-padding;

            .k-card {
                margin-inline-start: $kendo-timeline-items-padding;
                min-height: $kendo-timeline-event-min-height-calc;
                width: $kendo-timeline-event-width;
                max-width: 100%;

                .k-card-header {
                    border-radius: $kendo-card-border-radius; // 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-inline: 0;
                transform: rotate(90deg);
                transition: transform k-transition(subtle);
            }

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

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

        }

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

        &.k-timeline-alternating {
            padding-inline-start: $kendo-timeline-spacing-x;

            &::after {
                inset-inline-start: 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: $kendo-timeline-items-padding;
                    }

                    .k-timeline-card {
                        padding-inline-start: 0;
                        padding-inline-end: $kendo-timeline-items-padding;

                        .k-card {
                            margin-inline-end: $kendo-timeline-items-padding;
                            margin-inline-start: auto;
                        }
                    }
                }
            }

            .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-inline-end: 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: $kendo-timeline-date-margin-bottom;
        }

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

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

        .k-timeline-events-list {
            overflow-x: hidden;
            padding-block-start: $kendo-timeline-track-margin-bottom;

            .k-timeline-scrollable-wrap {
                position: relative;
                height: $kendo-timeline-event-height;

                .k-timeline-event {
                    position: absolute;
                    inset-block-start: 0;
                    inset-inline-start: 0;
                    width: 100%;
                    height: 100%;
                }
            }
        }

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

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

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

                .k-timeline-scrollable-wrap {
                    transition: transform k-duration(sluggish) k-easing(standard);
                }
            }

            .k-timeline-flag {
                margin-block-end: $kendo-timeline-flag-margin-bottom-calc;
                position: relative;
                min-width: $kendo-timeline-horizontal-flag-min-width;

                &::after {
                    content: "";
                    width: $kendo-timeline-flag-callout-width;
                    height: $kendo-timeline-flag-callout-height;
                    position: absolute;
                    inset-inline-start: 50%;
                    inset-block-end: 0;
                    transform: translate(-50%, 50%) rotate(45deg);
                }
            }
        }

        .k-timeline-scrollable-wrap {
            padding-block-end: $kendo-timeline-track-wrap-padding-bottom;
            display: flex;
            outline: 0;
        }
    }

    .k-timeline-arrow {
        width: $kendo-timeline-track-arrow-width;
        height: $kendo-timeline-track-arrow-height;
        border-radius: 50%;
        position: absolute;
        inset-block-end: calc(#{$kendo-timeline-track-size} + #{$kendo-timeline-track-wrap-padding-bottom} + 2 * #{$kendo-timeline-track-border-width});
        z-index: k-z-index("base", 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: $kendo-timeline-mobile-spacing-x;
        margin-block: $kendo-timeline-mobile-spacing-y;
        margin-inline: 0;

        .k-timeline-flag {
            max-width: $kendo-timeline-mobile-flag-max-width;
        }

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

        &.k-timeline-vertical {
            padding-inline-start: $kendo-timeline-mobile-vertical-padding-with-dates-calc;

            &.k-timeline-dates-hidden {
                padding-inline-start: $kendo-timeline-mobile-vertical-padding-calc;
            }

            &.k-timeline-alternating {
                padding-inline-start: $kendo-timeline-mobile-spacing-x;
            }

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


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

}