$padding: 8px;
$item-height: 26px;
$item-hover-color: #f6fafd;

.bp-media-settings {
    position: absolute;
    right: 16px;
    bottom: 60px;
    display: inline-block;
    max-width: 400px;
    max-height: 210px;
    padding: $padding;
    overflow-x: hidden;
    overflow-y: auto; // So scrollbar doesn't show on hover in IE/Edge
    color: $fours;
    font-size: 10px;
    line-height: 0; // override line-height (only affects svgs in the menu, since nothing else is inline/inline-block)
    background-color: $white;
    border: 1px solid $sf-fog;
    border-radius: 2px;
    visibility: hidden;
    transition: width .2s, height .2s;
    -ms-overflow-style: -ms-autohiding-scrollbar;

    .bp-media-settings-is-open & {
        visibility: visible;
    }

    .bp-media-mp3 & {
        right: 0;
        bottom: 65px;
    }
}

.bp-media-settings-in-transition {
    overflow: hidden; // hide scrollbars during menu -> submenu transition
}

.bp-media-settings-menu {
    display: table;
}

.bp-media-settings-menu-autoplay,
.bp-media-settings-menu-quality,
.bp-media-settings-menu-speed,
.bp-media-settings-menu-subtitles,
.bp-media-settings-menu-audiotracks,
.bp-media-settings-show-autoplay .bp-media-settings-menu-main,
.bp-media-settings-show-speed .bp-media-settings-menu-main,
.bp-media-settings-show-quality .bp-media-settings-menu-main,
.bp-media-settings-show-subtitles .bp-media-settings-menu-main,
.bp-media-settings-show-audiotracks .bp-media-settings-menu-main {
    display: none;
}

.bp-media-settings-show-autoplay .bp-media-settings-menu-autoplay,
.bp-media-settings-show-speed .bp-media-settings-menu-speed,
.bp-media-settings-show-quality .bp-media-settings-menu-quality,
.bp-media-settings-show-subtitles .bp-media-settings-menu-subtitles,
.bp-media-settings-show-audiotracks .bp-media-settings-menu-audiotracks {
    display: table;
}

// For MP3 and MP4 we only have speed and autoplay options
.bp-media-mp4,
.bp-media-mp3 {
    .bp-media-settings-item-quality,
    .bp-media-settings-item-subtitles,
    .bp-media-settings-item-audiotracks {
        display: none;
    }
}

.bp-media-settings-item,
.bp-media-settings-sub-item {
    display: table-row;
    height: $item-height;
    padding: $padding / 2;
    overflow: hidden;
    white-space: nowrap;
    outline: 0 none; // will be overridden by our own
    cursor: pointer;

    &:hover {
        background-color: $item-hover-color;

        .bp-media-settings-icon svg {
            fill: $blue-steel;
        }

        .bp-media-settings-label {
            color: lighten($blue-steel, 50%);
        }

        .bp-media-settings-value {
            color: $blue-steel;
        }
    }

    .bp-has-keyboard-focus &:focus {
        background-color: $box-blue;

        .bp-media-settings-label,
        .bp-media-settings-value {
            color: $white;
        }

        svg {
            fill: $white;
        }
    }
}

.bp-media-settings-item-subtitles,
.bp-media-settings-menu-subtitles {
    .bp-media-settings-subtitles-unavailable & {
        display: none;
    }
}

.bp-media-settings-item-autoplay,
.bp-media-settings-menu-autoplay {
    .bp-media-settings-autoplay-unavailable & {
        display: none;
    }
}

.bp-media-settings-item-audiotracks,
.bp-media-settings-menu-audiotracks {
    .bp-media-settings-audiotracks-unavailable & {
        display: none;
    }
}

.bp-media-settings-menu-quality {
    .bp-media-settings-hd-unavailable & {
        display: none;
    }
}

.bp-media-settings-item-quality {
    .bp-media-settings-hd-unavailable & {
        pointer-events: none;

        .bp-media-settings-arrow {
            display: none;
        }
    }
}

.bp-media-settings-label,
.bp-media-settings-value {
    display: table-cell;
    padding: $padding / 2;
    vertical-align: middle;
}

.bp-media-settings-label {
    color: $downtown-grey;
    font-weight: normal;
    font-size: 11px;
    text-transform: uppercase;

    .bp-media-settings-item & {
        text-align: left;
    }

    .bp-media-settings-sub-item & {
        text-align: center;
    }
}

.bp-media-settings-value {
    padding-left: 10px;
    color: $sunset-grey;
    font-size: 12px;
    text-align: left;

    .bp-media-settings-selected & {
        color: $box-blue;
    }
}

.bp-media-settings-arrow {
    display: table-cell;
    vertical-align: middle;

    svg {
        width: 18px;
        height: 18px;
    }
}

.bp-media-settings-icon {
    display: table-cell;
    text-align: center;
    vertical-align: middle;

    svg {
        width: 16px;
        height: 16px;
        visibility: hidden;
    }

    .bp-media-settings-selected & svg {
        visibility: visible;
    }
}
