.switch
  .quality>
    %input{:id=>"q1",:type=>"radio",:name=>"q",:value=>"q1",:checked=>true}
    %label{:for=>"q1"}720p
  .quality
    %input{:id=>"q2",:type=>"radio",:name=>"q",:value=>"q2"}
    %label{:for=>"q2"}1080p

@import compass

html
  font-family: 'Gudea', Helvetica, sans-serif
  height: 100%

body
  background-color: #111

.switch
  position: relative
  margin: 100px auto
  width: 180px
  height: 40px
  border: 3px solid #45f
  color: #45f
  font-size: 25px
  border-radius: 10px

.quality
  position: relative
  display: inline-block
  width: 50%
  height: 100%
  line-height: 40px
  &:first-child
    label
      border-radius: 5px 0 0 5px
  &:last-child
    label
      border-radius: 0 5px 5px 0
  label
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    cursor: pointer
    font-style: italic
    text-align: center
    transition: transform 0.4s, color 0.4s, background-color 0.4s
  input[type="radio"]
    appearance: none
    width: 0
    height: 0
    opacity: 0
    &:focus 
      outline: 0
      outline-offset: 0
    &:checked ~ label
      background-color: #45f
      color: #111
    &:active ~ label
      transform: scale(1.05)