:root {
  --axis-btn-diameter: 45px;
}

#selectAxisButtonWrapper {
  position: fixed;
  z-index: 1000;
  width: var(--axis-btn-diameter);
  height: var(--axis-btn-diameter);

  right: 20px;
  top: 85px;

  background-color: #fff;
  border-radius: 10000px;

  transition: height 0.2s ease-in;

  display: grid;
  justify-content: center;
  grid-template-columns: var(--axis-btn-diameter);
  align-content: start;

  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
}

#selectAxisButton {
  width: var(--axis-btn-diameter);
  height: var(--axis-btn-diameter);
}

.axisImage {
  width: var(--axis-btn-diameter);
  height: var(--axis-btn-diameter);

  display: none;
}

.axisImageOpened {
  display: block !important;
}

.axisImageInactive {
  opacity: 0.5;
}

.opened {
  height: calc(var(--axis-btn-diameter) * 4) !important;

  transition: height 0.2s ease-in !important;
}

@media (orientation: landscape) {
  #selectAxisButtonWrapper {
    right: unset;
    top: unset;

    bottom: 20px;
    left: 85px;

    grid-auto-flow: column;
    justify-content: start;

    transition: width 0.2s ease-in !important;
  }

  .opened {
    height: var(--axis-btn-diameter)!important;
    width: calc(var(--axis-btn-diameter) * 4) !important;

    transition: width 0.2s ease-in !important;
  }
}