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

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

    &::before,
    &::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--main-padding);
      z-index: 1;
      pointer-events: none;
    }

    &::before {
      left: 0;
      background-image: linear-gradient(
        to left,
        transparent,
        var(--background-color)
      );
    }

    &::after {
      right: 0;
      background-image: linear-gradient(
        to right,
        transparent,
        var(--background-color)
      );
    }
  }

  --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;
    }

    .blocks {
      display: flex;
      flex-direction: column-reverse;
      --gap: 0.75;
      gap: calc(var(--cube) * var(--gap));
      margin-right: var(--cube);
      margin-top: calc(var(--cube) * -0.25);

      @media (max-width: 767px) {
        --gap: 1.25;
        flex-direction: row-reverse;
        height: 11.5rem;
        width: max-content;
      }
    }

    .cube {
      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;
      }

      .right {
        background-color: oklch(from var(--face-color) calc(l - 0.05) c h);
        transform: rotate(-30deg) skewX(-30deg)
          translate(calc(var(--cube) * 1.3), calc(var(--cube) * 1.725))
          scaleY(0.864);
      }

      .top {
        background-color: oklch(from var(--face-color) calc(l + 0.05) c h);
        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-color: var(--face-color);
        transform: rotate(30deg) skewX(30deg)
          translate(calc(var(--cube) * 0.3), calc(var(--cube) * 0.6))
          scaleY(0.864);
      }

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

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

    @media (min-width: 768px) {
      overflow-y: auto;
    }

    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 {
      opacity: 0.5;
      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;

        .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;
            opacity: 0.5;
          }
        }

        .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);

            .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);
              opacity: 0.5;
              display: block;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &.op-return {
              opacity: 0.5;
            }
          }

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

        .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);
          opacity: 0.5;

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