@import "../settings/_mixins";
@import "../settings/_variables";

.dnetor-timeline {
    --line-backgroud-color: var(--e-global-color-accent);
    position: relative;
    display: grid;
    padding-bottom: 30px;

    .timeline-item {
        position: relative;
        .timeline-time {
            font-size: 1.2em;
            font-weight: bold;
            margin-bottom: 8px;
            color: var(--e-global-color-accent);
        }
        .timeline-title {
            font-size: 2em;
            font-weight: bold;
            margin-bottom: 18px;
        }
        margin-bottom: -30px;
    }

    .timeline-line {
        position: absolute;
        height: 100%;
        width: 3px;
        background: var(--line-backgroud-color);
        top: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .timeline-card {
        position: relative;
        width: 40%;
        padding: 0px 17px;
        border-radius: 5px;
        background: #f9f9f9;
        padding: 40px;

        &.item-left {
            .timeline-triangle {
                position: absolute;
                top: 50%;
                right: -24px;
                transform: translateY(-50%);
                width: 0;
                height: 0;
                border-top: 20px solid transparent;
                border-left: 25px solid #f9f9f9;
                border-bottom: 20px solid transparent;
            }
        }

        &.item-right {
            .timeline-triangle {
                position: absolute;
                width: 0;
                height: 0;
                top: 50%;
                left: -24px;
                transform: translateY(-50%);
                border-top: 20px solid transparent;
                border-right: 25px solid #f9f9f9;
                border-bottom: 20px solid transparent;
            }

            left: 60%;
        }
    }

    &.dnetor-timeline-dot-position-top {
        .timeline-card {
            .timeline-triangle {
                top: 0;
                transform: none;
            }
        }
    }
    &.dnetor-timeline-dot-position-bottom {
        .timeline-card {
            .timeline-triangle {
                bottom: 0;
                top: unset;
                transform: none;
            }
        }
    }

    .timeline-content {
        p {
            margin-bottom: 0;
        }
    }
    .timeline-dot {
        position: absolute;
        left: 50%;
        @include transform(translateX(-50%));
        width: 30px;
        height: 30px;
        background: white;
        border-radius: 50%;
        z-index: 1;
        border: 2px solid var(--e-global-color-accent);
        @include d-flex();
        justify-content: center;
        align-items: center;

        .time-line-dot-cricle {
            background: var(--e-global-color-accent);
            width: 14px;
            height: 14px;
            @include d-flex();
            border-radius: 50%;
        }
    }

    .timeline-icon-node {
        @include transform(translateX(-50%));
    }

    &.dnetor-timeline-dot-position-top {
        .timeline-dot,
        .timeline-icon-node {
            top: 0;
        }
        &.dnetor-timline-style-02 {
            .timeline-time {
                top: 0;
            }
        }
    }

    &.dnetor-timeline-dot-position-center {
        .timeline-dot,
        .timeline-icon-node {
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &.dnetor-timline-style-02 {
            .timeline-time {
                top: 50%;
                @include transform(translateY(-50%));
            }
        }
    }

    &.dnetor-timeline-dot-position-bottom {
        .timeline-dot,
        .timeline-icon-node {
            bottom: 0;
        }
        &.dnetor-timline-style-02 {
            .timeline-time {
                bottom: 0;
            }
        }
    }

    &.dnetor-timeline-type-dashed {
        .timeline-line {
            background: repeating-linear-gradient(
                to bottom,
                transparent,
                transparent 7px,
                var(--line-backgroud-color) 7px,
                var(--line-backgroud-color) 22px
            );
        }
    }

    &.dnetor-timeline-type-solid {
        .timeline-line {
            background: var(--line-backgroud-color);
        }
    }

    .timeline-icon-node {
        position: absolute;
        left: 50%;
        font-size: 35px;
        border-radius: 50%;
        background: white;
        z-index: 1;
    }

    &.dnetor-timline-style-02 {
        padding-bottom: 0;
        .timeline-time {
            position: absolute;
            left: 0;
            z-index: 1;
            margin-bottom: 0;
        }

        .timeline-dot,
        .timeline-icon-node {
            left: 20%;
        }

        .timeline-line {
            left: 20%;
        }

        .timeline-item {
            margin-bottom: 20px;
        }

        .timeline-card {
            width: 70%;
            left: 30%;

            &.item-left {
                .timeline-triangle {
                    position: absolute;
                    width: 0;
                    height: 0;
                    top: 50%;
                    left: -24px;
                    right: unset;
                    border-left: unset;
                    transform: translateY(-50%);
                    border-top: 20px solid transparent;
                    border-right: 25px solid #f9f9f9;
                    border-bottom: 20px solid transparent;
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .dnetor-timeline {
        padding-bottom: 0;
        .timeline-line {
            left: 7%;
        }

        .timeline-dot,
        .timeline-icon-node {
            left: 7%;
        }

        .timeline-item {
            margin-bottom: 20px;
        }

        .timeline-card {
            width: 80%;
            left: 20% !important;

            &.item-left {
                .timeline-triangle {
                    position: absolute;
                    width: 0;
                    height: 0;
                    top: 50%;
                    left: -24px;
                    right: unset;
                    border-left: unset;
                    transform: translateY(-50%);
                    border-top: 20px solid transparent;
                    border-right: 25px solid #f9f9f9;
                    border-bottom: 20px solid transparent;
                }
            }
        }
        &.dnetor-timline-style-02 {
            .timeline-time {
                left: 2px;
            }

            padding-bottom: 0;
            .timeline-line {
                left: 20%;
            }

            .timeline-dot,
            .timeline-icon-node {
                left: 20%;
            }

            .timeline-item {
                margin-bottom: 20px;
            }

            .timeline-card {
                width: 75%;
                left: 25% !important;
            }
        }
    }
}