Untitled

#gamepad {
    height: 630px;
    width: 750px;
}

#gamepad[data-color="black"] {
    background-image: url(https://imgur.com/a/ocyf6Du.png);
}

#gamepad[data-color="white"] {
    background-image: url(https://imgur.com/a/ocyf6Du.png);
}

#gamepad.disconnected {
    background-image: url(disconnected.svg);
}

#gamepad.disconnected div {
    display: none;
}

#gamepad .triggers {
    width: 448px;
    height: 122px;
    position: absolute;
    left: 151px;
}

#gamepad .trigger {
    width: 89px;
    height: 122px;
    background: url(trigger.svg);
    clip-path: inset(100% 0px 0px 0pc);
}

#gamepad .trigger[data-value="0"] {
    opacity: 0;
}

#gamepad .trigger.left {
    float: left;
    background-position: 0 0;
}

#gamepad .trigger.right {
    float: right;
    transform: rotateY(180deg);
}

#gamepad .bumper {
    width: 170px;
    height: 61px;
    background: url(bumper.svg);
    opacity: 0;
}

#gamepad .bumpers {
    position: absolute;
    width: 536px;
    height: 61px;
    left: 107px;
    top: 129px;
}

#gamepad .bumper[data-pressed="true"] {
    opacity: 1;
}

#gamepad .bumper.left {
    float: left;
}

#gamepad .bumper.right {
    float: right;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

#gamepad .p0 {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

#gamepad .p1 {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

#gamepad .p2 {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

#gamepad .p3 {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

#gamepad .arrows {
    position: absolute;
    width: 141px;
    height: 33px;
    top: 264px;
    left: 306px;
}

#gamepad .select,
#gamepad .start {
    background: url(start-select.svg);
    width: 33px;
    height: 33px;
    opacity: 0;
}

#gamepad .select[data-pressed="true"],
#gamepad .start[data-pressed="true"] {
    opacity: 1;
}

#gamepad .select {
    float: left;
}

#gamepad .start {
    background-position: 33px 0px;
    float: right;
}

#gamepad .buttons {
    position: absolute;
    width: 155px;
    height: 156px;
    top: 201px;
    left: 489px;
}

#gamepad .button {
    position: absolute;
    background: url(buttons.svg);
    width: 53px;
    height: 53px;
}

#gamepad .button[data-pressed="true"] {
    background-position-y: -53px;
    opacity: 1;
}

#gamepad .a {
    background-position: 0 0;
    top: 102px;
    left: 51px;
}

#gamepad .b {
    background-position: -53px 0;
    top: 52px;
    right: 1px;
}

#gamepad .x {
    background-position: -106px 0;
    top: 52px;
    left: 1px;
}

#gamepad .y {
    background-position: -159px 0;
    top: 1px;
    left: 51px;
}

#gamepad .sticks {
    position: absolute;
    width: 371px;
    height: 196px;
    top: 239px;
    left: 144px;
}

#gamepad .stick {
    position: absolute;
    background: url(stick.svg);
    background-position: -85px 0;
    height: 83px;
    width: 83px;
}

#gamepad .stick[data-pressed="true"] {
    background-position: 0 0;
}

#gamepad .stick.left {
    top: 0;
    left: 0;
}

#gamepad .stick.right {
    top: 113px;
    left: 288px;
}

#gamepad .dpad {
    position: absolute;
    width: 110px;
    height: 111px;
    top: 345px;
    left: 223px;
}

#gamepad .face {
    background: url(dpad.svg);
    position: absolute;
    opacity: 0;
}

#gamepad .face[data-pressed="true"] {
    opacity: 1;
}

#gamepad .face.up {
    background-position: 35px 0;
    left: 38px;
    top: 1px;
    width: 34px;
    height: 56px;
}

#gamepad .face.down {
    left: 38px;
    bottom: 0;
    width: 34px;
    height: 56px;
}

#gamepad .face.left {
    background-position: 0 -93px;
    width: 56px;
    height: 34px;
    top: 39px;
    left: 0;
}

#gamepad .face.right {
    background-position: 0 -57px;
    width: 56px;
    height: 34px;
    top: 39px;
    right: 0;
}