$zIndex: 1000;

.picture-img-wrapper {
  box-sizing: border-box;
  cursor: initial;
  :global {
    .picture-modal-mask {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: $zIndex;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.45);
    }
    .picture-modal-wrap {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: $zIndex + 1;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .picture-img-div {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      overflow: hidden;
      z-index: $zIndex + 1;
      display: block;
      justify-content: center;
      align-items: center;
    }
    .close-wrap {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: $zIndex + 1;
    }
    .big-img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      transition: transform 0.2s ease;
      object-fit: contain;
      user-select: none;
      height: 500px;
      &:hover {
        cursor: grab;
      }
    }
    .picture-option-wrapper {
      position: fixed;
      bottom: 25px;
      left: 50%;
      z-index: $zIndex + 2;
      transform: translateX(-50%);
      background: #5a5b5f;
      padding: 10px 20px;
      border-radius: 50px;
    }
    .picture-close {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: $zIndex + 2;
      font-size: 40px;
      color: #ffffff;
      cursor: pointer;
    }
    .picture-option-btn {
      font-size: 30px;
      color: #ffffff;
      padding: 0 20px;
      cursor: pointer;
    }
  }
}
