/*
 * Copyright (c) Baidu, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import 'variable.less';
@import (reference) 'tokens.less';

.cosd-transport-ticket {
    position: relative;
    .cos-grid();
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    grid-template-rows: auto auto;
    .cos-items-start();
    box-sizing: border-box;
    width: 100%;
    .cos-color-text();
    .cos-space-p-sm();
    .cos-rounded-lg();
    .cos-no-underline();
    .cos-color-bg-dent();
    -webkit-tap-highlight-color: transparent;
    &:hover {
        .cos-no-underline();
        .cos-color-text();
    }
    &:visited {
        .cos-color-text();
    }
    &-item {
        .cos-flex();
        .cos-flex-col();
        .cos-space-mr-xs();
        min-width: 0;
    }
    &-from {
        grid-column: 1;
        &-time {
            width: 100%;
            font-size: var(--cos-text-headline);
            .cos-leading-none();
            .cos-font-medium();
            .cos-line-clamp-1();
        }
        &-location {
            width: 100%;
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-space-mt-xxs();
            .cos-line-clamp-1();
        }

    }
    &-duration {
        grid-column:3;
        .cos-items-center();
        .cos-text-center();
        &-time {
            width: 100%;
            .cos-color-text-minor();
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-line-clamp-1();
        }
        &-right {
            position: relative;
            width: 45px;
            height: 8px;
            background: url(//ms.bdstatic.com/se/static/ala_atom/assets/img/train_info_icon_0741fa3.png);
            background-repeat: no-repeat;
            -webkit-background-size: 100% 100%;
            background-size: 100%;
            .cos-space-mt-3xs();
        }
        &-number {
            width: 100%;
            .cos-color-text-minor();
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-line-clamp-1();
        }
        &-transfer {
            width: 100%;
            .cos-flex();
            .cos-flex-col();
            .cos-items-center();
            
            // 使用 margin-top 替代 gap 以提高兼容性
            > * {
                .cos-space-mt-xxs();
            }
            
            &-station-wrapper {
                width: 100%;
                .cos-flex();
                .cos-flex-row();
                .cos-items-center();
            }
            &-station-line {
                flex: 1;
                min-width: 15px;
                height: 1px;
                
                // 第一条线（左侧）：从右边（靠近徽章）透明到左边实色
                &:first-child {
                    background: linear-gradient(to right, rgba(220, 221, 224, 0), rgba(220, 221, 224, 1));
                }
                
                // 第二条线（右侧）：从左边（靠近徽章）透明到右边实色
                &:last-child {
                    background: linear-gradient(to left, rgba(220, 221, 224, 0), rgba(220, 221, 224, 1));
                }
            }
            &-station-badge {
                .cos-flex();
                .cos-items-center();
                .cos-justify-center();
                border: 1px solid var(--cos-color-border-tiny);
                padding: 1px var(--cos-space-3xs);
                font-size: var(--cos-text-caption);
                .cos-line-clamp-1();
                .cos-leading-none();
                .cos-rounded-xxs();
                .cos-color-text-minor();
                .cos-font-medium();
            }
            &-time {
                width: 100%;
                .cos-color-text-minor();
                font-size: var(--cos-text-caption);
                .cos-leading-none();
                .cos-line-clamp-1();
            }
        }
    }
    &-to {
        grid-column:5;
        align-items: flex-end;
        .cos-text-right();
        &-time {
            position: relative;
            width: 100%;
        }
        &-time-text {
            font-size: var(--cos-text-headline);
            .cos-leading-none();
            .cos-font-medium();
            .cos-line-clamp-1();
        }
        &-crossdays {
            position: absolute;
            top: 0;
            right: 0;
            font-size: 10px;
            .cos-color-text-minor();
            transform: translate(100%, -50%);
            .cos-leading-none();
        }
        &-location {
            width: 100%;
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-space-mt-xxs();
            .cos-line-clamp-1();
        }
    }
    &-seat {
        position: relative;
        grid-column: 1 / 6;
        .cos-space-mt-sm();
        .cos-space-mr-xs();
        &-scroll {
            .cos-flex();
            .cos-justify-between();
            overflow-x: scroll;
            overflow-y: hidden;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* Edge */
            &::-webkit-scrollbar {
                .cos-hidden(); /* Chrome/Safari/Opera */
            }
        }
        &-left-mask,
        &-right-mask {
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
            width: 12px;
            pointer-events: none;
        }
        &-left-mask {
            left: 0;
            background: linear-gradient(to right, var(--cos-color-bg-dent), transparent);
        }
        &-right-mask {
            right: 0;
            background: linear-gradient(to left, var(--cos-color-bg-dent), transparent);
        }
        &-item {
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-space-mr-xs();
            white-space: nowrap;
            &:last-child {
                .cos-space-mr-none();
            }
            &-level {
                .cos-space-mr-3xs();
            }
            &-remaining {
                .cos-color-text-on-success-light();
            }
            &-remaining-disabled {
                .cos-color-text-minor();
            }
        }
        &-item-hidden {
            .cos-invisible();
        }
    }
    &-descs {
        grid-column: 1 / 6;
        .cos-flex();
        .cos-space-mt-sm();
        &-item {
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-space-mr-xs();
            white-space: nowrap;
            &:last-child {
                .cos-space-mr-none();
                .cos-line-clamp-1();
            }
        }
    }
    &-transfer {
        position: relative;
        grid-column: 1 / 6;
        .cos-space-mt-sm();
        .cos-space-mr-xs();
        
        &-left-mask,
        &-right-mask {
            position: absolute;
            top: 0;
            bottom: 0;
            z-index: 1;
            width: 12px;
            pointer-events: none;
        }
        &-left-mask {
            left: 0;
            background: linear-gradient(to right, var(--cos-color-bg-dent), transparent);
        }
        &-right-mask {
            right: 0;
            background: linear-gradient(to left, var(--cos-color-bg-dent), transparent);
        }
        
        &-scroll {
            .cos-flex();
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none; /* Firefox */
            -ms-overflow-style: none; /* Edge */
            &::-webkit-scrollbar {
                .cos-hidden(); /* Chrome/Safari/Opera */
            }
        }
        
        &-train {
            .cos-flex-row();
            .cos-justify-between();
            
            > * {
                &:not(:last-child) {
                    .cos-space-mr-xs();
                }
            }
        }
        &-flight {
            display: block;
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-line-clamp-1();
            &-item {
                display: inline;
                .cos-color-text();
                
                &:not(:last-child) {
                    .cos-space-mr-xs();
                }
            }
        }
        &-segment {
            .cos-flex();
            white-space: nowrap;
            &-info {
                .cos-flex();
                .cos-flex-row();
                .cos-items-center();
            }
            &-number-wrapper {
                .cos-flex();
                .cos-flex-row();
                .cos-items-center();
                .cos-space-mr-xs();
            }
            &-badge {
                .cos-flex();
                .cos-items-center();
                .cos-justify-center();
                width: 12px;
                height: 12px;
                font-size: 8px;
                .cos-font-medium();
                .cos-leading-none();
                .cos-rounded-xxs();
                background-color: rgba(50, 84, 199, 0.09);
                .cos-color-text();
                .cos-space-mr-xxs();
            }
            &-number {
                font-size: var(--cos-text-caption);
                .cos-leading-none();
                .cos-color-text();
            }
            &-seats {
                .cos-flex();
                .cos-flex-row();
                .cos-items-center();
            }
            &-seat {
                .cos-flex();
                .cos-flex-row();
                .cos-items-center();
                .cos-space-mr-3xs();
                
                &:last-child {
                    .cos-space-mr-none();
                }
                
                &-type {
                    font-size: var(--cos-text-caption);
                    .cos-leading-none();
                    .cos-color-text();
                    .cos-space-mr-3xs();
                }
                &-remaining {
                    font-size: var(--cos-text-caption);
                    .cos-leading-none();
                    .cos-color-text-on-success-light();
                }
            }
        }
    }
    &-price {
        grid-column: 7;
        align-items: flex-end;
        .cos-text-right();
        .cos-space-mr-none();
        &-wrapper {
            width: 100%;
            .cos-text-right();
            .cos-line-clamp-1();
        }
        &-number {
            display: inline;
            font-size: var(--cos-text-headline);
            .cos-leading-none();
            .cos-font-medium();
            .cos-color-text-on-alive-light();
            font-family: BaiduNumberPlus, -apple-system, Arial, sans-serif;
        }
        &-prefix,
        &-suffix {
            display: inline;
            .cos-space-ml-3xs();
            font-size: var(--cos-text-subtitle-sm);
            .cos-leading-none();
            .cos-color-text-on-alive-light();
        }
        &-prefix {
            .cos-font-medium();
            .cos-space-ml-none();
        }
        &-discount {
            width: 100%;
            font-size: var(--cos-text-caption);
            .cos-leading-none();
            .cos-space-mt-xxs();
            .cos-line-clamp-1();
        }
    }
    &-service {
        grid-column: 7;
        font-size: var(--cos-text-caption);
        text-align: right;
        .cos-color-text-minor();
        .cos-space-mt-sm();
        .cos-leading-none();
        .cos-line-clamp-1();
    }
}
.cosd-transport-ticket-active {
    &:active {
        .cos-opacity-20();
    }
}