// --------------------------------------------------------------
// Control buttons
// --------------------------------------------------------------

.plyr__control {
    position: relative;
    flex-shrink: 0;
    overflow: visible; // IE11
    padding: @plyr-control-padding;
    border: 0;
    background: transparent;
    border-radius: @plyr-control-radius;
    cursor: pointer;
    transition: all 0.3s ease;
    color: inherit;

    svg {
        width: @plyr-control-icon-size;
        height: @plyr-control-icon-size;
        display: block;
        fill: currentColor;
        pointer-events: none;
    }

    // Default focus
    &:focus {
        outline: 0;
    }

    // Tab focus
    &.plyr__tab-focus {
        .plyr-tab-focus();
    }
}

// Change icons on state change
.plyr__control[aria-pressed='false'] .icon--pressed,
    .plyr__control[aria-pressed='true'] .icon--not-pressed,
    .plyr__control[aria-pressed='false'] .label--pressed,
    .plyr__control[aria-pressed='true'] .label--not-pressed {
    display: none;
}

// Audio styles
.plyr--audio .plyr__control {
    &.plyr__tab-focus,
    &:hover,
    &[aria-expanded='true'] {
        background: @plyr-audio-control-bg-hover;
        color: @plyr-audio-control-color-hover;
    }
}

// Large play button (video only)
.plyr__control--overlaid {
    display: none;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: ceil(@plyr-control-spacing * 1.5);
    background: fade(@plyr-video-control-bg-hover, 80%);
    border: 0;
    border-radius: 100%;
    box-shadow: 0 1px 1px fade(#000, 15%);
    color: @plyr-video-control-color;

    svg {
        position: relative;
        left: 2px; // Offset to make the play button look right
        width: @plyr-control-icon-size-large;
        height: @plyr-control-icon-size-large;
    }

    &:hover,
    &:focus {
        background: @plyr-video-control-bg-hover;
    }
}

.plyr--playing .plyr__control--overlaid {
    opacity: 0;
    visibility: hidden;
}

.plyr--full-ui.plyr--video .plyr__control--overlaid {
    display: block;
}