@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
1,278 lines (1,139 loc) • 695 kB
CSS
/**
* Modified from https://github.com/hankchizljaw/modern-css-reset
* Copyright (c) 2019 Andy Bell and other contributors
* License: MIT
*/
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
list-style: none;
}
/* Set core root defaults */
html:focus-within {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
max-width: 100%;
display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
html:focus-within {
scroll-behavior: auto;
}
}
html {
scroll-behavior: smooth;
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:49 GMT
*/
:root,
[data-color-mode="light"] {
--base-color-scale-black-0: #1f2328;
--base-color-scale-transparent: rgba(255,255,255,0);
--base-color-scale-white-0: #ffffff;
--base-color-scale-gray-0: #f6f8fa;
--base-color-scale-gray-1: #eaeef2;
--base-color-scale-gray-2: #d0d7de;
--base-color-scale-gray-3: #afb8c1;
--base-color-scale-gray-4: #8c959f;
--base-color-scale-gray-5: #6e7781;
--base-color-scale-gray-6: #57606a;
--base-color-scale-gray-7: #424a53;
--base-color-scale-gray-8: #32383f;
--base-color-scale-gray-9: #24292f;
--base-color-scale-blue-0: #ddf4ff;
--base-color-scale-blue-1: #b6e3ff;
--base-color-scale-blue-2: #80ccff;
--base-color-scale-blue-3: #54aeff;
--base-color-scale-blue-4: #218bff;
--base-color-scale-blue-5: #0969da;
--base-color-scale-blue-6: #0550ae;
--base-color-scale-blue-7: #033d8b;
--base-color-scale-blue-8: #0a3069;
--base-color-scale-blue-9: #002155;
--base-color-scale-green-0: #dafbe1;
--base-color-scale-green-1: #aceebb;
--base-color-scale-green-2: #6fdd8b;
--base-color-scale-green-3: #4ac26b;
--base-color-scale-green-4: #2da44e;
--base-color-scale-green-5: #1a7f37;
--base-color-scale-green-6: #116329;
--base-color-scale-green-7: #044f1e;
--base-color-scale-green-8: #003d16;
--base-color-scale-green-9: #002d11;
--base-color-scale-yellow-0: #fff8c5;
--base-color-scale-yellow-1: #fae17d;
--base-color-scale-yellow-2: #eac54f;
--base-color-scale-yellow-3: #d4a72c;
--base-color-scale-yellow-4: #bf8700;
--base-color-scale-yellow-5: #9a6700;
--base-color-scale-yellow-6: #7d4e00;
--base-color-scale-yellow-7: #633c01;
--base-color-scale-yellow-8: #4d2d00;
--base-color-scale-yellow-9: #3b2300;
--base-color-scale-orange-0: #fff1e5;
--base-color-scale-orange-1: #ffd8b5;
--base-color-scale-orange-2: #ffb77c;
--base-color-scale-orange-3: #fb8f44;
--base-color-scale-orange-4: #e16f24;
--base-color-scale-orange-5: #bc4c00;
--base-color-scale-orange-6: #953800;
--base-color-scale-orange-7: #762c00;
--base-color-scale-orange-8: #5c2200;
--base-color-scale-orange-9: #471700;
--base-color-scale-red-0: #ffebe9;
--base-color-scale-red-1: #ffcecb;
--base-color-scale-red-2: #ffaba8;
--base-color-scale-red-3: #ff8182;
--base-color-scale-red-4: #fa4549;
--base-color-scale-red-5: #cf222e;
--base-color-scale-red-6: #a40e26;
--base-color-scale-red-7: #82071e;
--base-color-scale-red-8: #660018;
--base-color-scale-red-9: #4c0014;
--base-color-scale-purple-0: #fbefff;
--base-color-scale-purple-1: #ecd8ff;
--base-color-scale-purple-2: #d8b9ff;
--base-color-scale-purple-3: #c297ff;
--base-color-scale-purple-4: #a475f9;
--base-color-scale-purple-5: #8250df;
--base-color-scale-purple-6: #6639ba;
--base-color-scale-purple-7: #512a97;
--base-color-scale-purple-8: #3e1f79;
--base-color-scale-purple-9: #2e1461;
--base-color-scale-pink-0: #ffeff7;
--base-color-scale-pink-1: #ffd3eb;
--base-color-scale-pink-2: #ffadda;
--base-color-scale-pink-3: #ff80c8;
--base-color-scale-pink-4: #e85aad;
--base-color-scale-pink-5: #bf3989;
--base-color-scale-pink-6: #99286e;
--base-color-scale-pink-7: #772057;
--base-color-scale-pink-8: #611347;
--base-color-scale-pink-9: #4d0336;
--base-color-scale-coral-0: #fff0eb;
--base-color-scale-coral-1: #ffd6cc;
--base-color-scale-coral-2: #ffb4a1;
--base-color-scale-coral-3: #fd8c73;
--base-color-scale-coral-4: #ec6547;
--base-color-scale-coral-5: #c4432b;
--base-color-scale-coral-6: #9e2f1c;
--base-color-scale-coral-7: #801f0f;
--base-color-scale-coral-8: #691105;
--base-color-scale-coral-9: #510901;
--base-color-scale-lemon-0: #fdf5b3;
--base-color-scale-lemon-1: #f4e162;
--base-color-scale-lemon-2: #dec741;
--base-color-scale-lemon-3: #c5aa20;
--base-color-scale-lemon-4: #a88d02;
--base-color-scale-lemon-5: #866d00;
--base-color-scale-lemon-6: #685400;
--base-color-scale-lemon-7: #534100;
--base-color-scale-lemon-8: #413200;
--base-color-scale-lemon-9: #322400;
--base-color-scale-lime-0: #eafaba;
--base-color-scale-lime-1: #cdec78;
--base-color-scale-lime-2: #b1d353;
--base-color-scale-lime-3: #94b83b;
--base-color-scale-lime-4: #799a2a;
--base-color-scale-lime-5: #5a791b;
--base-color-scale-lime-6: #425e13;
--base-color-scale-lime-7: #2f4a06;
--base-color-scale-lime-8: #233b03;
--base-color-scale-lime-9: #182c01;
--base-color-scale-teal-0: #daf9f5;
--base-color-scale-teal-1: #b0eae3;
--base-color-scale-teal-2: #6bd6d0;
--base-color-scale-teal-3: #49bcb7;
--base-color-scale-teal-4: #339d9b;
--base-color-scale-teal-5: #197b7b;
--base-color-scale-teal-6: #136061;
--base-color-scale-teal-7: #024b4d;
--base-color-scale-teal-8: #063a3c;
--base-color-scale-teal-9: #052b2c;
--base-color-scale-indigo-0: #eff2ff;
--base-color-scale-indigo-1: #d7ddff;
--base-color-scale-indigo-2: #b9c2ff;
--base-color-scale-indigo-3: #9aa4ff;
--base-color-scale-indigo-4: #7683ff;
--base-color-scale-indigo-5: #545df0;
--base-color-scale-indigo-6: #3c42d0;
--base-color-scale-indigo-7: #2c33a5;
--base-color-scale-indigo-8: #22297f;
--base-color-scale-indigo-9: #191f5c;
}
[data-color-mode="dark"] {
--base-color-scale-black-0: #000000;
--base-color-scale-transparent: rgba(0,0,0,0);
--base-color-scale-white-0: #ffffff;
--base-color-scale-gray-0: #f0f6fc;
--base-color-scale-gray-1: #c9d1d9;
--base-color-scale-gray-2: #b1bac4;
--base-color-scale-gray-3: #8b949e;
--base-color-scale-gray-4: #6e7681;
--base-color-scale-gray-5: #484f58;
--base-color-scale-gray-6: #30363d;
--base-color-scale-gray-7: #21262d;
--base-color-scale-gray-8: #161b22;
--base-color-scale-gray-9: #0d1117;
--base-color-scale-blue-0: #cae8ff;
--base-color-scale-blue-1: #a5d6ff;
--base-color-scale-blue-2: #79c0ff;
--base-color-scale-blue-3: #58a6ff;
--base-color-scale-blue-4: #388bfd;
--base-color-scale-blue-5: #1f6feb;
--base-color-scale-blue-6: #1158c7;
--base-color-scale-blue-7: #0d419d;
--base-color-scale-blue-8: #0c2d6b;
--base-color-scale-blue-9: #051d4d;
--base-color-scale-green-0: #aff5b4;
--base-color-scale-green-1: #7ee787;
--base-color-scale-green-2: #56d364;
--base-color-scale-green-3: #3fb950;
--base-color-scale-green-4: #2ea043;
--base-color-scale-green-5: #238636;
--base-color-scale-green-6: #196c2e;
--base-color-scale-green-7: #0f5323;
--base-color-scale-green-8: #033a16;
--base-color-scale-green-9: #04260f;
--base-color-scale-yellow-0: #f8e3a1;
--base-color-scale-yellow-1: #f2cc60;
--base-color-scale-yellow-2: #e3b341;
--base-color-scale-yellow-3: #d29922;
--base-color-scale-yellow-4: #bb8009;
--base-color-scale-yellow-5: #9e6a03;
--base-color-scale-yellow-6: #845306;
--base-color-scale-yellow-7: #693e00;
--base-color-scale-yellow-8: #4b2900;
--base-color-scale-yellow-9: #341a00;
--base-color-scale-orange-0: #ffdfb6;
--base-color-scale-orange-1: #ffc680;
--base-color-scale-orange-2: #ffa657;
--base-color-scale-orange-3: #f0883e;
--base-color-scale-orange-4: #db6d28;
--base-color-scale-orange-5: #bd561d;
--base-color-scale-orange-6: #9b4215;
--base-color-scale-orange-7: #762d0a;
--base-color-scale-orange-8: #5a1e02;
--base-color-scale-orange-9: #3d1300;
--base-color-scale-red-0: #ffdcd7;
--base-color-scale-red-1: #ffc1ba;
--base-color-scale-red-2: #ffa198;
--base-color-scale-red-3: #ff7b72;
--base-color-scale-red-4: #f85149;
--base-color-scale-red-5: #da3633;
--base-color-scale-red-6: #b62324;
--base-color-scale-red-7: #8e1519;
--base-color-scale-red-8: #67060c;
--base-color-scale-red-9: #490202;
--base-color-scale-purple-0: #eddeff;
--base-color-scale-purple-1: #e2c5ff;
--base-color-scale-purple-2: #d2a8ff;
--base-color-scale-purple-3: #bc8cff;
--base-color-scale-purple-4: #a371f7;
--base-color-scale-purple-5: #8957e5;
--base-color-scale-purple-6: #6e40c9;
--base-color-scale-purple-7: #553098;
--base-color-scale-purple-8: #3c1e70;
--base-color-scale-purple-9: #271052;
--base-color-scale-pink-0: #ffdaec;
--base-color-scale-pink-1: #ffbedd;
--base-color-scale-pink-2: #ff9bce;
--base-color-scale-pink-3: #f778ba;
--base-color-scale-pink-4: #db61a2;
--base-color-scale-pink-5: #bf4b8a;
--base-color-scale-pink-6: #9e3670;
--base-color-scale-pink-7: #7d2457;
--base-color-scale-pink-8: #5e103e;
--base-color-scale-pink-9: #42062a;
--base-color-scale-coral-0: #ffddd2;
--base-color-scale-coral-1: #ffc2b2;
--base-color-scale-coral-2: #ffa28b;
--base-color-scale-coral-3: #f78166;
--base-color-scale-coral-4: #ea6045;
--base-color-scale-coral-5: #cf462d;
--base-color-scale-coral-6: #ac3220;
--base-color-scale-coral-7: #872012;
--base-color-scale-coral-8: #640d04;
--base-color-scale-coral-9: #460701;
--base-color-scale-lemon-0: #fff6a6;
--base-color-scale-lemon-1: #fae85a;
--base-color-scale-lemon-2: #e1cd41;
--base-color-scale-lemon-3: #c5ae13;
--base-color-scale-lemon-4: #a69000;
--base-color-scale-lemon-5: #8c7600;
--base-color-scale-lemon-6: #705d00;
--base-color-scale-lemon-7: #564500;
--base-color-scale-lemon-8: #3d2f00;
--base-color-scale-lemon-9: #2a1e00;
--base-color-scale-lime-0: #d9ef95;
--base-color-scale-lime-1: #bedc6c;
--base-color-scale-lime-2: #a4c847;
--base-color-scale-lime-3: #8ab034;
--base-color-scale-lime-4: #739826;
--base-color-scale-lime-5: #5c8118;
--base-color-scale-lime-6: #46680f;
--base-color-scale-lime-7: #314f07;
--base-color-scale-lime-8: #1e3703;
--base-color-scale-lime-9: #102401;
--base-color-scale-teal-0: #bdeee8;
--base-color-scale-teal-1: #8adfd7;
--base-color-scale-teal-2: #57ccc5;
--base-color-scale-teal-3: #33b3ae;
--base-color-scale-teal-4: #2a9d9a;
--base-color-scale-teal-5: #1d8281;
--base-color-scale-teal-6: #14696a;
--base-color-scale-teal-7: #0b5051;
--base-color-scale-teal-8: #053738;
--base-color-scale-teal-9: #022425;
--base-color-scale-indigo-0: #dbe3ff;
--base-color-scale-indigo-1: #c5cfff;
--base-color-scale-indigo-2: #abb4ff;
--base-color-scale-indigo-3: #939aff;
--base-color-scale-indigo-4: #797ef9;
--base-color-scale-indigo-5: #5d63f0;
--base-color-scale-indigo-6: #464ed1;
--base-color-scale-indigo-7: #3238a7;
--base-color-scale-indigo-8: #1e267c;
--base-color-scale-indigo-9: #131759;
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:48 GMT
*/
:root {
--base-size-128: 8rem;
--base-size-112: 7rem;
--base-size-96: 6rem;
--base-size-80: 5rem;
--base-size-64: 4rem;
--base-size-48: 3rem;
--base-size-44: 2.75rem;
--base-size-40: 2.5rem;
--base-size-36: 2.25rem;
--base-size-32: 2rem;
--base-size-28: 1.75rem;
--base-size-24: 1.5rem;
--base-size-20: 1.25rem;
--base-size-16: 1rem;
--base-size-12: 0.75rem;
--base-size-8: 0.5rem;
--base-size-6: 0.375rem;
--base-size-4: 0.25rem;
--base-size-2: 0.125rem;
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:48 GMT
*/
:root {
--base-text-weight-heavy: 900;
--base-text-weight-extrabold: 800;
--base-text-weight-bold: 700;
--base-text-weight-semibold: 600;
--base-text-weight-medium: 500;
--base-text-weight-normal: 450;
--base-text-weight-light: 300;
--base-text-weight-extralight: 200;
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:48 GMT
*/
:root {
--brand-text-style-italic-10: "ital" 10;
--brand-text-style-italic-9: "ital" 9;
--brand-text-style-italic-8: "ital" 8;
--brand-text-style-italic-7: "ital" 7;
--brand-text-style-italic-6: "ital" 6;
--brand-text-style-italic-5: "ital" 5;
--brand-text-style-italic-4: "ital" 4;
--brand-text-style-italic-3: "ital" 3;
--brand-text-style-italic-2: "ital" 2;
--brand-text-style-italic-1: "ital" 1;
--brand-text-letterSpacing-1000: -0.03em;
--brand-text-letterSpacing-900: -0.02em;
--brand-text-letterSpacing-800: -0.02em;
--brand-text-letterSpacing-700: -0.02em;
--brand-text-letterSpacing-600: -0.02em;
--brand-text-letterSpacing-500: -0.01em;
--brand-text-letterSpacing-400: 0em;
--brand-text-letterSpacing-350: 0em;
--brand-text-letterSpacing-300: 0em;
--brand-text-letterSpacing-200: 0em;
--brand-text-letterSpacing-100: 0.02em;
--brand-text-lineHeight-1000: 1.1;
--brand-text-lineHeight-900: 1.1;
--brand-text-lineHeight-800: 1.2;
--brand-text-lineHeight-700: 1.2;
--brand-text-lineHeight-600: 1.2;
--brand-text-lineHeight-500: 1.3;
--brand-text-lineHeight-400: 1.3;
--brand-text-lineHeight-350: 1.3;
--brand-text-lineHeight-300: 1.5;
--brand-text-lineHeight-200: 1.5;
--brand-text-lineHeight-100: 1.5;
--brand-text-size-1000: 2.5rem;
--brand-text-size-900: 2.25rem;
--brand-text-size-800: 2rem;
--brand-text-size-700: 1.75rem;
--brand-text-size-600: 1.5rem;
--brand-text-size-500: 1.375rem;
--brand-text-size-400: 1.25rem;
--brand-text-size-350: 1.125rem;
--brand-text-size-300: 1.125rem;
--brand-text-size-200: 1rem;
--brand-text-size-100: 0.875rem;
--brand-text-weight-1000: var(--base-text-weight-bold);
--brand-text-weight-900: var(--base-text-weight-semibold);
--brand-text-weight-800: var(--base-text-weight-semibold);
--brand-text-weight-700: var(--base-text-weight-semibold);
--brand-text-weight-600: var(--base-text-weight-semibold);
--brand-text-weight-500: var(--base-text-weight-semibold);
--brand-text-weight-400: var(--base-text-weight-semibold);
--brand-text-weight-350: var(--base-text-weight-semibold);
--brand-text-weight-300: var(--base-text-weight-normal);
--brand-text-weight-200: var(--base-text-weight-normal);
--brand-text-weight-100: var(--base-text-weight-normal);
--brand-text-subhead-lineHeight-large: 1.3;
--brand-text-subhead-lineHeight-medium: 1.3;
--brand-text-subhead-weight-large: var(--base-text-weight-semibold);
--brand-text-subhead-weight-medium: var(--base-text-weight-semibold);
--brand-text-subhead-size-large: 1.125rem;
--brand-text-subhead-size-medium: 1rem;
--brand-heading-lineHeight-1000: 1.1;
--brand-heading-lineHeight-900: 1.1;
--brand-heading-lineHeight-800: 1.2;
--brand-heading-lineHeight-700: 1.2;
--brand-heading-lineHeight-600: 1.3;
--brand-heading-lineHeight-500: 1.3;
--brand-heading-lineHeight-400: 1.3;
--brand-heading-letterSpacing-1000: -0.03em;
--brand-heading-letterSpacing-900: -0.02em;
--brand-heading-letterSpacing-800: -0.02em;
--brand-heading-letterSpacing-700: -0.02em;
--brand-heading-letterSpacing-600: -0.02em;
--brand-heading-letterSpacing-500: -0.01em;
--brand-heading-letterSpacing-400: -0.01em;
--brand-heading-weight-1000: var(--base-text-weight-bold);
--brand-heading-weight-900: var(--base-text-weight-semibold);
--brand-heading-weight-800: var(--base-text-weight-semibold);
--brand-heading-weight-700: var(--base-text-weight-semibold);
--brand-heading-weight-600: var(--base-text-weight-semibold);
--brand-heading-weight-500: var(--base-text-weight-semibold);
--brand-heading-weight-400: var(--base-text-weight-semibold);
--brand-fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
--brand-fontStack-sansSerifAlt: "Hubot Sans", "Hubot SansHeaderFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-fontStack-sansSerif: "Mona Sans", "MonaSansFallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--brand-heading-fontFamilyAlt: var(--brand-fontStack-sansSerifAlt);
--brand-heading-fontFamily: var(--brand-fontStack-sansSerif);
--brand-body-fontFamilyAlt: var(--brand-fontStack-sansSerifAlt);
--brand-body-fontFamily: var(--brand-fontStack-sansSerif);
}
@media (min-width: 768px) {
:root {
--brand-text-letterSpacing-900: -0.03em;
--brand-text-lineHeight-1000: 1.05;
--brand-text-lineHeight-900: 1.05;
--brand-text-size-1000: 4rem;
--brand-text-size-900: 3rem;
--brand-text-size-800: 2.25rem;
--brand-text-size-700: 2.25rem;
--brand-text-size-600: 2rem;
--brand-heading-lineHeight-1000: 1.05;
--brand-heading-lineHeight-900: 1.05;
--brand-heading-letterSpacing-900: -0.03em;
}
}
@media (min-width: 1012px) {
:root {
--brand-text-letterSpacing-800: -0.03em;
--brand-text-letterSpacing-700: -0.03em;
--brand-text-lineHeight-1000: 1;
--brand-text-lineHeight-900: 1;
--brand-text-lineHeight-500: 1.2;
--brand-text-size-1000: 6rem;
--brand-text-size-900: 4.5rem;
--brand-text-size-800: 4rem;
--brand-text-size-700: 3rem;
--brand-text-size-600: 2.5rem;
--brand-text-size-500: 2rem;
--brand-text-size-400: 1.5rem;
--brand-text-size-350: 1.25rem;
--brand-text-subhead-size-large: 1.25rem;
--brand-heading-lineHeight-1000: 1;
--brand-heading-lineHeight-900: 1;
--brand-heading-lineHeight-600: 1.2;
--brand-heading-letterSpacing-800: -0.03em;
--brand-heading-letterSpacing-700: -0.03em;
}
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:48 GMT
*/
:root {
--brand-breakpoint-xxlarge: 87.5rem;
--brand-breakpoint-xlarge: 80rem;
--brand-breakpoint-large: 63.25rem;
--brand-breakpoint-medium: 48rem;
--brand-breakpoint-small: 34rem;
--brand-breakpoint-xsmall: 20rem;
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:48 GMT
*/
:root {
--brand-borderRadius-full: 624.9375rem; /* Use this border radius for pill shaped elements */
--brand-borderWidth-thicker: max(4px, 0.25rem);
--brand-borderWidth-thick: max(2px, 0.125rem);
--brand-borderWidth-thin: max(1px, 0.0625rem);
--brand-borderRadius-xlarge: var(--base-size-24);
--brand-borderRadius-large: var(--base-size-16);
--brand-borderRadius-medium: var(--base-size-8);
--brand-borderRadius-small: var(--base-size-4);
--brand-borderInset-thicker: inset 0 0 0 var(--brand-borderWidth-thicker);
--brand-borderInset-thick: inset 0 0 0 var(--brand-borderWidth-thick);
--brand-borderInset-thin: inset 0 0 0 var(--brand-borderWidth-thin);
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:49 GMT
*/
:root,
[data-color-mode="light"] {
--brand-color-success-fg: var(--base-color-scale-green-5);
--brand-color-success-emphasis: var(--base-color-scale-green-4);
--brand-color-success-muted: rgba(75,195,107,0.6);
--brand-color-success-subtle: var(--base-color-scale-green-0);
--brand-color-error-fg: var(--base-color-scale-red-5);
--brand-color-error-emphasis: var(--base-color-scale-red-5);
--brand-color-error-muted: rgba(255,135,133,0.6);
--brand-color-error-subtle: var(--base-color-scale-red-0);
--brand-color-accent-primary: var(--base-color-scale-green-5);
--brand-color-accent-secondary: var(--base-color-scale-yellow-5);
--brand-color-text-default: var(--base-color-scale-gray-9);
--brand-color-text-muted: var(--base-color-scale-gray-6);
--brand-color-text-subtle: var(--base-color-scale-gray-5);
--brand-color-text-onEmphasis: var(--base-color-scale-white-0);
--brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-9);
--brand-color-neutral-emphasis: var(--base-color-scale-gray-5);
--brand-color-neutral-muted: rgba(183,191,200,0.99608);
--brand-color-neutral-subtle: rgba(233,237,241,0.99608);
--brand-color-canvas-default: var(--base-color-scale-white-0);
--brand-color-canvas-overlay: var(--base-color-scale-white-0);
--brand-color-canvas-inset: var(--base-color-scale-gray-0);
--brand-color-canvas-subtle: var(--base-color-scale-gray-0);
--brand-color-border-default: var(--base-color-scale-gray-3);
--brand-color-border-muted: rgba(211,217,223,0.99608);
--brand-color-border-subtle: rgba(233,237,241,0.99608);
--brand-color-focus: var(--base-color-scale-blue-5);
}
[data-color-mode="dark"] {
--brand-color-success-fg: var(--base-color-scale-green-3);
--brand-color-success-emphasis: var(--base-color-scale-green-5);
--brand-color-success-muted: rgba(46,158,66,0.6);
--brand-color-success-subtle: rgba(46,158,66,0.85098);
--brand-color-error-fg: var(--base-color-scale-red-4);
--brand-color-error-emphasis: var(--base-color-scale-red-5);
--brand-color-error-muted: rgba(248,82,73,0.6);
--brand-color-error-subtle: rgba(248,82,73,0.85098);
--brand-color-accent-primary: var(--base-color-scale-green-3);
--brand-color-accent-secondary: var(--base-color-scale-yellow-3);
--brand-color-text-default: var(--base-color-scale-white-0);
--brand-color-text-muted: var(--base-color-scale-gray-3);
--brand-color-text-subtle: var(--base-color-scale-gray-4);
--brand-color-text-onEmphasis: var(--base-color-scale-black-0);
--brand-color-neutral-emphasisPlus: var(--base-color-scale-gray-4);
--brand-color-neutral-emphasis: var(--base-color-scale-gray-4);
--brand-color-neutral-muted: rgba(110,118,129,0.99608);
--brand-color-neutral-subtle: rgba(110,118,129,1);
--brand-color-canvas-default: var(--base-color-scale-black-0);
--brand-color-canvas-overlay: var(--base-color-scale-gray-8);
--brand-color-canvas-inset: var(--base-color-scale-black-0);
--brand-color-canvas-subtle: var(--base-color-scale-gray-8);
--brand-color-border-default: var(--base-color-scale-gray-6);
--brand-color-border-muted: var(--base-color-scale-gray-7);
--brand-color-border-subtle: var(--base-color-scale-gray-8);
--brand-color-focus: var(--base-color-scale-blue-3);
}
/*
* For important high-utility CSS classes that are used
* frequently throughout the library and helpful to library users.
*/
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
word-wrap: normal;
border: 0;
}
.Primer_Brand__ExpandableArrow-module__ExpandableArrow___rkfek {
transition: transform 200ms;
transform: translateX(0);
}
.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded___gajDr {
transform: translateX(4px);
}
.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem___g4mdy {
stroke-dasharray: 10;
stroke-dashoffset: 10;
transition: stroke-dashoffset 200ms;
}
.Primer_Brand__ExpandableArrow-module__ExpandableArrow-stem--expanded___KwI_9 {
stroke-dashoffset: 20;
}
.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___LPFUS {
transform: rotate(180deg);
}
.Primer_Brand__ExpandableArrow-module__ExpandableArrow--reversed___LPFUS.Primer_Brand__ExpandableArrow-module__ExpandableArrow--expanded___gajDr {
transform: rotate(180deg) translateX(4px);
}
.Primer_Brand__Text-module__Text___pecHN {
font-family: var(--brand-body-fontFamily);
}
[data-color-mode='dark'] .Primer_Brand__Text-module__Text--antialiased___fYDxq {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: auto;
}
.Primer_Brand__Text-module__Text--default___DChoE {
color: var(--brand-color-text-default);
}
.Primer_Brand__Text-module__Text--muted___lTaVa {
color: var(--brand-color-text-muted);
}
.Primer_Brand__Text-module__Text-font--mona-sans___GpzSG {
font-family: var(--brand-body-fontFamily);
}
.Primer_Brand__Text-module__Text-font--hubot-sans___l0tzF {
font-family: var(--brand-body-fontFamilyAlt);
}
.Primer_Brand__Text-module__Text-font--monospace___Mifnv {
font-family: var(--brand-fontStack-monospace);
}
.Primer_Brand__Text-module__Text--1000___j3rsl {
font-weight: var(--brand-text-weight-1000);
font-size: var(--brand-text-size-1000);
line-height: var(--brand-text-lineHeight-1000);
letter-spacing: var(--brand-text-letterSpacing-1000);
}
.Primer_Brand__Text-module__Text--900___Fo_yP {
font-weight: var(--brand-text-weight-900);
font-size: var(--brand-text-size-900);
line-height: var(--brand-text-lineHeight-900);
letter-spacing: var(--brand-text-letterSpacing-900);
}
.Primer_Brand__Text-module__Text--800___OdB5a {
font-weight: var(--brand-text-weight-800);
font-size: var(--brand-text-size-800);
line-height: var(--brand-text-lineHeight-800);
letter-spacing: var(--brand-text-letterSpacing-800);
}
.Primer_Brand__Text-module__Text--700___cOggy {
font-weight: var(--brand-text-weight-700);
font-size: var(--brand-text-size-700);
line-height: var(--brand-text-lineHeight-700);
letter-spacing: var(--brand-text-letterSpacing-700);
}
.Primer_Brand__Text-module__Text--600___ThppA {
font-weight: var(--brand-text-weight-600);
font-size: var(--brand-text-size-600);
line-height: var(--brand-text-lineHeight-600);
}
.Primer_Brand__Text-module__Text--500___orDRu {
font-weight: var(--brand-text-weight-500);
font-size: var(--brand-text-size-500);
line-height: var(--brand-text-lineHeight-500);
}
.Primer_Brand__Text-module__Text--400___y7m4l {
font-weight: var(--brand-text-weight-400);
font-size: var(--brand-text-size-400);
line-height: var(--brand-text-lineHeight-400);
letter-spacing: var(--brand-text-letterSpacing-400);
}
.Primer_Brand__Text-module__Text--350___L4bn4 {
font-weight: var(--brand-text-weight-350);
font-size: var(--brand-text-size-350);
line-height: var(--brand-text-lineHeight-350);
letter-spacing: var(--brand-text-letterSpacing-350);
}
.Primer_Brand__Text-module__Text--300___TBQTB {
font-weight: var(--brand-text-weight-300);
font-size: var(--brand-text-size-300);
line-height: var(--brand-text-lineHeight-300);
letter-spacing: var(--brand-text-letterSpacing-300);
}
.Primer_Brand__Text-module__Text--200___XAIGT {
font-weight: var(--brand-text-weight-200);
font-size: var(--brand-text-size-200);
line-height: var(--brand-text-lineHeight-200);
letter-spacing: var(--brand-text-letterSpacing-200);
}
.Primer_Brand__Text-module__Text--100___csEom {
font-weight: var(--brand-text-weight-100);
font-size: var(--brand-text-size-100);
line-height: var(--brand-text-lineHeight-100);
letter-spacing: var(--brand-text-letterSpacing-100);
}
.Primer_Brand__Text-module__Text--weight-heavy___ege7O,
.Primer_Brand__Text-module__Text-narrow--weight-heavy___EZzqD {
font-weight: var(--base-text-weight-heavy);
}
.Primer_Brand__Text-module__Text--weight-extrabold____UVFN,
.Primer_Brand__Text-module__Text-narrow--weight-extrabold___ts3be {
font-weight: var(--base-text-weight-extrabold);
}
.Primer_Brand__Text-module__Text--weight-bold___jgFdL,
.Primer_Brand__Text-module__Text-narrow--weight-bold___Flbbf {
font-weight: var(--base-text-weight-bold);
}
.Primer_Brand__Text-module__Text--weight-semibold___Ns19j,
.Primer_Brand__Text-module__Text-narrow--weight-semibold___jtFFh {
font-weight: var(--base-text-weight-semibold);
}
.Primer_Brand__Text-module__Text--weight-medium___E0iQL,
.Primer_Brand__Text-module__Text-narrow--weight-medium___tQs9y {
font-weight: var(--base-text-weight-medium);
}
.Primer_Brand__Text-module__Text--weight-normal___siVLX,
.Primer_Brand__Text-module__Text-narrow--weight-normal___gb0q4 {
font-weight: var(--base-text-weight-normal);
}
.Primer_Brand__Text-module__Text--weight-light___SpQAz,
.Primer_Brand__Text-module__Text-narrow--weight-light___cIyjf {
font-weight: var(--base-text-weight-light);
}
.Primer_Brand__Text-module__Text--weight-extralight___JRMel,
.Primer_Brand__Text-module__Text-narrow--weight-extralight___aHSut {
font-weight: var(--base-text-weight-extralight);
}
@media screen and (min-width: 48rem) {
.Primer_Brand__Text-module__Text-regular--weight-heavy___YumNc {
font-weight: var(--base-text-weight-heavy);
}
.Primer_Brand__Text-module__Text-regular--weight-extrabold___uvNQM {
font-weight: var(--base-text-weight-extrabold);
}
.Primer_Brand__Text-module__Text-regular--weight-bold___E3xyf {
font-weight: var(--base-text-weight-bold);
}
.Primer_Brand__Text-module__Text-regular--weight-semibold___Wwz9g {
font-weight: var(--base-text-weight-semibold);
}
.Primer_Brand__Text-module__Text-regular--weight-medium___TnD35 {
font-weight: var(--base-text-weight-medium);
}
.Primer_Brand__Text-module__Text-regular--weight-normal___FEkFF {
font-weight: var(--base-text-weight-normal);
}
.Primer_Brand__Text-module__Text-regular--weight-light___MalyV {
font-weight: var(--base-text-weight-light);
}
.Primer_Brand__Text-module__Text-regular--weight-extralight___p7mr2 {
font-weight: var(--base-text-weight-extralight);
}
}
@media screen and (min-width: 80rem) {
.Primer_Brand__Text-module__Text-wide--weight-heavy___AXiAN {
font-weight: var(--base-text-weight-heavy);
}
.Primer_Brand__Text-module__Text-wide--weight-extrabold___rggXv {
font-weight: var(--base-text-weight-extrabold);
}
.Primer_Brand__Text-module__Text-wide--weight-bold___CWJA2 {
font-weight: var(--base-text-weight-bold);
}
.Primer_Brand__Text-module__Text-wide--weight-semibold___LEBmW {
font-weight: var(--base-text-weight-semibold);
}
.Primer_Brand__Text-module__Text-wide--weight-medium___QQ0IW {
font-weight: var(--base-text-weight-medium);
}
.Primer_Brand__Text-module__Text-wide--weight-normal___KpqrG {
font-weight: var(--base-text-weight-normal);
}
.Primer_Brand__Text-module__Text-wide--weight-light___iYFr9 {
font-weight: var(--base-text-weight-light);
}
.Primer_Brand__Text-module__Text-wide--weight-extralight___HH1z4 {
font-weight: var(--base-text-weight-extralight);
}
}
.Primer_Brand__Text-module__Text-align--start___wkiCN {
text-align: start;
}
.Primer_Brand__Text-module__Text-align--end___E4m7M {
text-align: end;
}
.Primer_Brand__Text-module__Text-align--center___NbZtZ {
text-align: center;
}
/**
* Do not edit directly
* Generated on Wed, 10 Sep 2025 14:28:49 GMT
*/
:root,
[data-color-mode="light"] {
--brand-button-primary-bgColor-rest: var(--base-color-scale-black-0);
--brand-button-primary-bgColor-hover: var(--base-color-scale-gray-8);
--brand-button-primary-bgColor-active: var(--base-color-scale-gray-8);
--brand-button-primary-bgColor-disabled: var(--base-color-scale-gray-4);
--brand-button-primary-borderColor-rest: var(--base-color-scale-black-0);
--brand-button-primary-borderColor-hover: var(--base-color-scale-gray-8);
--brand-button-primary-borderColor-active: var(--base-color-scale-gray-8);
--brand-button-primary-borderColor-disabled: var(--base-color-scale-gray-4);
--brand-button-primary-fgColor-rest: var(--brand-color-text-onEmphasis);
--brand-button-primary-fgColor-disabled: var(--base-color-scale-gray-2);
--brand-button-primary-shadow-active: inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active);
--brand-button-accent-bgColor-rest: var(--base-color-scale-green-5);
--brand-button-accent-bgColor-hover: var(--base-color-scale-green-4);
--brand-button-accent-bgColor-active: var(--base-color-scale-green-5);
--brand-button-accent-bgColor-disabled: var(--base-color-scale-gray-4);
--brand-button-accent-borderColor-active: var(--base-color-scale-green-6);
--brand-button-accent-fgColor-rest: var(--base-color-scale-white-0);
--brand-button-accent-fgColor-disabled: var(--base-color-scale-gray-2);
--brand-button-secondary-bgColor-rest: transparent;
--brand-button-secondary-borderColor-rest: rgba(13,17,23,0.16078);
--brand-button-secondary-borderColor-hover: rgba(13,17,23,0.32157);
--brand-button-secondary-borderColor-active: rgba(13,17,23,0.32157);
--brand-button-secondary-fgColor-rest: var(--brand-color-text-default);
--brand-button-secondary-fgColor-disabled: var(--base-color-scale-gray-3);
--brand-button-subtle-bgColor-rest: rgba(13,17,23,0.07059);
--brand-button-subtle-bgColor-hover: rgba(13,17,23,0.05098);
--brand-button-subtle-bgColor-active: rgba(13,17,23,0.07059);
--brand-button-subtle-fgColor-rest: var(--brand-color-text-default);
--brand-button-subtle-fgColor-disabled: var(--base-color-scale-gray-3);
}
[data-color-mode="dark"] {
--brand-button-primary-bgColor-rest: var(--base-color-scale-white-0);
--brand-button-primary-bgColor-hover: var(--base-color-scale-gray-0);
--brand-button-primary-bgColor-active: var(--base-color-scale-gray-0);
--brand-button-primary-bgColor-disabled: var(--base-color-scale-gray-4);
--brand-button-primary-borderColor-rest: var(--base-color-scale-white-0);
--brand-button-primary-borderColor-hover: var(--base-color-scale-white-0);
--brand-button-primary-borderColor-active: var(--base-color-scale-white-0);
--brand-button-primary-borderColor-disabled: var(--base-color-scale-gray-4);
--brand-button-primary-fgColor-rest: var(--brand-color-text-onEmphasis);
--brand-button-primary-fgColor-disabled: var(--base-color-scale-gray-2);
--brand-button-primary-shadow-active: inset 0px 1px 0px 0px var(--brand-button-primary-borderColor-active);
--brand-button-accent-bgColor-rest: var(--base-color-scale-green-5);
--brand-button-accent-bgColor-hover: var(--base-color-scale-green-4);
--brand-button-accent-bgColor-active: var(--base-color-scale-green-5);
--brand-button-accent-bgColor-disabled: var(--base-color-scale-gray-4);
--brand-button-accent-borderColor-active: var(--base-color-scale-green-6);
--brand-button-accent-fgColor-rest: var(--base-color-scale-white-0);
--brand-button-accent-fgColor-disabled: var(--base-color-scale-gray-2);
--brand-button-secondary-bgColor-rest: transparent;
--brand-button-secondary-borderColor-rest: rgba(255,255,255,0.16078);
--brand-button-secondary-borderColor-hover: rgba(255,255,255,0.32157);
--brand-button-secondary-borderColor-active: rgba(255,255,255,0.32157);
--brand-button-secondary-fgColor-rest: var(--brand-color-text-default);
--brand-button-secondary-fgColor-disabled: var(--base-color-scale-gray-4);
--brand-button-subtle-bgColor-rest: rgba(255,255,255,0.07059);
--brand-button-subtle-bgColor-hover: rgba(255,255,255,0.05098);
--brand-button-subtle-bgColor-active: rgba(255,255,255,0.07059);
--brand-button-subtle-fgColor-rest: var(--brand-color-text-default);
--brand-button-subtle-fgColor-disabled: var(--base-color-scale-gray-4);
}
.Primer_Brand__Button-module__Button___lDruK {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
vertical-align: middle;
align-items: center;
justify-content: center;
transition: box-shadow var(--brand-animation-duration-faster);
-webkit-text-decoration: none;
text-decoration: none;
border-radius: var(--brand-borderRadius-medium);
cursor: pointer;
border: solid var(--brand-borderWidth-thick) transparent;
background: none;
display: inline-flex;
gap: var(--brand-control-medium-gap);
}
.Primer_Brand__Button-module__Button___lDruK:hover {
-webkit-text-decoration: none;
text-decoration: none;
}
.Primer_Brand__Button-module__Button___lDruK:focus-visible {
transition: none;
outline: 4px solid var(--brand-color-focus);
outline-offset: 2px;
}
.Primer_Brand__Button-module__Button--disabled___Ba17E,
.Primer_Brand__Button-module__Button--disabled___Ba17E:hover,
.Primer_Brand__Button-module__Button--disabled___Ba17E:focus {
cursor: not-allowed;
}
.Primer_Brand__Button-module__Button__text___Z3ocU {
position: relative;
}
.Primer_Brand__Button-module__Button__icon-visual___zR2Hi {
display: flex;
align-self: center;
height: var(--base-size-16);
width: auto;
fill: currentcolor;
}
.Primer_Brand__Button-module__Button__trailing-visual___zg8jd,
.Primer_Brand__Button-module__Button__leading-visual___FIPvg {
display: flex;
}
/* optically adjust arrow to align with the end (right) padding */
/* reduce gap between label and arrow */
.Primer_Brand__Button-module__Button-arrow___SkJXQ {
margin-inline-end: calc(var(--base-size-4) * -1);
margin-inline-start: calc(var(--base-size-8) * -1);
}
/* primary */
.Primer_Brand__Button-module__Button--primary___xIC7G {
color: var(--brand-button-primary-fgColor-rest);
background-color: var(--brand-button-primary-bgColor-rest);
border: solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest);
}
.Primer_Brand__Button-module__Button--primary___xIC7G:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):not([aria-expanded='true']):hover {
background-color: var(--brand-button-primary-bgColor-hover);
border-color: var(--brand-button-primary-borderColor-hover);
}
.Primer_Brand__Button-module__Button--primary___xIC7G:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):active,
.Primer_Brand__Button-module__Button--primary___xIC7G[aria-expanded='true'] {
background-color: var(--brand-button-primary-bgColor-active);
border-color: var(--brand-button-primary-borderColor-active);
box-shadow: var(--brand-button-primary-shadow-active);
}
.Primer_Brand__Button-module__Button--label-primary___Leisi {
color: var(--brand-button-primary-fgColor-rest);
}
.Primer_Brand__Button-module__Button--primary___xIC7G:disabled,
.Primer_Brand__Button-module__Button--primary___xIC7G[aria-disabled='true'],
.Primer_Brand__Button-module__Button--primary___xIC7G.Primer_Brand__Button-module__Button--disabled___Ba17E {
background-color: var(--brand-button-primary-bgColor-disabled);
border-color: var(--brand-button-primary-borderColor-disabled);
}
.Primer_Brand__Button-module__Button--primary___xIC7G:disabled .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--primary___xIC7G[aria-disabled='true'] .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--primary___xIC7G.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--primary___xIC7G:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--primary___xIC7G[aria-disabled='true'] .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--primary___xIC7G.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--label-primary___Leisi.Primer_Brand__Button-module__Button-label--disabled___ZBpbj {
color: var(--brand-button-primary-fgColor-disabled);
}
/* accent */
.Primer_Brand__Button-module__Button--accent___YZgXX {
color: var(--brand-button-accent-fgColor-rest);
background-color: var(--brand-button-accent-bgColor-rest);
}
.Primer_Brand__Button-module__Button--size-small___iNTn1.Primer_Brand__Button-module__Button--accent___YZgXX {
border-width: var(--brand-borderWidth-thin);
}
.Primer_Brand__Button-module__Button--accent___YZgXX:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):not([aria-expanded='true']):hover {
background: var(--brand-button-accent-bgColor-hover);
}
.Primer_Brand__Button-module__Button--accent___YZgXX:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):active,
.Primer_Brand__Button-module__Button--accent___YZgXX[aria-expanded='true'] {
background-color: var(--brand-button-accent-bgColor-active);
border-color: var(--brand-button-accent-borderColor-active);
}
.Primer_Brand__Button-module__Button--label-accent___gFRhQ {
color: var(--brand-button-accent-fgColor-rest);
}
.Primer_Brand__Button-module__Button--accent___YZgXX:disabled,
.Primer_Brand__Button-module__Button--accent___YZgXX[aria-disabled='true'],
.Primer_Brand__Button-module__Button--accent___YZgXX.Primer_Brand__Button-module__Button--disabled___Ba17E {
background-color: var(--brand-button-accent-bgColor-disabled);
}
.Primer_Brand__Button-module__Button--accent___YZgXX:disabled .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--accent___YZgXX[aria-disabled='true'] .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--accent___YZgXX.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--accent___YZgXX:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--accent___YZgXX[aria-disabled='true'] .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--accent___YZgXX.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--label-accent___gFRhQ.Primer_Brand__Button-module__Button-label--disabled___ZBpbj {
color: var(--brand-button-accent-fgColor-disabled);
}
/* secondary */
.Primer_Brand__Button-module__Button--secondary___akMC2 {
transition: background-color, border-color 200ms;
border-color: var(--brand-button-secondary-borderColor-rest);
color: var(--brand-button-secondary-fgColor-rest);
}
.Primer_Brand__Button-module__Button--secondary___akMC2:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):not([aria-expanded='true']):hover {
border-color: var(--brand-button-secondary-borderColor-hover);
}
.Primer_Brand__Button-module__Button--secondary___akMC2:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):active,
.Primer_Brand__Button-module__Button--secondary___akMC2[aria-expanded='true'] {
border-color: var(--brand-button-secondary-borderColor-active);
}
.Primer_Brand__Button-module__Button--secondary___akMC2:disabled {
border-color: var(--brand-button-secondary-fgColor-disabled);
}
.Primer_Brand__Button-module__Button--secondary___akMC2:disabled .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--secondary___akMC2[aria-disabled='true'] .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--secondary___akMC2.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--secondary___akMC2:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--secondary___akMC2[aria-disabled='true'] .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--secondary___akMC2.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--label-secondary___DRJoJ.Primer_Brand__Button-module__Button-label--disabled___ZBpbj {
color: var(--brand-button-secondary-fgColor-disabled);
}
/* subtle */
.Primer_Brand__Button-module__Button--subtle___UMmi9 {
background-color: var(--brand-button-subtle-bgColor-rest);
color: var(--brand-color-text-default);
transition: background-color, border-color var(--brand-animation-duration-faster);
}
.Primer_Brand__Button-module__Button--subtle___UMmi9:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):not([aria-expanded='true']):hover {
background-color: var(--brand-button-subtle-bgColor-hover);
}
.Primer_Brand__Button-module__Button--subtle___UMmi9:not(.Primer_Brand__Button-module__Button___lDruK[disabled]):not(.Primer_Brand__Button-module__Button___lDruK[aria-disabled='true']):active,
.Primer_Brand__Button-module__Button--subtle___UMmi9[aria-expanded='true'] {
background-color: var(--brand-button-subtle-bgColor-active);
border-color: transparent;
}
.Primer_Brand__Button-module__Button--label-subtle___RRaqm {
color: var(--brand-button-subtle-fgColor-rest);
}
.Primer_Brand__Button-module__Button--subtle___UMmi9:disabled .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--subtle___UMmi9[aria-disabled='true'] .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--subtle___UMmi9.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button-arrow--disabled____UgPq,
.Primer_Brand__Button-module__Button--subtle___UMmi9:disabled .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--subtle___UMmi9[aria-disabled='true'] .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--subtle___UMmi9.Primer_Brand__Button-module__Button--disabled___Ba17E .Primer_Brand__Button-module__Button__icon-visual--disabled___j7aVy,
.Primer_Brand__Button-module__Button--label-subtle___RRaqm.Primer_Brand__Button-module__Button-label--disabled___ZBpbj {
color: var(--brand-button-subtle-fgColor-disabled);
}
/* size */
.Primer_Brand__Button-module__Button--size-small___iNTn1 {
min-height: var(--brand-control-small-size);
padding-inline: var(--brand-control-small-paddingInline-normal);
}
.Primer_Brand__Button-module__Button--size-medium___EyCyw {
min-height: var(--brand-control-medium-size);
padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);
}
.Primer_Brand__Button-module__Button--size-large___REN1l {
min-height: var(--brand-control-large-size);
padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);
}
.Primer_Brand__Button-module__Button--size-large___REN1l .Primer_Brand__Button-module__Button__icon-visual___zR2Hi,
.Primer_Brand__Button-module__Button--size-large___REN1l .Primer_Brand__Button-module__Button-arrow___SkJXQ {
height: var(--base-size-20);
width: var(--base-size-20);
}
.Primer_Brand__Button-module__Button--label-medium___DW2TM {
font-size: var(--brand-text-subhead-size-medium);
line-height: var(--brand-text-subhead-lineHeight-medium);
}
.Primer_Brand__Button-module__Button--label-large____iBy6 {
font-size: var(--brand-text-subhead-size-large);
line-height: var(--brand-text-subhead-lineHeight-large);
}
.Primer_Brand__Button-module__Button--block___F5RXs {
width: 100%;
}
@media (forced-colors: active) {
.Primer_Brand__Button-module__Button--disabled___Ba17E {
outline-color: GrayText;
}
/* Indicates disabled state in WHCM */
.Primer_Brand__Button-module__Button--label___lUBc0.Primer_Brand__Button-module__Button-label--disabled___ZBpbj {
color: GrayText;
}
}
/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
.Primer_Brand__Button-module__Button___lDruK,
.Primer_Brand__Button-module__Button___lDruK::before,
.Primer_Brand__Button-module__Button___lDruK::after,
.Primer_Brand__Button-module__Button___lDruK * {
animation: none !important;
transition: none !important;
scroll-behavior: auto !important;
}
}
.Primer_Brand__Heading-module__Heading___IVpmp {
--condensed-stretch: 75%;
color: var(--brand-color-text-default);
}
.Primer_Brand__Heading-module__Heading-font--hubot-sans___w3_5f {
--condensed-stretch: 90%;
}
[data-color-mode='dark'] .Primer_Brand__Heading-module__Heading___IVpmp {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.Primer_Brand__Heading-module__Heading-font--mona-sans___SCnTx {
font-family: var(--brand-heading-fontFamily);
}
.Primer_Brand__Heading-module__Heading-font--hubot-sans___w3_5f {
font-family: var(--brand-heading-fontFamilyAlt);
}
.Primer_Brand__Heading-module__Heading-font--monospace___dFpiK {
font-family: var(--brand-fontStack-monospace);
}
.Primer_Brand__Heading-module__Heading--display___xFecE {
font-weight: var(--brand-heading-weight-1000);
font-size: var(--brand-text-size-1000);
line-height: var(--brand-text-lineHeight-1000);
letter-spacing: var(--brand-text-letterSpacing-1000);
}
.Primer_Brand__Heading-module__Heading--subhead-large____C6GZ {
font-weight: var(--brand-text-subhead-weight-large);
font-size: var(--brand-text-subhead-size-large);
line-height: var(--brand-text-subhead-lineHeight-large);
}
.Primer_Brand__Heading-module__Heading--subhead-medium___Pik5E {
font-w