[data-pass] {
  background-color: var(--background-colour);

  & [data-pass-foreground] {
    color: var(--foreground-colour);
  }

  & [data-pass-label] {
    color: var(--label-colour);
  }
}

apple-pass {
  --label-colour: black;
  --foreground-colour: black;
  --background-colour: white;

  aspect-ratio: 1062 / 1492;
  display: block;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05),
    inset 0 0 0 1.25px rgba(255, 255, 255, 0.15);

  img[src=""],
  img:not([src]) {
    visibility: hidden;
  }

  /* prevent zooming when focusing an input with iOS safari */
  input[type="color"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select:focus,
  textarea {
    font-size: 16px;
  }

  background-color: var(--background-colour);
  color: var(--foreground-colour);

  & logo-text {
    color: var(--foreground-colour);
  }

  & pass-field {
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
  }

  & field-label {
    font-weight: 500;
    text-transform: uppercase;
    font-variant: small-caps;
    font-size: smaller;
    color: var(--label-colour);
  }

  & field-value {
    color: var(--foreground-colour);
  }

  pointer-events: none;

  & {
    & input,
    & button,
    & textarea,
    & select,
    & a,
    & label {
      pointer-events: auto;
    }
  }

  &.poster-event-ticket {
    mask-image: radial-gradient(circle at 50% -6%, transparent 8%, black 1px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: max-content 1fr 26.67%;
    grid-template-areas:
      "logo . datetime"
      ". . ."
      "footer footer footer";

    & > [data-field="logo"] {
      grid-area: logo;
      font-size: small;
      padding-inline-start: 1.25ch;
      padding-block-start: 0.35lh;

      & > [data-logo-text] {
        text-wrap: none;
        font-weight: 600;
        white-space: nowrap;
      }
    }

    & > [data-field="datetime"] {
      padding-inline-end: 1.25ch;
      padding-block-start: 0.35lh;
      font-size: small;
      grid-area: datetime;
      display: flex;
      flex-direction: column;
      text-align: end;

      & > [data-time] {
        font-family: monospace;
        order: 1;
      }

      & > [data-date] {
        order: 0;
        font-weight: 600;
      }
    }

    & > footer {
      background: rgba(0, 0, 0, 0.3);
      padding-inline: 1.25ch;
      padding-block-end: 0.15lh;
      backdrop-filter: blur(15px);
      grid-area: footer;
      display: grid;
      place-items: stretch;
      grid-template-columns: 1fr 2.77fr;
      grid-template-rows: 1fr 1lh;
      grid-template-areas:
        "primary-text seating-info"
        "venue-name secondary-logo";
      align-items: center;
      column-gap: 1ch;

      & > [data-primary-text] {
        grid-area: primary-text;
        display: flex;
        font-size: small;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.7);
      }

      & > dl[data-seating-info] {
        grid-area: seating-info;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        text-align: center;
        padding-inline-end: 1ch;

        & dt {
          font-size: xx-small;
          color: rgba(255, 255, 255, 0.7);
        }

        & dd {
          font-size: xx-large;
          font-family: monospace;
        }
      }

      & > [data-venue-name] {
        grid-area: venue-name;
        font-size: xx-small;
        font-family: monospace;
      }

      & > [data-secondary-logo] {
        justify-self: end;
        grid-area: secondary-logo;
      }
    }
  }

  &.blank {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 181fr 776fr 546fr;
    grid-template-areas:
      "header"
      "primary"
      "barcode";

    & > pass-header {
      grid-area: header;
    }

    & > pass-primary {
      grid-area: primary;
    }

    & > pass-barcode {
      grid-area: barcode;
    }
  }

  &.coupon {
    display: grid;
    /* divide between 576 and 200 is just a guess, until properly measured */
    grid-template-rows: minmax(0, 8fr) minmax(0, 20fr) minmax(0, 40fr) minmax(
        0,
        1px
      );
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "primary"
      "secondary"
      "barcode";

    & > * {
      min-height: 0;
    }

    & > pass-header {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;

      & > logo-cluster {
        max-width: 70%;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        flex-wrap: wrap;
        justify-content: flex-start;
        font-family:
          system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

        & > logo-image {
          flex: 1 0 auto;
          height: 100%;
        }

        & > logo-text {
          flex: 1 0 auto;
          height: 100%;
          padding-inline-start: 1ch;
        }
      }
    }

    & > pass-primary {
      display: grid;
      grid-area: primary;
      column-gap: 1ch;
      grid-template-areas: "primary-field thumbnail";
      grid-template-columns: minmax(0, 23fr) minmax(0, 9fr);

      & > pass-primary-fields {
        grid-area: primary-field;
      }

      & > pass-thumbnail {
        grid-area: thumbnail;
        aspect-ratio: 107 / 144;
      }
    }

    & > pass-strip {
      grid-area: primary;
    }

    & > pass-secondary {
      & > pass-field {
        & > pass-field-label {
          text-transform: uppercase;
          font-size: small;
          color: var(--label-colour);
        }
        & > pass-field-value {
          color: var(--foreground-colour);
        }
      }
      grid-area: secondary;
    }

    & > pass-barcode {
      grid-area: barcode;
    }
  }

  &.generic {
    font-family:
      system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    border-radius: 0.75rem;
    display: grid;
    /* divide between 576 and 200 is just a guess, until properly measured */
    grid-template-rows: minmax(0, 8fr) minmax(0, 20fr) minmax(0, 20fr) minmax(
        0,
        25fr
      );
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "primary"
      "secondary"
      "barcode";

    & > * {
      min-height: 0;
    }

    /* consider this a new api to replace generic-header
    but actually it might not be an improvement. let's see */
    & > pass-header {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      justify-content: space-between;
      font-family:
        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

      & > logo-cluster {
        max-width: 70cqw;
        display: flex;
        flex-direction: row;
        overflow: hidden;
        flex-wrap: wrap;
        justify-content: flex-start;

        & > logo-image {
          flex: 1 0 auto;
          width: 100%;
          height: 100%;
        }

        & > logo-text {
          flex: 1 0 auto;
          height: 100%;
          font-weight: 500;
          padding-inline: 1ch;
        }
      }
    }

    & > generic-header {
      grid-area: header;

      min-width: 0;
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      justify-content: space-between;
      column-gap: 1ch;

      & > logo-fields {
        display: flex;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        overflow: hidden;
        column-gap: 1ch;
        flex-wrap: wrap;
        justify-content: flex-start;

        & > logo {
          flex: 1 0 auto;
          height: 100%;
        }

        & > logo-image {
          flex: 1 0 auto;
          height: 100%;
        }

        & > logo-text {
          flex: 1 0 auto;
          height: 100%;
        }
      }

      & > [data-header-fields] {
        flex: 0 0 auto;
        height: 100%;
      }
    }

    & > generic-primary,
    & > pass-primary {
      display: grid;
      grid-area: primary;
      column-gap: 1ch;
      grid-template-areas: "primary-field thumbnail";
      grid-template-columns: minmax(0, 23fr) minmax(0, 9fr);

      & > generic-primary-fields,
      & > primary-fields {
        grid-area: primary-field;
      }

      & > generic-thumbnail,
      & > pass-thumbnail {
        grid-area: thumbnail;
        aspect-ratio: 107 / 144;
      }
    }

    & > generic-strip,
    & > pass-strip {
      grid-area: primary;
    }

    & > generic-secondary {
      grid-area: secondary;
    }

    & > generic-barcode,
    & > pass-barcode {
      grid-area: barcode;
    }
  }
}