#ticket-shop-ticket-control-view {
  > main {
    --control-height: calc(
      var(--viewkit-button-height) +
      1.6rem +
      var(--viewkit-toolbar-border-width) +
      var(--viewkit-toolbar-border-width)
    );
    --control-spacing: 1.6rem;
    --viewfinder-space: 0px;

    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: clip;

    > video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.2s;
    }

    > .intro {
      z-index: 1;
      padding: 2.4rem;
      max-width: 48rem;
      text-align: center;
      text-wrap: balance;
      transition: opacity 0.2s;

      > h2 {
        text-box: trim-both cap alphabetic;
        font-weight: 600;
      }

      > .status {
        margin-top: 1.6rem;
        min-height: 3em;
        color: rgba(0, 0, 0, 0.7);
        white-space: pre-line;
        text-wrap: balance;

        &[data-error] {
          color: var(--color-red);
        }
      }
    }

    > .viewfinder {
      display: none;
    }

    > .scan-loading {
      position: absolute;
      z-index: 4;
      top: calc(var(--viewfinder-space) / 2);
      left: 50%;
      padding: 1.6rem;
      width: 6.4rem;
      height: 6.4rem;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.24);
      opacity: 0;
      visibility: hidden;
      translate: -50% -50%;
      transition:
        opacity 0.18s ease,
        visibility 0s 0.18s;
      pointer-events: none;

      &[data-visible] {
        opacity: 1;
        visibility: visible;
        transition-delay: 0.12s, 0s;
        pointer-events: auto;
      }
    }

    > .controls {
      position: absolute;
      z-index: 3;
      left: 50%;
      bottom: var(--control-spacing);
      width: min(30rem, calc(100% - 3.2rem));
      display: flex;
      gap: 0.8rem;
      translate: -50% 0;

      > button {
        box-shadow:
          0px 0px 0px 1px rgba(0, 0, 0, 0.06),
          0px 1px 2px -1px rgba(0, 0, 0, 0.06),
          0px 2px 4px 0px rgba(0, 0, 0, 0.04);
        border: var(--toolbar-border);
        height: var(--control-height);
        background: var(--toolbar-background-color);

        &.camera {
          border-radius: calc(1.8rem + 0.8rem);
          padding: 0.8rem 1.2rem;
          min-width: 0;
          flex: 1 1;

          > span {
            flex: 0 1 16.8rem;
            text-align: center;
            white-space: nowrap;
          }

          &:disabled {
            opacity: 0.7;
          }
        }

        &.manual {
          border-radius: 50%;
          padding: 0;
          width: var(--control-height);
          flex: 0 0 var(--control-height);
        }
      }
    }

    &[data-camera-active] {
      background: black;

      > video {
        opacity: 1;
      }

      > .intro {
        opacity: 0;
        pointer-events: none;
      }

      > .viewfinder {
        position: absolute;
        z-index: 2;
        top: calc(var(--viewfinder-space) / 2);
        left: 50%;
        border: 0.3rem solid rgba(255, 255, 255, 0.9);
        border-radius: 1.8rem;
        width: min(
          64vmin,
          32rem,
          calc(100% - var(--control-spacing) - var(--control-spacing)),
          max(0rem, var(--viewfinder-space))
        );
        aspect-ratio: 1;
        display: block;
        box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.22);
        translate: -50% -50%;
      }
    }
  }
}