$prefix: 'bmpui';
$color-primary: #fff !default;

@mixin svg-icon-shadow {
  filter: drop-shadow(0 0 1px $color-primary);
}

.#{$prefix}-sample-ui-skin-tv-disneyplus {
  $accentColor: rgba(93, 167, 255, 1);
  $greyish: rgba(255, 255, 255, 0.3);
  $white: rgba(255, 255, 255, 1);

  font-family: 'Avenir' !important;
  font-style: normal !important;

  $large-size: 3.5vh;
  $medium-size: 2vh;

  .#{$prefix}-ui-titlebar > .#{$prefix}-container-wrapper,
  .#{$prefix}-ui-controlbar > .#{$prefix}-container-wrapper {
      padding: 2em;
  }

  .#{$prefix}-container-wrapper > .#{$prefix}-ui-settings-panel {
    margin: 0;
    top: 0;
    left: 0;
    width: 100% !important;
    padding: 3em;
  }

  .#{$prefix}-ui-titlebar {
    padding: 1em 1em 0.5em;

    .#{$prefix}-label-metadata-title {
      font-size: $large-size;
      font-weight: bold;
    }

    .#{$prefix}-label-metadata-description {
      font-size: $medium-size;
    }
  }
  
  .#{$prefix}-controlbar-bottom {
    font-size: 2.5vh;

    .#{$prefix}-container-wrapper 
    > * {
      margin: auto 0.5em;
    }
  }

  .#{$prefix}-ui-playbacktogglebutton {
    background-image: url('assets/play.svg');
  
    &:hover {
      @include svg-icon-shadow;
    }

    &:focus {
      background-image: url('assets/playX.svg');
    }
  
    &.#{$prefix}-on {
      background-image: url('assets/pause.svg');

      &:focus {
        background-image: url('assets/pauseX.svg');
      }
    }
  }

  .#{$prefix}-ui-replaybutton {
    background-image: url('assets/restart.svg');
  
    &:hover {
      @include svg-icon-shadow;
    }

    &:focus {
      background-image: url('assets/restartX.svg');
    }
  }

  .#{$prefix}-ui-settingstogglebutton {
    background-image: url('assets/settings.svg');

    &:focus {
      background-image: url('assets/settingsX.svg');
    }
  }

  .#{$prefix}-seekbar-backdrop,
  .#{$prefix}-seekbar-bufferlevel,
  .#{$prefix}-seekbar-seekposition,
  .#{$prefix}-seekbar-playbackposition {
    border-radius: 9px !important;
  }

  .#{$prefix}-seekbar-playbackposition-marker {
    background-color: $white !important;
    border: solid !important;
    width: 0.1em !important;
    margin-left: 0.4em !important;
    border-radius: 6px !important;
  }

  .#{$prefix}-seekbar-backdrop {
    background-color: $greyish !important;
  }

  .#{$prefix}-seekbar-seekposition {
    background-color: $accentColor !important;
  }

  .#{$prefix}-seekbar-bufferlevel {
    background-color: rgba(0, 0, 0, 0) !important;
  }

  .#{$prefix}-seekbar-playbackposition {
    background-color: $accentColor !important;
  }

  .#{$prefix}-ui-seekbar-label {
    font-size: 4vw;
    border-radius: 5px;

    .#{$prefix}-seekbar-label-inner {
      border: none;

      .#{$prefix}-container-wrapper {
        .#{$prefix}-seekbar-label-metadata {
          border-radius: 8px;
          bottom: -1.2em;
          background: none;

          .#{$prefix}-seekbar-label-title {
            display: none;
          }

          .#{$prefix}-seekbar-label-time {
            font-size: 1.5vh;
            background-color: $white;
            color: black;
            width: 30%;
            margin: auto;
            height: 2vh;
            padding-top: 0.5vh;
            border-radius: 2vh;
          }
        }
      }

      .#{$prefix}-seekbar-thumbnail {
        border-radius: 8px;
      }
    }

    .#{$prefix}-seekbar-label-inner::after {
      content: unset;
    }
  }

  .#{$prefix}-ui-settings-panel {
    height: 30%;

    .#{$prefix}-ui-settings-panel-page {
      .#{$prefix}-container-wrapper > *.#{$prefix}-ui-label {
        width: 20%;
      }
    }
  }

  .#{$prefix}-ui-listbox {
    display: inline-flex;
  }
}
