.sp-stat-box {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  background-color: rgba(0,0,0,.75);
  border-radius: 8px;
  font-size: 12px;
  color: white;
  width: 100%;
  height: 100%;
  padding: 20px;

  &__close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    line-height: 12px;
    cursor: pointer;

    svg {
      overflow-clip-margin: content-box;
      overflow: hidden;
      transform-origin: 0px 0px;
      width: 24px;
      height: 24px;
      > g {
        transform-origin: 0px 0px;
        stroke: none;
        stroke-width: 1;
        fill: #fff;
        fill-rule: evenodd;

        > g {
          transform: translate(-1570%, -190%);

          > g {
            transform: translate(1333%, 179%);

            > g {
              transform: translate(244.021%, 18.0208%) rotate(-315deg) translate(-244.021%, -18.0208%) translate(235.521%, 9.52081%);

              rect:first-of-type {
                transform-origin: 0px 0px;
                x: 0;
                y: 7.5;
                width: 17px;
                height: 2px;
                rx: 1;
              }

              rect:last-of-type {
                transform: translate(8.5%, 8.5%) rotate(-270deg) translate(-8.5%, -8.5%);
                x: 0;
                y: 7.5;
                width: 17px;
                height: 2px;
                rx: 1;
              }
            }
          }
        }
      }
    }
  }

  &__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 30px;
  }

  &__stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 40px;

    input {
      text-align: right;
      font-weight: 700;
      max-width: 100px;
      cursor: text;
    }

    > div {
      display: flex;
      flex-direction: column;
      width: calc(50% - 20px);

      > span {
        font-size: 1.125rem;
        font-weight: 700;
        margin-bottom: 10px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(255,255,255, .3);
      }

      > div {
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 0.875rem;

        > div {
          display: flex;
          flex-direction: row;
          justify-content: space-between;

          span:first-of-type {
            font-weight: 500;
          }

          span:last-of-type {
            font-weight: 700;
            font-size: 1rem;
          }
        }
      }
    }
  }
}