/* Generated by scripts/brand/build-logo-styles.py from scripts/brand/logo_styles.py.
   Do not edit: `node scripts/check-logo-styles.mjs` fails when this is not what that script writes. */

/* The five alternatives, for a `.c7-wordmark` carrying the style the rotation chose. The canonical style
   has no rules here on purpose: it is the base rules in index.css and the assets that ship. */

.c7-wordmark--superscript { aspect-ratio: 284.53 / 78; }
.c7-wordmark--superscript .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/superscript-mask.png");
  mask-image: url("/brand/superscript-mask.png");
}
.c7-wordmark--superscript .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/superscript-7-mask.png");
  mask-image: url("/brand/superscript-7-mask.png");
}
.c7-wordmark--superscript.c7-wordmark--c7nc { aspect-ratio: 171.63 / 50; }
.c7-wordmark--superscript.c7-wordmark--c7nc .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/superscript-c7nc-mask.png");
  mask-image: url("/brand/superscript-c7nc-mask.png");
}
.c7-wordmark--superscript.c7-wordmark--c7nc .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/superscript-c7nc-7-mask.png");
  mask-image: url("/brand/superscript-c7nc-7-mask.png");
}

.c7-wordmark--badge-superscript { aspect-ratio: 289.73 / 78; }
.c7-wordmark--badge-superscript .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/badge-superscript-mask.png");
  mask-image: url("/brand/badge-superscript-mask.png");
}
.c7-wordmark--badge-superscript .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/badge-superscript-7-mask.png");
  mask-image: url("/brand/badge-superscript-7-mask.png");
}
.c7-wordmark--badge-superscript.c7-wordmark--c7nc { aspect-ratio: 176.83 / 50; }
.c7-wordmark--badge-superscript.c7-wordmark--c7nc .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/badge-superscript-c7nc-mask.png");
  mask-image: url("/brand/badge-superscript-c7nc-mask.png");
}
.c7-wordmark--badge-superscript.c7-wordmark--c7nc .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/badge-superscript-c7nc-7-mask.png");
  mask-image: url("/brand/badge-superscript-c7nc-7-mask.png");
}

.c7-wordmark--badge-subscript { aspect-ratio: 289.73 / 78; }
.c7-wordmark--badge-subscript .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/badge-subscript-mask.png");
  mask-image: url("/brand/badge-subscript-mask.png");
}
.c7-wordmark--badge-subscript .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/badge-subscript-7-mask.png");
  mask-image: url("/brand/badge-subscript-7-mask.png");
}
.c7-wordmark--badge-subscript.c7-wordmark--c7nc { aspect-ratio: 176.83 / 66; }
.c7-wordmark--badge-subscript.c7-wordmark--c7nc .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/badge-subscript-c7nc-mask.png");
  mask-image: url("/brand/badge-subscript-c7nc-mask.png");
}
.c7-wordmark--badge-subscript.c7-wordmark--c7nc .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/badge-subscript-c7nc-7-mask.png");
  mask-image: url("/brand/badge-subscript-c7nc-7-mask.png");
}

.c7-wordmark--subscript { aspect-ratio: 284.53 / 78; }
.c7-wordmark--subscript .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/subscript-mask.png");
  mask-image: url("/brand/subscript-mask.png");
}
.c7-wordmark--subscript .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/subscript-7-mask.png");
  mask-image: url("/brand/subscript-7-mask.png");
}
.c7-wordmark--subscript.c7-wordmark--c7nc { aspect-ratio: 171.63 / 65; }
.c7-wordmark--subscript.c7-wordmark--c7nc .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/subscript-c7nc-mask.png");
  mask-image: url("/brand/subscript-c7nc-mask.png");
}
.c7-wordmark--subscript.c7-wordmark--c7nc .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/subscript-c7nc-7-mask.png");
  mask-image: url("/brand/subscript-c7nc-7-mask.png");
}

.c7-wordmark--tucked { aspect-ratio: 267.84 / 78; }
.c7-wordmark--tucked .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/tucked-mask.png");
  mask-image: url("/brand/tucked-mask.png");
}
.c7-wordmark--tucked .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/tucked-7-mask.png");
  mask-image: url("/brand/tucked-7-mask.png");
}
.c7-wordmark--tucked.c7-wordmark--c7nc { aspect-ratio: 154.94 / 50; }
.c7-wordmark--tucked.c7-wordmark--c7nc .c7-wordmark__letters {
  -webkit-mask-image: url("/brand/tucked-c7nc-mask.png");
  mask-image: url("/brand/tucked-c7nc-mask.png");
}
.c7-wordmark--tucked.c7-wordmark--c7nc .c7-wordmark__seven {
  -webkit-mask-image: url("/brand/tucked-c7nc-7-mask.png");
  mask-image: url("/brand/tucked-c7nc-7-mask.png");
}

/* The splash, before the bundle: /theme-boot.js has already set the style on <html> by the time this
   paints, so the pre-JS first paint and the logotype the app mounts afterwards cannot disagree. The
   canonical flat in index.html is the fallback for a document where the attribute is missing. */

html[data-logo-style="superscript"] #root:empty::after {
  background-image: url("/brand/superscript-on-dark.png");
  width: auto;
  aspect-ratio: 284.53 / 78;
}
html[data-logo-style="superscript"][data-theme="light"] #root:empty::after {
  background-image: url("/brand/superscript-on-light.png");
}

html[data-logo-style="badge-superscript"] #root:empty::after {
  background-image: url("/brand/badge-superscript-on-dark.png");
  width: auto;
  aspect-ratio: 289.73 / 78;
}
html[data-logo-style="badge-superscript"][data-theme="light"] #root:empty::after {
  background-image: url("/brand/badge-superscript-on-light.png");
}

html[data-logo-style="badge-subscript"] #root:empty::after {
  background-image: url("/brand/badge-subscript-on-dark.png");
  width: auto;
  aspect-ratio: 289.73 / 78;
}
html[data-logo-style="badge-subscript"][data-theme="light"] #root:empty::after {
  background-image: url("/brand/badge-subscript-on-light.png");
}

html[data-logo-style="subscript"] #root:empty::after {
  background-image: url("/brand/subscript-on-dark.png");
  width: auto;
  aspect-ratio: 284.53 / 78;
}
html[data-logo-style="subscript"][data-theme="light"] #root:empty::after {
  background-image: url("/brand/subscript-on-light.png");
}

html[data-logo-style="tucked"] #root:empty::after {
  background-image: url("/brand/tucked-on-dark.png");
  width: auto;
  aspect-ratio: 267.84 / 78;
}
html[data-logo-style="tucked"][data-theme="light"] #root:empty::after {
  background-image: url("/brand/tucked-on-light.png");
}