@use 'typography' as typography;

@keyframes show-label {
    100% {
        opacity: 1;
    }
}

.webgl-axis {
    position: relative;
    z-index: 9;
}

.axis-major, .axis-minor {
    overflow: hidden;
    position: relative;
    width: 100%;
    background-color: var(--timeline-bg);
    height: 26px;
}

d3fc-svg {
    &.x-axis {
        // this is webgl's native axis
        // need to be rendered but not visible
        visibility: hidden !important;
        height: 0 !important;
    }

    &.svg-axis-major, &.svg-axis-minor {
        width: 100%;
        position: relative;
        display: block;
        height: 26px;

        & svg {
            display: inline-block;
            left: 0;
            position: absolute;
            overflow: visible;
            height: 100%;
            width: 100%;

            & path.domain {
                stroke: transparent;
            }

            & g.tick {
                @include typography.regular14nocolor;
                text-anchor: start;
                animation: show-label cubic-bezier(0.38, 0.97, 0.56, 0.76);
                animation-fill-mode: forwards;
                animation-delay: 100ms;
                animation-duration: 600ms;

                opacity: 0;
                // remove transform for just a fade-in
                //transform: rotateX(-90deg);
                //transform-origin: top center;

                text {
                    transform: translate(8px, 8px);
                    fill: var(--timeline-major-color);
                }

                path {
                    stroke: var(--timeline-tick-color);
                }
            }
        }
    }
}