@use './src/styles/colors' as *;
@use './src/styles/fonts' as *;
@use './src/styles/variables' as *;
@use './src/styles/layouts' as *;

:host {
    display: flex;

    .time-line-station {
        flex: 1 1 auto;
    }

    station.time-line-station {
        width: 100px;
    }

    .k-timeline-content {
        flex: 1;
        max-width: 100%;
        padding: $space-xl;

        @include v-spacing($space-xl);
    }
    .k-timeline {
        display: flex;
        justify-content: space-between;

        @include h-spacing($space-s);

        .time-line-station--change {
            text-align: center;
        }
    }

    .k-timeline-section {
        flex: 1;
        display: flex;
        position: relative;

        .k-timeline-duration {
            position: absolute;
            left: 50%;
            top: 24px;
            transform: translateX(-50%);
        }
    }

    .k-separator {
        flex: 1;
        height: 1px;
        margin-top: 11px;

        background-color: $border;
    }

    section-number {
        margin-top: 2px;
    }

    transfer-time {
        margin-top: 5px;
    }

    .k-timeline-point {
        display: flex;
        font-size: $font-size-xl1;
        background: $white;
        @include h-spacing($space-s);
        .k-separator {
            min-width: $space-s;
        }
    }

    .k-timeline-navigation {
        //transform: rotate(90deg);
        align-self: stretch;
        cursor: pointer;
        display: flex;
        align-items: center;
        padding: 0 $space-xl;

        &[role='previous'] {
            margin-right: -$space-xl;
            &:hover {
                background-image: linear-gradient(to left, rgba(255, 0, 0, 0), rgba($blue-light, 0.2));
            }
            ::ng-deep svg {
                transform: rotate(-90deg);
            }
        }
        &[role='next'] {
            margin-left: -$space-xl;
            &:hover {
                background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba($blue-light, 0.2));
            }
            ::ng-deep svg {
                transform: rotate(90deg);
            }
        }
    }

    .timeline-duration--specifying {
        color: $orange;
    }
}
