@import "../../shared-imports/vars";

.jwplayer,
.jw-error {
    .jw-display-icon-container {
        /* Enforce auto container sizing to prevent custom skin errors in 7.9 */
        width: auto;
        height: auto;
        /* Prevent border styles from impacting width and height */
        box-sizing: content-box;
    }
}

/*
display icons
*/

.jw-display {
    display: table;
    height: 100%;
    padding: @controlbar-height 0;
    position: relative;
    width: 100%;

    .jw-flag-dragging & {
        display: none;
    }

    .jw-state-idle:not(.jw-flag-cast-available) & {
        padding: 0;
    }
}

.jw-display-container {
    display: table-cell;
    height: 100%;
    text-align: center;
    vertical-align: middle;
}

.jw-display-controls {
    display: inline-block;
}

.jwplayer .jw-display-icon-container {
    // float in case custom skin tries to override inline-block
    float: left;
}

.jw-display-icon-container {
    display: inline-block;

    .jw-icon {
        .square(75px);
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        .jw-svg-icon {
            .square((@mobile-touch-target * 0.75));
            padding: 0;
            position: relative;
        }

        .jw-svg-icon-rewind {
            padding: 0.2em 0.05em;
        }
    }
}

// hide next and rewind buttons on extra small player
.jw-breakpoint-0 {
    .jw-display-icon-next,
    .jw-display-icon-rewind {
        display: none;
    }

    .jw-display .jw-icon,
    .jw-display .jw-svg-icon {
        width: @mobile-touch-target;
        height: @mobile-touch-target;
        line-height: @mobile-touch-target;

        &:before {
            width: (@mobile-touch-target * 0.5);
            height: (@mobile-touch-target * 0.5);
        }
    }
}

.jw-breakpoint-1 {
    .jw-display-icon-container {
        padding: (@mobile-touch-target * 0.125);
        margin: 0 (@mobile-touch-target * 0.5);
    }

    .jw-display .jw-icon,
    .jw-display .jw-svg-icon {
        width: (@mobile-touch-target);
        height: (@mobile-touch-target);
        line-height: (@mobile-touch-target);

        &:before {
            width: (@mobile-touch-target * 0.5);
            height: (@mobile-touch-target * 0.5);
        }
    }

    .jw-display .jw-icon {
        &.jw-icon-rewind:before {
            width: (@mobile-touch-target * 0.75);
            height: (@mobile-touch-target * 0.75);
        }
    }
}

.jw-breakpoint-2,
.jw-breakpoint-3 {
    .jw-display .jw-icon,
    .jw-display .jw-svg-icon {
        width: (@mobile-touch-target * 1.75);
        height: (@mobile-touch-target * 1.75);
        line-height: (@mobile-touch-target * 1.75);

        &:before {
            width: (@mobile-touch-target * 0.875);
            height: (@mobile-touch-target * 0.875);
        }
    }
}

.jw-breakpoint-4,
.jw-breakpoint-5,
.jw-breakpoint-6,
.jw-breakpoint-7 {
    .jw-display .jw-icon,
    .jw-display .jw-svg-icon {
        width: (@mobile-touch-target * 2);
        height: (@mobile-touch-target * 2);
        line-height: (@mobile-touch-target * 2);

        &:before {
            width: @mobile-touch-target;
            height: @mobile-touch-target;
        }
    }
}
