@import '@project-one/components/lib/variables.scss';

.DigimapArchiveFlightTimeline {
    background-color: $darkGrey;
    padding-bottom: 0.5rem;
    position: relative;

    .digimap-App & {
        height: 2.5rem;
    }

    .digimap-MobileApp & {
        height: 2.75rem;
    }

    &-SliderWrapper {
        padding: 0.75rem 0;
        margin: -0.75rem 0;
        overflow: hidden;
    }

    &-ControlPanel {
        color: white;
        display: flex;
        align-items: center;

        .digimap-App & {
            height: 1.75rem;
            padding: 0 1rem 0 0.5rem;
        }

        .digimap-MobileApp & {
            height: 2rem;
            padding: 0 0.5rem;
        }
    }

    &-ControlPanelButton {
        margin: -0.375rem;

        &_off {
            color: $grey50Clear;
        }
    }

    &-PlayButton {
        margin-left: calc(0.75rem - 0.375rem);
    }

    &-Time {
        margin-left: 1.75rem;

        > * {
            display: inline-block;
        }
    }

    &-TimeFullDuration {
        color: $grey50Clear;
    }

    &-TimeCurrent {
        margin-left: 1.75rem;
        color: $grey50Clear;
    }

    &-TableButton {
        margin-left: auto;
    }

    &-ChartButton {
        margin-left: calc(1.5rem - 0.375rem);
    }

    &-DownloadButton {
        .digimap-App & {
            margin-left: calc(2.5rem - 0.375rem);
        }

        .digimap-MobileApp & {
            position: absolute;
            top: -2.5rem;
            right: 1rem;
        }
    }

    &-Slider {
        width: calc(100% - 2.9375rem - 0.375rem);
        margin: 0 0.375rem 0 2.9375rem;
        color: white;
        display: block;

        .MuiSlider-thumb {
            transform-origin: left top;
            transform: scale(0.5) translate(-50%, -50%);
        }

        &.MuiSlider-root {
            padding: 0;
        }
    }

    &-Toggles {
        position: absolute;
        top: -2.5rem;
        left: 1rem;
        right: 3.5rem;
        background-color: $white;

        .MuiToggleButton-root {
            text-transform: none;
        }
    }
}