*,
*::before,
*::after {
  box-sizing: border-box;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: none;
}


html,
body {
  height: 100dvh;
}

body {
  font-size: 1.6rem;
}


[purpose="toolbar"] {
  display: flex;


  > hr {
    border: none;

    &.spacer {
      flex: 1 1;
    }
  }
}


[purpose="overlay"] {
  background: white;
}


.games {
  .game {
    padding-block: 0.4rem;
    padding-inline: 0.8rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "left top    right"
      "left bottom right";
    row-gap: 0.2rem;
    column-gap: 0.8rem;

    &:not(:first-child) {
      border-top: 0.1rem solid gray;
    }


    > div {
      display: flex;
      align-items: center;

      &.left {
        grid-area: left;


        .select {

        }


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

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

      &.bottom {
        grid-area: bottom;
        gap: 0.4rem;


        > span {
          &.type {
            font-size: 1.2rem;
          }


          &.condition,
          &.complete {
            border: 0.1rem solid gray;
            border-radius: 100vmax;
            padding-block: 0.1rem;
            padding-inline: 0.4rem;
            font-size: 0.8rem;

            &:is(.condition) {
              &[data-value="new"] {
                background: moccasin;
              }

              &[data-value="used"] {
                background: tan;
              }

              &[data-value="fresh"] {
                background: lightgreen;
              }
            }

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

              &[data-value="false"] {
                background: lightcoral;
              }
            }
          }


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

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


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

      &.right {
        grid-area: right;
        justify-content: center;
        align-items: flex-end;
        flex-direction: column;
          font-size: 1.2rem;


        .prices {
          .price,
          .priceSunday {
            &:not(:empty) {
              &::after {
                content: "€";
                margin-left: 0.333ch;
              }
            }

            &:is(.priceSunday) {
              color: gray;
            }
          }


          .divider {
            color: gray;

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


        .sold {

        }
      }
    }
  }
}