@import "shared/mixins-and-vars";

figure,
[role="figure"] {
    display: table;
    margin: 40px auto 0 auto;
    padding: 1em;
    border: solid 1px #ccc;
    // background: #ffffcc;

    &:has(.showcode) {
        padding: 0;

        code {
            max-width: calc(100vw - 40px);
        }
    }

    img {
        max-width: 100%;
    }

    figcaption,
    span {
        text-align: center;
        font-family: "Times New Roman", Times, serif;
        font-style: italic;
        display: table-caption;
        caption-side: bottom;
        margin-bottom: 2rem;
        margin-top: 1rem;
        a {
            color: @orange;

            .enable__is-dark-mode & {
                color: @light-orange;

                .enable__is-dark-mode & {
                    color: @orange;
                }
            }
        }
    }

    code {
        display: block;
        padding: 1em;
        background: @color-background-term-code;
        color: @color-term-code;
        width: 100%;
    }

    &.wide {
        width: 100%;
    }

    &.centered-image img {
        display: block;
        margin: 0 auto;
    }
}

a.tile-cta {
    @height: (30 / @px);

    display: block;
    padding: 0 20px 0 30px;
    border-radius: (@height / 2);
    color: white;
    background-color: rgb(48, 48, 248);
    width: fit-content;
    line-height: @height;
    text-decoration: none;
    position: relative;
    margin: 30px auto;

    &::after {
        content: url("../images/chevron-right.svg");
        filter: invert();
        transform: scale(0.8) translateY((6 / @px));
        display: inline-block;
    }
}

.video-figure {
    display: block;

    .able-timer,
    .able-speed,
    .able-status,
    .able-elapsedTime,
    .able-duration,
    .able-right-controls span {
        margin-top: 0px;
        margin-bottom: 0px;
        display: inline-block;
        font-family: "Helvetica", "Arial", sans-serif;
    }

    & &__caption {
        margin-bottom: 0;
        display: block;
    }

    .able-status-bar {
        font-family: "Helvetica", "Arial", sans-serif;
    }

    .able-status-bar {
        height: 1.5em;
        min-height: 1.5em;
    }
    .able-status {
        text-align: right;
    }
}

.enable__is-dark-mode {
    figure,
    [role="figure"] {
        // background: #555;

        code {
            background: @dark-mode-black;
        }
    }
}