audio-describe-controller,
voice-select {
  display: block;
  margin: 2rem 0;
}

audio-describe-controller {
  border: 1px solid #444;
  border-radius: .2rem;
  min-height: 300px;

  &[ data-ext-state = pause ] {
    outline: 3px solid darkorange;
  }

  &::part(label) {
    background-color: #333;
    border: 1px solid gray;
    border-radius: .2rem;
    display: inline-block;
    padding: .6rem;
  }

  &::part(iframe) {
    border-radius: .2rem;
  }
}

voice-select {
  border-radius: 1px;
  min-height: 1rem;
  min-width: 1rem;

  &[ data-state = no-support ] {
    outline: 3px dotted yellow;
  }

  &[ data-state = no-voices ] {
    outline: 2px solid pink;
  }

  &[ data-ready ] {
    outline: 1px dotted #1b2;
  }

  &::part(select) {
    background-color: #f6f6f6;
    border-radius: .2rem;
  }
}

::part(input),
::part(select),
::part(button) {
  font-size: .95rem;
  outline-offset: .3rem;
  padding: .3rem .6rem;
}

[ data-error ] {
  [ role = alert ] {
    background-color: #fee;
    border: 2px solid red;
    border-radius: .3rem;
    color: darkred;
    font-size: larger;
    padding: 1rem;
    margin: 2rem 0;
  }
}

video,
videojs-video,
vimeo-video,
youtube-video,
media-controller {
  width: 100%;
  height: 350px;
  X_width: 960px;
  X_height: 400px;
}

h1 {
  font-size: 1.7rem;
  font-weight: normal;
}

main {
  margin: 2rem 0;
}

footer {
  border-top: 2px solid gray;
  margin-top: 4rem;
}

body {
  background-color: #222;
  color: #eee;
  font-family: sans-serif;
  margin: auto;
  max-width: 43rem;
  padding: 0 1rem;

  a[ href ] {
    color: #6bf;
  }
}

* {
  outline-offset: .3rem;
  text-underline-offset: .2rem;
}