.zhst-image__nav {
  position: absolute;
  display: flex;
  width: 48px;
  height: 100%;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0;

  &>button {
    & span {
      display: flex;
    }
  }

  :global {
    i:hover {
      color: #fff !important;
    }
  }

  &--disable {
    :global {
      i {
        color: #f0f0f0;
        cursor: not-allowed !important;
      }
    }
  }

  &--hide {
    display: none;
  }

  &-prev {
    left: 12px;
  }

  &-next {
    right: 12px;
  }
}