/**
 * @license chowa v1.1.3
 *
 * Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */
@import "../../styles/variables.scss";

.#{$prefix}timeline {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: $base-padding * 1.2;
    list-style: none;
    font-size: $font-size-base;
    color: $text-color-gray;
}

.#{$prefix}timeline-item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    &:not(:last-child) {
        padding-bottom: $base-padding * 1.8;

        &:before {
            content: '';
            position: absolute;
            width: 2px;
            height: 100%;
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-color: $border-color;
            top: 16px;
            z-index: 1;
        }
    }
}

.#{$prefix}timeline-item-header {
    overflow: hidden;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 22px;
    width: 22px;
}

.#{$prefix}timeline-item-dot {
    border-radius: 50%;
    background-color: $primary-color;
    border: 2px solid $background-color-light;
    flex: none;
    width: 10px;
    height: 10px;
    margin: 0;
    padding: 0;
    display: inline-block;
}

.#{$prefix}timeline-item-icon {
    width: $font-size-base + 4px;
    height: $font-size-base + 4px;
    border-radius: 50%;
    margin: 0;
    padding: 0;
    background-color: $background-color-light;
    text-align: center;
    line-height: $font-size-base + 4px;
}

.#{$prefix}timeline-item-content {
    margin: 0;
    padding: 0 ($base-padding * 0.6);
    box-sizing: border-box;
    flex: auto;
    line-height: $line-height-base;
}

.#{$prefix}timeline-item-left {
    &:before {
        left: 10px;
    }

    .#{$prefix}timeline-item-content {
        text-align: left;
    }
}

.#{$prefix}timeline-item-right {
    flex-direction: row-reverse;

    &:before {
        right: 10px;
    }

    .#{$prefix}timeline-item-content {
        text-align: right;
    }
}

.#{$prefix}timeline-alternate {
    .#{$prefix}timeline-item-left {
        padding-left: 11px;
        margin-left: 50%;

        .#{$prefix}timeline-item-header {
            position: absolute;
            top: 0;
            left: -11px;
            z-index: 5;
        }

        &:not(:last-child):before {
            left: -1px;
        }
    }

    .#{$prefix}timeline-item-right {
        margin-right: 50%;
        padding-right: 11px;

        .#{$prefix}timeline-item-header {
            position: absolute;
            top: 0;
            right: -11px;
            z-index: 5;
        }

        &:not(:last-child):before {
            right: -1px;
        }
    }
}