.gamepad {
  pointer-events: none;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: space-between;
  overflow: hidden;
}

.gamepad-dpad {
  position: relative;
  width: 39px;
  height: 120px;
  background: #444;
  border-radius: 9px;
  left: 40px;
}
.gamepad-dpad:before {
  position: absolute;
  width: 120px;
  height: 39px;
  top: 39px;
  left: -39px;
  background: #444;
  border-radius: 9px;
  content: '';
}
.gamepad-dpad:after {
  position: absolute;
  height: 39px;
  width: 39px;
  top: 39px;
  border-radius: 100%;
  background: #333;
  content: '';
}
.gamepad-dpad.pressed-left:before {
  border-left: 4px solid #a93671;
  width: 116px;
}
.gamepad-dpad.pressed-right:before {
  border-right: 4px solid #a93671;
  width: 116px;
}
.gamepad-dpad.pressed-up {
  border-top: 4px solid #a93671;
}
.gamepad-dpad.pressed-down {
  border-bottom: 4px solid #a93671;
  height: 116px;
}

.gamepad-action1,
.gamepad-action2 {
  width: 60px;
  height: 60px;
  border: 4px solid #a93671;
  border-radius: 50px;
  flex: 0 0 auto;
}

.gamepad-action1 {
  position: relative;
  right: 60px;
}
.gamepad-action2 {
}

.gamepad-action1.pressed,
.gamepad-action2.pressed {
  background: #a93671;
}

.gamepad-actions {
  display: flex;
  flex-flow: column-reverse nowrap;
  align-items: flex-end;
  position: relative;
}
