@import '../../boxuiVariables';
@import './MediaControls';

// Reset default styling that come from the “User Agent Stylesheet”
@mixin bp-reset-default-styling-button {
    padding: 0;
    color: inherit;
    font: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

.bp-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0 none;
    visibility: hidden;

    &.bp-is-visible {
        visibility: visible;
    }
}

.bp-media-container {
    position: relative;
    min-width: 360px; // Prevent media controls from overflowing on small screens
    outline: 0 none;
    user-select: none; // Prevents copy paste dialog from appearing on mobile
}

.bp-media-play-button {
    @include bp-reset-default-styling-button;

    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    color: $white;
    font-size: 40px;
    text-align: center;
    background: rgba($black, .5);
    border: 4px solid $white;
    border-radius: 40px;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all .2s;

    &:hover {
        background: $black;
    }
}

.bp-media-overlay-play-container {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    gap: 28px;
    align-items: center;
    justify-content: center;
    color: $white;
    font-size: 40px;
    text-align: center;
    transform: translate(-50%, -50%);
    cursor: pointer;
    transition: all .2s;

    // move this to the center of the container height

    button {
        @include bp-reset-default-styling-button;

        width: 40px;
        height: 40px;
        font-size: 40px;
        text-align: center;
        background: $black;
        border-radius: 40px;
        cursor: pointer;
        transition: all .2s;
    }

    .bp-media-overlay-play-button {
        width: 60px;
        height: 60px;
    }

    .bp-media-overlay-seek-button {
        display: none;
    }
}

.bp-has-keyboard-focus {
    .bp-media-time-scrubber-container,
    .bp-media-volume-scrubber-container,
    .bp-media-controls-btn {
        &:focus {
            box-shadow: inset 0 0 0 1px fade-out($white, .5), 0 1px 2px fade-out($black, .9);
        }
    }
}

// When lights are lowered, change color of error text
.bp-dark {
    .bp-error {
        color: $white;
    }

    .bp-icon {
        opacity: .9;
    }
}

// When media is buffering, show only the crawler
.bp.bp-loaded .bp-is-buffering .bp-loading-wrapper {
    display: flex;

    .bp-crawler-wrapper {
        display: block;
    }

    .bp-icon {
        display: none;
    }
}

.bp-is-mobile {
    *::-webkit-media-controls-start-playback-button {
        display: none;
    }
}

.bp-VideoControlsRoot {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
}
