@keyframes game-market-games-view-rotation-animation {
  to {
    rotate: 360deg;
  }
}


#game-market-games-view {
  > header[purpose="toolbar"] {
    button[action="toggle-selection"] {
      &.start-selection {
        @media (max-width: 490px) {
          padding: 0;


          span {
            display: none;
          }
        }
      }


      &.stop-selection {
        color: var(--color-blue);

        @media (max-width: 610px) {
          padding: 0;


          span {
            display: none;
          }
        }
      }
    }


    button[action="select-all"],
    button[action="select-none"] {
      @media (max-width: 490px) {
        padding: 0;


        span {
          display: none;
        }
      }
    }


    button[action="show"][action-target="game-market-game-view"] {
      @media (max-width: 650px) {
        padding: 0;


        span {
          display: none;
        }
      }
    }


    menu.sort-by {
      svg[hidden] {
        visibility: hidden;
      }


      button[action="toggle-filter"] {
        svg[hidden] {
          display: none;
        }
      }
    }


    button[action="delete-selection-from-cart"] {
      &:not(:disabled) {
        color: var(--color-red);
      }

      @media (max-width: 470px) {
        padding: 0;


        span {
          display: none;
        }
      }
    }


    button[action="pay"] {
      &:not(:disabled) {
        color: var(--color-blue);
      }
    }
  }


  > main {
    --cell-height: 5.2rem;
    --floatbar-block-size: calc(1.6rem + 0.8rem + 3.6rem + 0.8rem + 1.6rem);

    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: [search-start] auto [search-end list-start] 1fr [floatbar-start] auto [floatbar-end list-end];
    overflow: hidden;


    > * {
      grid-column: 1 / -1;
    }


    > .search {
      grid-row: search;
      border-bottom: 0.1rem solid var(--toolbar-border-color);
      padding-inline: 0.8rem;
      height: var(--cell-height);
      display: flex;
      align-items: center;

      &:has(input:disabled) {
        opacity: 0.5;
      }


      .wrapper {
        position: relative;
        margin-inline: auto;
        width: 100%;
        isolation: isolate;


        svg {
          z-index: 1;
          position: absolute;
          top: 0;
          bottom: 0;
          margin-inline: 0.1rem;
          padding: 0.6rem;
          aspect-ratio: 1 / 1;
          width: auto;
          height: 100%;

          &.loupe {
            left: 0;
            pointer-events: none;
          }

          &.clear {
            right: 0;

            &:is(input:placeholder-shown ~ *) {
              display: none;
            }
          }
        }


        input {
          --size: 3.6rem;

          border: 1px solid var(--toolbar-border-color);
          border-radius: 100vmax;
          padding-inline: calc(var(--size));
          width: 100%;
          height: var(--size);
        }
      }
    }


    .reload {
      position: absolute;
      top: var(--cell-height);
      left: 0;
      right: 0;
      height: var(--overscroll);
      display: grid;
      place-content: center;

      &[hidden] {
        display: none;
      }


      svg {
        --icon-size: 2.4rem;
        --fade-from: var(--icon-size);
        --fade-to: 10rem;

        aspect-ratio: 1 / 1;
        width: var(--icon-size);
        height: auto;
        opacity: clamp(
          0,
          calc((var(--overscroll, 0px) - var(--fade-from)) / (var(--fade-to) - var(--fade-from))),
          1
        );

        &:is([flags~="reloading"] *) {
          animation: game-market-games-view-rotation-animation 1.2s linear infinite;
        }
      }
    }


    > .list {
      grid-row: list;
      margin-top: -1px;
      overflow-y: auto;

      &:has(~ .floatbar:not([hidden])) {
        scroll-padding-block-end: var(--floatbar-block-size);
      }

      &::before {
        content: "";
        width: 0;
        height: calc(100% + 1px);
        display: block;
        float: left;
      }


      > .list-contents {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        cursor: default;

        &::after {
          content: "";
          flex: 1 1;
          display: block;
          width: 100%;
          background: repeating-linear-gradient(
            var(--toolbar-border-color) 0,
            var(--toolbar-border-color) 1px,
            transparent 1px,
            transparent var(--cell-height)
          );
        }

        &:is(.list:has(~ .floatbar:not([hidden])) *) {
          &::after {
            min-height: var(--floatbar-block-size);
          }
        }

        &[inert] {
          opacity: 0.5;
        }


        .game {
          border-top: 0.1rem solid var(--toolbar-border-color);
          padding-right: 1.2rem;
          padding-bottom: 0.2rem;
          display: grid;
          grid-template-columns: auto 1fr;
          grid-template-rows: auto auto;
          grid-template-areas:
            "left top"
            "left bottom";
          row-gap: 0.2rem;
          column-gap: 0.8rem;
          place-content: center;
          height: var(--cell-height);
          overflow: hidden;

          &[hidden] {
            display: none;
          }

          &.focus {
            background-color: var(--color-blue);
          }

          &.fade {
            background-color: transparent;
            transition-delay: 0.2s;
            transition-property: background-color;
            transition-duration: 1s;
          }

          &[data-selected] {
            background-color: rgba(0, 0, 0, 0.1);
          }


          > div {
            min-width: 0;
            display: flex;
            align-items: center;


            &.left {
              grid-area: left;


              .select {
                --icon: 2.4rem;
                --inset: 1.2rem;

                margin-left: calc((var(--icon) + var(--inset)) * -1);
                margin-right: calc(var(--inset) + 0.4rem);
                display: grid;
                place-content: center;
                transition: margin 0.4s;
                transition-timing-function: ease;

                &:is([flags~="selection"] *) {
                  margin-left: var(--inset);
                  margin-right: 0;
                }


                svg {
                  aspect-ratio: 1 / 1;
                  width: var(--icon);
                  height: auto;

                  &:is(.game[data-selected] *) {
                    polyline,
                    circle {
                      stroke: var(--color-blue);
                    }
                  }

                  &:is(.game:not([data-selected]) *) {
                    circle {
                      stroke: rgba(0, 0, 0, 0.25);
                    }
                  }


                  polyline:is(.game:not([data-selected]) *) {
                    display: none;
                  }
                }
              }


              .language {
                border: 0.1rem solid gray;
                border-radius: 0.4rem;
                padding-block: 0.2rem;
                padding-inline: 0.4rem;
                display: none;
                font-size: 1.4rem;
              }
            }


            &.top {
              grid-area: top;
              gap: 0.8rem;


              .name {
                flex-shrink: 1;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
              }


              .prices {
                margin-left: auto;
                flex: 0 0 auto;
                font-size: 1.2rem;


                .price,
                .priceSunday {
                  --gray: oklch(from white calc(0.75 * l) c h);

                  font-variant-numeric: tabular-nums;

                  &[data-sold] {
                    font-weight: 600;
                  }

                  &:has(~ [data-sold]),
                  &:is([data-sold] ~ *) {
                    color: var(--gray);
                    text-decoration: line-through;
                    text-decoration-thickness: 2px;
                  }

                  &:is(.game:not([data-status="sold"]) *) {
                    &:not([marked]) {
                      color: var(--gray);
                    }
                  }
                }


                .divider {
                  color: gray;

                  &:is(.price:empty ~ *),
                  &:has(~ .priceSunday:empty) {
                    display: none;
                  }
                }
              }
            }


            &.bottom {
              grid-area: bottom;
              gap: 0.4rem;
              -webkit-user-select: none;
              user-select: none;


              .type {
                font-size: 1.2rem;
                text-box: trim-both cap alphabetic;
              }


              .labels {
                flex: 1 1;
                display: flex;
                align-items: center;
                gap: 0.4rem;
                overflow: hidden;


                .user,
                .condition,
                .complete {
                  --factor: 1.4;
                  flex-shrink: 1;
                  border: 0.1rem solid rgba(0, 0, 0, 0.1);
                  border-radius: 100vmax;
                  padding-block: 0.3rem;
                  padding-inline: 0.4rem;
                  font-size: 0.9rem;
                  line-height: 1;
                  text-box: trim-both cap alphabetic;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  overflow: hidden;

                  &:empty {
                    display: none;
                  }

                  &:is(.condition) {
                    &[data-value="new"] {
                      background: oklch(from rgba(245, 139, 1, 1) calc(var(--factor) * l) c h);
                    }

                    &[data-value="used"] {
                      background: oklch(from rgb(152 122 84) calc(var(--factor) * l) c h);
                    }

                    &[data-value="fresh"] {
                      background: oklch(from rgba(29, 195, 55, 1) calc(var(--factor) * l) c h);
                    }
                  }

                  &:is(.complete) {
                    &[data-value="true"] {
                      display: none;
                    }

                    &[data-value="false"] {
                      background: oklch(from rgba(255, 49, 38, 1) calc(var(--factor) * l) c h);
                    }
                  }
                }
              }


              .notes {
                &[data-value=""] {
                  display: none;
                }

                &:not([data-value=""]) {
                  display: contents;
                }


                svg {
                  width: auto;
                  height: 1.4rem;
                }
              }


              .status {
                font-size: 1.2rem;
                text-box: trim-both cap alphabetic;

                &:is(.game[data-status="donated"] *) {
                  color: rgb(225 112 144);
                }

                &:is(.game[data-status="sold"] *) {
                  color: rgb(29 195 55);
                }

                &:is(.game[data-status="checkedout"] *) {
                  color: rgba(0, 112, 245, 1);
                }

                &:is(#game-market-games-view[flags~="games-in-cart"] *):is(.game:not([data-status]) *:not(:empty)) {
                  color: var(--color-red);
                }
              }
            }
          }
        }
      }
    }


    > .floatbar {
      grid-row: floatbar;
      justify-self: center;
      z-index: 1;
      margin-inline: 1.6rem;
      margin-bottom: 1.6rem;
      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: 1px solid var(--toolbar-border-color);
      border-radius: 2.6rem;
      padding: 0.8rem;
      max-width: min(36rem, calc(100% - 1.6rem));
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.8rem;
      background: var(--toolbar-background-color);
      overflow: hidden;

      &[hidden] {
        display: none;
      }


      .preview {
        border: 1px solid var(--toolbar-border-color);
        border-radius: 1.6rem;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        background: white;
        display: grid;
        grid-template-areas: "stack";
        place-items: center;

        &[hidden] {
          display: none;
        }


        > * {
          grid-area: stack;
        }


        svg {
          width: 9.6rem;
          height: auto;

          &[hidden] {
            display: none;
          }

          &:is(.success, .success-repeat) path {
            fill: var(--color-green);
          }

          &:is(.failure, .no-camera) path {
            fill: var(--color-red);
          }
        }


        video {
          aspect-ratio: 1 / 1;
          width: 100vmax;
          max-width: 100%;
          display: block;
          transition: 0.4s opacity;

          &[hidden] {
            opacity: 0;
          }
        }
      }


      nav {
        width: 100%;
        display: flex;
        gap: 0.8rem;
        justify-content: center;


        .inputs {
          flex-shrink: 1;
          display: grid;
          grid-template-areas: "stack";


          > * {
            grid-area: stack;
          }


          .users {
            flex-shrink: 1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }


          .cart {
            font-weight: 400;
          }
        }


        .cart {
          position: relative;
          border: none;
          border-radius: 100vmax;
          border: 1px solid var(--button-background-color);
          min-width: 0;
          display: flex;
          align-items: center;
          isolation: isolate;

          &[hidden] {
            display: none;
          }


          .counter {
            flex-shrink: 1;
            margin-left: 1.2rem;
            margin-right: 0.8rem;
            font-size: 1.4rem;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }


          button {
            min-width: calc(var(--viewkit-button-height) - 2px);
            height: calc(var(--viewkit-button-height) - 2px);
          }
        }


        .camera {
          &[marked] {
            color: var(--color-blue);
          }
        }
      }
    }
  }


  > .\@overlay {

  }

}