@layer starlight.overrides;

@layer starlight.overrides {
  :root,
  ::backdrop {
    /* fa-added */
    --balloon-color: var(--wa-color-accent-light);
    --balloon-text-color: var(--wa-color-neutral-0);
    --red-fa: hsla(360, 74%, 54%, 1);
    --yellow-fa: hsla(42, 96%, 50%, 1);
    --teal-fa: hsla(162, 85%, 35%, 1);
    --blue-fa: hsla(208, 83%, 41%, 1);
    --purple-fa: hsla(288, 54%, 46%, 1);
    --violet-fa: hsla(255, 67%, 55%, 1);
  }

  :root:not(.wa-dark),
  :root:not(.wa-dark) ::backdrop {
    /* Colours (light mode) */

    /* fa-added */
    --balloon-color: var(--wa-color-neutral-90);
    --balloon-text-color: var(--wa-color-neutral-0);
    --red-fa: hsla(360, 100%, 76%, 1);
    --yellow-fa: hsla(42, 100%, 62%, 1);
    --teal-fa: hsla(162, 72%, 65%, 1);
    --blue-fa: hsla(208, 96%, 72%, 1);
    --purple-fa: hsla(288, 85%, 78%, 1);
    --violet-fa: hsla(255, 94%, 79%, 1);
  }
}

@font-face {
  font-family: 'cera-round-pro';
  src: url(/assets/fonts/Cera-Round-Pro-Regular.woff2);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'cera-round-pro';
  src: url(/assets/fonts/Cera-Round-Pro-Bold.woff2);
  font-weight: 700;
  font-display: swap;
}

:root {
  /* starlight overrides */
  --wa-font-family: 'cera-round-pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

  --wa-font-family-body: 'cera-round-pro', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --wa-space-nav-y: 1rem;
  --wa-space-content-x: var(--spacing-lg-fa);
  --wa-space-sidebar-x: var(--spacing-lg-fa);

  /* font awesome added custom props */
  --border-radius-fa: 0.5rem;
  --border-width-fa: 2px;

  --box-shadow-depth-fa: 0.385rem;

  --spacing-sm-fa: 0.5rem;
  --spacing-md-fa: 1rem;
  --spacing-lg-fa: 1.5rem;
  --spacing-xl-fa: 2.5rem;

  /* vendor support */
  --balloon-border-radius: 2px;
  --balloon-font-size: 12px;
  --balloon-move: 4px;
}

/* == general == */

.content-panel table {
  display: table;
  width: 100%;
}

.content-panel table th {
  text-align: start;
}

.content-panel table tr {
  vertical-align: top;
}

.content-panel td {
  font-size: 0.95em;
}

.content-panel td code {
  font-size: 0.8em;
}

.content-panel hr {
  border-bottom: var(--border-width-fa) solid var(--wa-color-neutral-50);
  padding-block: 1rem;
}

/* remove separator since we don't show theme selector */

.social-icons {
  gap: 0;
}

.social-icons::after {
  border: none;
}

/* == buttons == */

.action,
.sl-link-button,
.button-fa {
  border-radius: var(--border-radius-fa);
  border: var(--border-width-fa) solid var(--wa-color-neutral-100);
  box-shadow: 0 var(--box-shadow-depth-fa) 0 var(--wa-color-neutral-100);
  background-color: var(--wa-color-neutral-0);
  color: var(--wa-color-neutral-100);
  font-weight: 700;
  transition: all 0.15s ease-in-out;
}

.action.primary,
.sl-link-button.primary,
.button-fa.primary {
  background-color: var(--wa-color-neutral-0);
  color: var(--wa-color-neutral-100);
}

.action.primary:hover,
.sl-link-button.primary:hover,
.button-fa.primary:hover {
  background-color: var(--wa-color-neutral-60);
}

.action.primary:active,
.sl-link-button.primary:active,
.button-fa.primary:active {
  box-shadow: none;
  transform: translateY(6px);
}

.button-fa {
  display: inline-block;
  text-decoration: none;
  margin-block: 0.5rem;
  padding: 0.75rem 1.25rem;
  color: var(--wa-color-neutral-90);
}

.button-fa:hover {
  background-color: var(--wa-color-neutral-20);
  border: var(--border-width-fa) solid var(--wa-color-neutral-100);
}

.button-fa > i {
  margin-inline: 0.5rem;
}

.button-fa.flat {
  border: var(--border-width-fa) solid var(--wa-color-neutral-50);
  box-shadow: none;
}

.button-fa.flat:active {
  transform: none;
}

.button-fa.flat:hover {
  border: var(--border-width-fa) solid var(--wa-color-neutral-100);
}

.button-fa.compact {
  padding: 0.25rem 0.75rem;
}

.pagination-links a {
  box-shadow: none;
}

.pagination-links .link-title {
  font-size: var(--wa-font-size-lg);
}

/* == cards == */

.card {
  border-radius: var(--border-radius-fa);
}

/* == tags == */
.tag {
  display: inline-block;
  border-radius: var(--border-radius-fa);
  padding: 0.5em 1em;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.0625em;
  white-space: nowrap;
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--wa-color-neutral-60);
  color: var(--wa-color-neutral-90);
}

.tag.top {
  position: absolute;
  top: -1em;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* a little janky but this targets the icon link card structure to add a bit more room */
.tag + span {
  margin-top: var(--spacing-sm-fa);
}

.tag.red {
  background: var(--red-fa);
  color: var(--wa-color-neutral-100);
}

.tag.yellow {
  background: var(--yellow-fa);
  color: var(--wa-color-neutral-100);
}

.tag.green {
  background: var(--teal-fa);
  color: var(--wa-color-neutral-100);
}

.tag.blue {
  background: var(--blue-fa);
  color: var(--wa-color-neutral-100);
}

.tag.purple {
  background: var(--purple-fa);
  color: var(--wa-color-neutral-100);
}

.tag.violet {
  background: var(--violet-fa);
  color: var(--wa-color-neutral-100);
}

.tag.navy {
  background: var(--wa-color-neutral-90);
  color: var(--wa-color-neutral-50);
}

/* these styles cover the default starlight link card and our custom icon link card */

.content-panel .sl-link-card {
  --card-bg-fa: var(--wa-color-neutral-0);

  background-color: var(--card-bg-fa);
  border: var(--border-width-fa) solid var(--card-bg-fa);
  border-radius: var(--border-radius-fa);
  box-shadow: 0 var(--box-shadow-depth-fa) 0 var(--wa-color-neutral-60);
  padding: var(--spacing-md-fa);
}

.content-panel :not(.card-grid) > .sl-link-card {
  margin-block-end: var(--spacing-lg-fa);
}

.content-panel .sl-link-card:hover {
  --card-bg-fa: var(--wa-color-neutral-0);

  background-color: var(--card-bg-fa);
  border: var(--border-width-fa) solid var(--wa-color-primary);
  box-shadow: 0 var(--box-shadow-depth-fa) 0 var(--wa-color-primary);
}

.content-panel .sl-link-card:active {
  transform: translateY(var(--box-shadow-depth-fa));
  box-shadow: none;
}

/* == alerts/messages == */

.starlight-aside {
  border-radius: var(--border-radius-fa);
  border: var(--border-width-fa) solid;
  margin-block: var(--spacing-lg-fa);
}

.starlight-aside--note {
  border-color: var(--wa-color-neutral-50);
  background-color: var(--wa-color-neutral-0);
}

.starlight-aside--info {
  border-color: var(--wa-color-primary);
  background-color: var(--wa-color-primary-dark);
}

.starlight-aside--tip {
  border-color: var(--wa-color-purple);
  background-color: var(--wa-color-purple-dark);
}

.starlight-aside--caution {
  border-color: var(--wa-color-warning);
  background-color: var(--wa-color-warning-dark);
}

.starlight-aside--danger {
  border-color: var(--wa-color-danger);
  background-color: var(--wa-color-danger-dark);
}

.starlight-aside.fa-message-setup ul {
  list-style-type: none;
}

.starlight-aside.fa-message-setup ul > li:before {
  display: inline-block;
  font-style: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  font-family: 'Font Awesome 6 Pro', 'Font Awesome 5 Pro';
  font-weight: 900;
  content: '\f058';
  margin-right: calc(1em * 1);
  margin-right: 16px;
  margin-left: -2em;
}

/* == code == */

.expressive-code {
  --ec-frm-frameBoxShdCssVal: none;
  --ec-brdWd: var(--border-width-fa);

  margin-bottom: var(--spacing-xl-fa);
}

div.ec-line {
  /* Fixes extra spacing on code blocks */
  margin-top: 0px !important;
}

.frame.is-terminal pre {
  margin: 0px !important;
}

.frame.has-title pre {
  margin: 0px !important;
}

/* == fa-docs specific == */
.banner {
  margin: var(--spacing-lg-fa) var(--wa-space-content-x);
  padding: var(--spacing-md-fa) var(--spacing-lg-fa);
  background-color: var(--wa-color-neutral-90);
  color: var(--wa-color-neutral-10);
  border-radius: var(--border-radius-fa);
}

.banner a {
  color: var(--wa-color-neutral-10);
}

.banner.wa-promo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: var(--spacing-sm-fa) var(--spacing-md-fa);
  background-color: #f36944;
  color: white;
  line-height: 1.5;
}

blockquote {
  width: fit-content;
  font-style: italic;
  padding-top: 0;
  padding-bottom: 0;
}

.header .site-title {
  font-size: var(--wa-font-size-m);
}

.site-title {
  font-size: var(--wa-font-size-2xl);
  font-weight: 600;
  color: var(--wa-color-accent);
  white-space: nowrap;
  text-decoration: none;
  font-family: 'cera-round-pro', 'Helvetica Neue', 'Helvetica';
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

/* == fa-added classes == */

.text-center {
  text-align: center;
}

.display-block {
  display: block;
}

.muted {
  color: var(--wa-color-neutral-80);
}

.icon-padding {
  padding: 0 8px 0 8px;
}

.remove-margins {
  margin: 0px !important;
}

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.5rem 1.5rem;
}

.theme-ravenclaw {
  --fa-secondary-opacity: 1;
  --fa-primary-color: rgb(4, 56, 161);
  --fa-secondary-color: rgb(108, 108, 108);
}

/* Since these don't come from FA CSS anymore, manually add them hre */
.sr-only,
.sr-only-focusable:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* web/style/animate.mdx Bug: Animating Icons in Safari example */
.animate-safari-bug-fix .fa-fix-animation-for-safari::before {
  padding-block: 0.1em;
}

.setup-callout {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding-top: 0px;
}

.setup-callout-icon {
  margin-right: 1rem;
}

.setup-callout h4 {
  font-size: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.card-icon {
  color: var(--wa-color-accent);
}

.pro-plus-callout {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding-top: 0px;
}

.pro-plus-callout h4 {
  font-size: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.pro-callout {
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  padding-top: 0px;
}

.pro-callout h4 {
  font-size: 1.25rem;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.basic-callout {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.basic-callout h4 {
  font-size: 1.15rem;
  margin-top: 0rem;
  margin-bottom: 0.5rem;
}

.iconLinkCard {
  margin-top: 2rem;
  margin-bottom: 2rem;
  color: rgb(20, 110, 189);
}

.example-block {
  border-width: 2px;
  border-style: solid;
  border-color: var(--wa-color-neutral-0);
  margin-top: 2rem;
  margin-bottom: 2rem;
}

a.wa-card-link,
a.wa-card-link:hover,
a.wa-card-link:focus {
  text-decoration: none;
}

.video-player {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

p img {
  border: var(--border-width-fa) solid var(--wa-color-gray-50);
  border-radius: var(--border-radius-fa);
}

.base64-block {
  border: 1px solid;
  padding: 1.15rem;
  margin: 1.15rem;
  border-radius: var(--border-radius-fa);
}

.feature-card-title {
  font-size: var(--wa-font-size-l);
  font-weight: var(--wa-font-weight-heading);
}

.wa-card-image-description {
  display: block;
  text-align: center;
  font-style: italic;
}

.wa-card-image {
  margin-bottom: 2rem;
}

.style-divider {
  width: 80%;
  margin: 0 auto;
}

.home-cards {
  display: inline-block;
  margin-bottom: 1rem;
}

.home-cards a {
  text-decoration: none;
}

.home-cards:hover wa-card {
  border-color: var(--wa-color-brand-border-loud);
  box-shadow: 0 0 0 0.0625rem var(--wa-color-brand-border-loud);
}