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

.enable-media-player {
    position: relative;
    z-index: 0;

    .able-transcript-container span {
        display: inline;
    }

    .able-duration {
        background: #000;
    }

    .able-highlight {
        .enable__is-dark-mode & {
            background: #880000;
        }
    }
    
    .able-clipped {
        color: @dark-mode-white;
    }

    .able-offscreen {
        color: white;
    }

    .able-wrapper {
        max-width: initial !important;
    }

    .able-descriptions {
        display: none !important;
        border: solid 1px red;
    }

    .able-status-bar {
        height: 2.4em;
        min-height: 2.4em;
    }

    * {
        box-sizing: content-box;
    }

    .able-wrapper:not(.is-fullscreen) .able.able-transcript-visible {
        + .able-transcript-area {
            max-width: 100% !important;
            left: auto !important;
            top: auto !important;
            position: relative !important;
            margin: 0 auto;

            .able-alert {
                display: none !important;
            }
        }

        @media @tablet-up {
            width: calc(50% - 20px);
            display: inline-block;
            margin-right: 20px;

            + .able-transcript-area {
                width: calc(50% - 2px) !important;
                max-width: calc(50% - 2px) !important;
                display: inline-block;
                vertical-align: top;
                margin-top: 1em;
            }
        }
    }

    .able-media-container iframe {
        width: 100%;

        .enable-focus({
      outline: solid 2px @focus-color !important;
      outline-offset: -2px;
    }, {
      outline: solid 2px @focus-color !important;
      outline-offset: -2px;
    });
    }

    .enable__is-dark-mode & {
        .able-transcript {
            background: @dark-mode-black;

            div.able-transcript-desc {
                background: #5E5151;
            }

             span {
                &:hover,
                &:active,
                &:focus {
                    background: #4C5E28;
                }
            }
        }
    }
}