/*
 * Copyright 2018-2020 DITA (AM Consulting LLC)
 *
 * 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.
 *
 * Developed on behalf of: DITA
 * Licensed to: Bibliotheca LLC, Bokbasen AS and CAST under one or more contributor license agreements.
 */

 @media only screen and (max-width: 600px) {
    .timeline, .scrubber > input {
        display: none;
    }
}
.scrubber {
    flex-grow: 1;
    padding-right: 20px;
    padding-left: 20px;
}
.timeline {
    position: fixed;
    top: 1.5rem;
    left: 2.5rem;
    bottom: 1.5rem;
    width: 1.25rem;
    display: flex;
    flex-direction: column;
    .chapter {
        border-left: 6px solid transparent;
        transition: border-color 300ms ease-out;
        background: $ui-light-gray;
        border: 1px solid $ui-white;
        border-radius: 5px;
        position: relative;
        &:hover {
            background-color: $ui-light-gray;
            .chapter-tooltip {
            display: block;
            }
        }
        &.active {
            background-color: $ui-default;
        }
    }
    .chapter-tooltip {
        display: none;
        position: absolute;
        left: 2rem;
        top: 50%;
        transform: translate(0,-50%);
        background: $ui-light-gray;
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 22rem;
    }
}
[data-viewer-theme="night"] {
    .timeline {
        .chapter {
            border: 1px solid $ui-black;
        }
    }
}
[data-viewer-theme="sepia"] {
    .timeline {
        .chapter {
            border: 1px solid $sepia-bg;
        }
    }
}


