:root {
  --dpad-bg-color: #fff;
  --dpad-bg-color-hover: #eee;
  --dpad-bg-color-active: #fff;
  --dpad-bg-color-disabled: #fff;
  --dpad-fg-color: #5217b8;
  --dpad-fg-color-hover: #5217b8;
  --dpad-fg-color-active: #ffb300;
  --dpad-fg-color-disabled: #bbb;

  --dpad-button-outer-radius: 15%;
  --dpad-button-inner-radius: 50%;

  --dpad-arrow-position: 40%;
  --dpad-arrow-position-hover: 35%;
  --dpad-arrow-base: 19px;
  --dpad-arrow-height: 13px;
}

.dpad {
  position: relative;
  display: inline-block;

  width: 200px;
  height: 200px;

  overflow: hidden;
}

/* Buttons background */

.up,
.right,
.down,
.left {
  display: block;
  position: absolute;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);

  line-height: 40%;
  text-align: center;
  background: var(--dpad-bg-color);
  border-color: var(--dpad-fg-color);
  border-style: solid;
  border-width: 1px;
  padding: 0px;
  color: transparent;
}

.up,
.down {
  width: 33.3%;
  height: 43%;
}

.left,
.right {
  width: 43%;
  height: 33%;
}

.up {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: var(--dpad-button-outer-radius) var(--dpad-button-outer-radius) var(--dpad-button-inner-radius)
    var(--dpad-button-inner-radius);
}

.down {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);
  border-radius: var(--dpad-button-inner-radius) var(--dpad-button-inner-radius) var(--dpad-button-outer-radius)
    var(--dpad-button-outer-radius);
}

.left {
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  border-radius: var(--dpad-button-outer-radius) var(--dpad-button-inner-radius) var(--dpad-button-inner-radius)
    var(--dpad-button-outer-radius);
}

.right {
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  border-radius: 50% var(--dpad-button-outer-radius) var(--dpad-button-outer-radius) 50%;
}

/* Buttons arrows */
.up:before,
.right:before,
.down:before,
.left:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 5px;
  border-style: solid;
  transition: all 0.25s;
}

.up:before {
  top: var(--dpad-arrow-position);
  left: 50%;
  transform: translate(-50%, -50%);
  border-width: 0 var(--dpad-arrow-height) var(--dpad-arrow-base) var(--dpad-arrow-height);
  border-color: transparent transparent var(--dpad-fg-color) transparent;
}

.down:before {
  bottom: var(--dpad-arrow-position);
  left: 50%;
  transform: translate(-50%, 50%);
  border-width: var(--dpad-arrow-base) var(--dpad-arrow-height) 0px var(--dpad-arrow-height);
  border-color: var(--dpad-fg-color) transparent transparent transparent;
}

.left:before {
  left: var(--dpad-arrow-position);
  top: 50%;
  transform: translate(-50%, -50%);
  border-width: var(--dpad-arrow-height) var(--dpad-arrow-base) var(--dpad-arrow-height) 0;
  border-color: transparent var(--dpad-fg-color) transparent transparent;
}

.right:before {
  right: var(--dpad-arrow-position);
  top: 50%;
  transform: translate(50%, -50%);
  border-width: var(--dpad-arrow-height) 0 var(--dpad-arrow-height) var(--dpad-arrow-base);
  border-color: transparent transparent transparent var(--dpad-fg-color);
}

/* Hover */

.up:hover,
.right:hover,
.down:hover,
.left:hover {
  background: var(--dpad-bg-color-hover);
  border-color: var(--dpad-fg-color-hover);
}

.up:hover:before {
  top: var(--dpad-arrow-position-hover);
  border-bottom-color: var(--dpad-fg-color-hover);
}

.down:hover:before {
  bottom: var(--dpad-arrow-position-hover);
  border-top-color: var(--dpad-fg-color-hover);
}

.left:hover:before {
  left: var(--dpad-arrow-position-hover);
  border-right-color: var(--dpad-fg-color-hover);
}

.right:hover:before {
  right: var(--dpad-arrow-position-hover);
  border-left-color: var(--dpad-fg-color-hover);
}

/* Active */

.up:active,
.right:active,
.down:active,
.left:active,
.up.active,
.right.active,
.down.active,
.left.active {
  background: var(--dpad-bg-color-active);
  border-color: var(--dpad-fg-color-active);
}

.up:active:before,
.up.active:before {
  border-bottom-color: var(--dpad-fg-color-active);
}

.down:active:before,
.down.active:before {
  border-top-color: var(--dpad-fg-color-active);
}

.left:active:before,
.left.active:before {
  border-right-color: var(--dpad-fg-color-active);
}

.right:active:before,
.right.active:before {
  border-left-color: var(--dpad-fg-color-active);
}

/* Disabled */

.up.disabled,
.right.disabled,
.down.disabled,
.left.disabled {
  background: var(--dpad-bg-color-disabled);
  border-color: var(--dpad-fg-color-disabled);
}

.up.disabled:before {
  top: var(--dpad-arrow-position);
  border-bottom-color: var(--dpad-fg-color-disabled);
}

.down.disabled:before {
  bottom: var(--dpad-arrow-position);
  border-top-color: var(--dpad-fg-color-disabled);
}

.left.disabled:before {
  left: var(--dpad-arrow-position);
  border-right-color: var(--dpad-fg-color-disabled);
}

.right.disabled:before {
  right: var(--dpad-arrow-position);
  border-left-color: var(--dpad-fg-color-disabled);
}
