.arrow {
  appearance: none;
  outline: none;
  border: none;
  background: transparent;
  width: 16px;
  height: 48px;
  position: absolute;
  top: 112px;
  left: 5px;
  cursor: pointer;
  z-index: 10;
}

.arrow.disabled > div {
  background: #3d4a56;
}

.arrow__right {
  left: unset;
  right: 5px;
}

.arrow:hover > div {
  background: #00f3ed;
}

.arrow-top {
  transition: background 0.1s ease-out;
  background: #1eaba9;
  width: 8px;
  height: 24px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 12px;
  transform: rotateZ(20deg) translateY(2px) translateX(4px);
}

.arrow-bottom {
  transition: background 0.1s ease-out;
  background: #1eaba9;
  width: 8px;
  height: 24px;
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 12px;
  transform: rotateZ(-20deg) translateY(-2px) translateX(4px);
}

.arrow-top__right {
  transform: rotateZ(-20deg) translateY(4px) translateX(4px);
}

.arrow-bottom__right {
  transform: rotateZ(20deg) translateY(-4px) translateX(4px);
}