#explorer {
  width: 100%;
  height: 100%;
  display: flex;
  overflow: hidden;

  .dim {
    opacity: 0.5;
  }

  @media (max-width: 767px) {
    overflow-y: auto;
    padding: var(--main-padding) 0;
    flex-direction: column;
  }

  --cube: 4.5rem;

  > * {
    padding: 0 var(--main-padding);

    @media (min-width: 768px) {
      padding: var(--main-padding);
    }
  }

  #chain {
    flex-shrink: 0;

    @media (max-width: 767px) {
      overflow-x: auto;
    }

    @media (min-width: 768px) {
      height: 100%;
      overflow-y: auto;
      padding-right: calc(var(--main-padding) / 2);
    }

    .blocks {
      display: flex;
      flex-direction: column-reverse;
      --min-gap: 0rem;
      --max-gap: calc(var(--cube) * 6);
      --min-dt: 0;
      --max-dt: 10800;
      margin-right: var(--cube);
      margin-top: calc(var(--cube) * -0.25);

      @media (max-width: 767px) {
        --min-gap: 0rem;
        --max-gap: calc(var(--cube) * 1.5);
        flex-direction: row-reverse;
        height: 11.5rem;
        width: max-content;
      }

      @media (min-width: 768px) {
        padding-bottom: 6rem;
      }
    }

    .cube {
      --t: pow(
        clamp(
          0,
          (var(--dt, 600) - var(--min-dt)) / (var(--max-dt) - var(--min-dt)),
          1
        ),
        0.7
      );
      --block-gap: calc(
        var(--min-gap) + var(--t) * (var(--max-gap) - var(--min-gap))
      );
      --empty-alpha: 0.5;
      --face-step: 0.033;
      --face-right-color: light-dark(
        oklch(from var(--face-color) calc(l - var(--face-step) * 2) c h),
        var(--face-color)
      );
      --face-left-color: light-dark(
        oklch(from var(--face-color) calc(l - var(--face-step)) c h),
        oklch(from var(--face-color) calc(l + var(--face-step)) c h)
      );
      --face-top-color: light-dark(
        var(--face-color),
        oklch(from var(--face-color) calc(l + var(--face-step) * 2) c h)
      );
      /*margin-top: -0.375rem;*/
      margin-left: calc(var(--cube) * -0.25);
      flex-shrink: 0;
      position: relative;
      cursor: pointer;
      width: var(--cube);
      height: var(--cube);
      font-size: var(--font-size-sm);
      line-height: var(--line-height-sm);
      --face-color: var(--border-color);
      color: var(--color);
      transition:
        color,
        background-color,
        border-color,
        outline-color,
        text-decoration-color,
        fill,
        stroke,
        opacity,
        box-shadow,
        transform,
        translate,
        scale,
        rotate,
        filter,
        -webkit-backdrop-filter,
        backdrop-filter,
        display,
        content-visibility,
        overlay,
        pointer-events;
      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
      transition-duration: 50ms;
      user-select: none;
      pointer-events: none;

      &:hover {
        --face-color: var(--inv-border-color);
        color: var(--background-color);
      }

      &:active,
      &.selected {
        color: var(--black);
        --face-color: var(--orange);
      }

      > * {
        pointer-events: auto;
      }

      .face {
        transform-origin: 0 0;
        position: absolute;
        width: var(--cube);
        height: var(--cube);
        padding: 0.1rem;
        backdrop-filter: blur(4px);
      }

      .inner-top {
        backdrop-filter: none;
        background-color: var(--face-top-color);
        /*-webkit-mask-image: linear-gradient(transparent, black 0.5rem, black calc(100% - 0.5rem), transparent);
        mask-image: linear-gradient(transparent, black 0.5rem, black calc(100% - 0.5rem), transparent);*/
        transform: rotate(30deg) skew(-30deg)
          translate(
            calc(var(--cube) * (1.99 - var(--fill, 1))),
            calc(var(--cube) * (0.599 - 0.864 * var(--fill, 1)))
          )
          scaleY(0.864);
      }

      .right {
        background: linear-gradient(
          to top,
          var(--face-right-color) calc(var(--fill, 1) * 100%),
          oklch(from var(--face-right-color) l c h / var(--empty-alpha))
            calc(var(--fill, 1) * 100%)
        );
        transform: rotate(-30deg) skewX(-30deg)
          translate(calc(var(--cube) * 1.3), calc(var(--cube) * 1.725))
          scaleY(0.864);
      }

      .top {
        --is-full: round(down, calc(var(--fill, 1) + 0.0025), 1);
        background-color: oklch(
          from var(--face-top-color) l c h /
            calc(var(--empty-alpha) + var(--is-full) * (1 - var(--empty-alpha)))
        );
        transform: rotate(30deg) skew(-30deg)
          translate(calc(var(--cube) * 0.99), calc(var(--cube) * -0.265))
          scaleY(0.864);
        justify-content: center;
        align-items: center;
        text-align: center;
        display: flex;
        font-weight: 900;
        text-transform: uppercase;
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
      }

      .left {
        font-size: var(--font-size-xs);
        line-height: var(--line-height-xs);
        background: linear-gradient(
          to top,
          var(--face-left-color) calc(var(--fill, 1) * 100%),
          oklch(from var(--face-left-color) l c h / var(--empty-alpha))
            calc(var(--fill, 1) * 100%)
        );
        transform: rotate(30deg) skewX(30deg)
          translate(calc(var(--cube) * 0.3), calc(var(--cube) * 0.6))
          scaleY(0.864);
      }

      &.skeleton {
        pointer-events: none;
        .face {
          color: transparent;
        }
      }

      .fees {
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        align-items: center;
      }

      & + & {
        margin-bottom: var(--block-gap);

        &::before {
          content: "";
          position: absolute;
          top: calc(var(--cube) * 1.75);
          left: calc(var(--cube) * 1.12);
          width: 1px;
          height: var(--block-gap);
          background: var(--border-color);
          z-index: -1;
        }

        @media (max-width: 767px) {
          margin-bottom: 0;
          margin-right: var(--block-gap);

          &::before {
            bottom: auto;
            left: auto;
            right: calc(-1 * var(--block-gap));
            top: 50%;
            width: var(--block-gap);
            height: 1px;
          }
        }
      }
    }
  }

  #block-details,
  #tx-details,
  #addr-details {
    flex: 1;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);

    @media (min-width: 768px) {
      overflow-y: auto;
      padding-left: calc(var(--main-padding) / 2);
    }

    h1 {
      margin-bottom: 1rem;

      code {
        font-size: 1.5rem;
        font-weight: 300 !important;
        font-family: Lilex;
        color: var(--off-color);
        letter-spacing: -0.05rem;
      }
    }

    .row {
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.25rem 0;
      border-bottom: 1px solid var(--border-color);
    }

    .label {
      color: var(--off-color);
      white-space: nowrap;
    }

    .value {
      text-align: right;
      word-break: break-all;
    }

    .transactions {
      margin-top: 1rem;

      .tx-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;

        h2 {
          font-size: var(--font-size-sm);
          line-height: var(--line-height-sm);
        }
      }

      .pagination {
        display: flex;
        align-items: center;
        gap: 0.5rem;

        button {
          color: var(--off-color);

          &:disabled {
            opacity: 0.25;
            pointer-events: none;
          }
        }
      }

      .tx {
        border: 1px solid var(--border-color);
        padding: 0.5rem;
        margin-bottom: 0.5rem;
        content-visibility: auto;
        contain-intrinsic-block-size: auto 8rem;

        .tx-head {
          display: flex;
          justify-content: space-between;
          gap: 0.5rem;
          margin-bottom: 0.5rem;
          padding-bottom: 0.5rem;
          border-bottom: 1px solid var(--border-color);

          .txid {
            font-family: Lilex;
            font-size: var(--font-size-xs);
            line-height: var(--line-height-xs);
            color: var(--off-color);
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .tx-time {
            flex-shrink: 0;
            color: var(--off-color);
          }
        }

        .tx-body {
          display: flex;
          gap: 0.5rem;
          font-size: var(--font-size-xs);
          line-height: var(--line-height-xs);
        }

        .tx-inputs,
        .tx-outputs {
          flex: 1;
          min-width: 0;
          display: flex;
          flex-direction: column;
          gap: 0.125rem;
        }

        .tx-outputs {
          padding-left: 0.5rem;
          border-left: 1px solid var(--border-color);
        }

        .tx-io {
          display: flex;
          justify-content: space-between;
          gap: 0.5rem;

          .addr {
            display: flex;
            min-width: 0;
            white-space: nowrap;
            color: var(--off-color);

            a {
              display: flex;
              min-width: 0;
            }

            .addr-head {
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .addr-tail {
              flex-shrink: 0;
            }

            &.coinbase {
              color: var(--orange);
            }

            .coinbase-sig {
              font-family: Lilex;
              font-size: var(--font-size-xs);
              color: var(--off-color);
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &.op-return {
              color: var(--off-color);
            }
          }

          .amount {
            flex-shrink: 0;
            text-align: right;
          }
        }

        .show-more {
          color: var(--off-color);
          font-size: var(--font-size-xs);
          padding: 0.25rem 0;
        }

        .tx-foot {
          display: flex;
          justify-content: space-between;
          gap: 0.5rem;
          margin-top: 0.5rem;
          padding-top: 0.5rem;
          border-top: 1px solid var(--border-color);
          color: var(--off-color);

          .total {
            color: var(--orange);
          }
        }
      }
    }
  }
}