@import '../../../common/variables';

.be-timeline {
    display: flex;
    flex-direction: column;
    margin: 15px 0 0;
    color: $bdl-gray-62;
    font-size: 12px;

    &:last-child {
        padding-bottom: 5px;
    }

    .be-timeline-label {
        padding-bottom: 6px;
    }

    .be-timeline-line-wrapper {
        position: relative;
        flex: 1;
        height: 6px;
    }

    .be-timeline-line {
        position: absolute;
        width: 290px; // match with timeslice.js
        height: 6px;
        background-color: $blue;
        border-radius: 6px;
        opacity: .25;
    }

    .be-timeline-btns {
        margin-top: 10px;

        button:last-child {
            margin-left: 10px;
        }

        .btn-plain:hover svg path {
            fill: $bdl-gray;
        }
    }
}