/* CSS shared by all themes */

.underline {
    text-decoration: underline;
}

svg.sn-flow-chart {
    width: auto;
    height: 300px;
}

@media (max-width: 576px) {
    svg.sn-flow-chart {
        display: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    svg.sn-flow-chart {
        --time: 1.5s;
    }

    svg.sn-flow-chart .specification {
        animation: move-spec var(--time) ease-in-out forwards;
    }

    svg.sn-flow-chart .implementation {
        animation: move-impl var(--time) ease-in-out forwards;
    }

    svg.sn-flow-chart .testcase1,
    svg.sn-flow-chart .testcase2 {
        animation: move-test var(--time) ease-in-out forwards;
    }

    svg.sn-flow-chart path.arrow.req-spec {
        animation: move-arrow-req-spec var(--time) ease-in-out forwards, show-arrow var(--time) cubic-bezier(0.6, 0, 1.0, 1.0) forwards;
    }

    svg.sn-flow-chart path.arrow.spec-impl {
        animation: move-arrow-spec-impl var(--time) ease-in-out forwards, show-arrow var(--time) cubic-bezier(0.6, 0, 1.0, 1.0) forwards;
    }

    svg.sn-flow-chart path.arrow.impl-test1,
    svg.sn-flow-chart path.arrow.impl-test2 {
        animation: move-arrow-impl-test var(--time) ease-in-out forwards, show-arrow var(--time) cubic-bezier(0.6, 0, 1.0, 1.0) forwards;
    }
}

@keyframes move-arrow-req-spec {
    from {
        transform: translateY(-20px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes move-spec {
    from {
        transform: translateY(-40px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes move-arrow-spec-impl {
    from {
        transform: translateY(-60px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes move-impl {
    from {
        transform: translateY(-80px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes move-arrow-impl-test {
    from {
        transform: translateY(-100px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes move-test {
    from {
        transform: translateY(-120px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes show-arrow {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Make the grid examples easier to see */
.needs-grid-example {
    width: 100% !important;
}

table.needs-grid-example {
    border: 1px solid var(--color-table-border);
}

:root {
    --sn-architecture-bg: url(../architecture_bg-light.png);
}

.architecture-bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-image: var(--sn-architecture-bg);
}

.needs-example {
  padding-left: .6em !important;
  border-left: .2rem solid var(--sn-color-docs-example, green) !important;
  border-radius: 3px !important;
  margin-top: 1.5em !important;
  margin-bottom: 1.5em !important;
}