assets/css/primercss-overrides.scss
:root {
  /* Provide a value for the monospace var. */
  --primer-fontStack-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo,
    Consolas, "Liberation Mono", monospace;
}

ul,
ol {
  padding-inline-start: 0;
}

@if $scoped {
  :scope {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans",
      Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: var(--body-font-size, 14px);
    line-height: 1.5;
    color: var(--fgColor-default, var(--color-fg-default));
    background-color: var(--bgColor-default, var(--color-canvas-default));
  }

  @media (forced-colors: active) {
    :scope {
      --color-accent-emphasis: Highlight;
      --color-fg-on-emphasis: LinkText;
      --fgColor-onEmphasis: LinkText;
      --fgColor-accent: Highlight;
    }
  }
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    ul,
    ol {
      padding-left: unset;
      padding-right: 0;
    }
  }
} @else {
  html[dir="rtl"] ul,
  html[dir="rtl"] ol {
    padding-left: unset;
    padding-right: 0;
  }
}

/* Remove SelectMenu backdrop. */
.SelectMenu::before {
  display: none;
}

/* Remove SelectMenu animation (conflicts with appear transition). */
.SelectMenu-modal {
  animation: none;
}

/* Reset `margin-bottom: -1px` which causes a scrollbar. Replace with removal of bottom border. */
.Box-body:last-of-type {
  margin-bottom: 0;
  border-bottom: 0;
}

/* Remove redundant top spacing of first form group. */
.Box-body > .form-group:first-child {
  margin-top: 0;
}

/* Prevent row border styles from interfering with the box danger border style. */
.Box.Box--danger .Box-row,
.Box.color-border-danger .Box-row {
  border-color: inherit;
}

/* Add the right octicon styles for underline nav items, to avoid having to add class `UnderlineNav-octicon`. */
.UnderlineNav-item > .octicon {
  display: inline !important;
  color: var(--fgColor-muted);
  fill: var(--fgColor-muted);
}

@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .UnderlineNav-item > .octicon {
      margin-right: var(--base-size-8, 8px);
    }
  }

  html[dir="rtl"] .__AMP__ {
    .UnderlineNav-item > .octicon {
      margin-left: var(--base-size-8, 8px);
    }
    .UnderlineNav .Counter {
      margin-right: var(--control-medium-gap, 8px);
      margin-left: 0;
    }
  }
} @else {
  html:not([dir="rtl"]) .UnderlineNav-item > .octicon {
    margin-right: var(--base-size-8, 8px);
  }

  html[dir="rtl"] .UnderlineNav-item > .octicon {
    margin-left: var(--base-size-8, 8px);
  }

  html[dir="rtl"] .UnderlineNav .Counter {
    margin-right: var(--control-medium-gap, 8px);
    margin-left: 0;
  }
}

/* Use flex layout */
.SideNav-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Add the right octicon styles for side nav items, to avoid having to add class `SideNav-icon`. */
.SideNav-item > .octicon,
.SideNav-subItem > .octicon {
  width: var(--base-size-16, 16px);
  color: var(--fgColor-muted);
}

/* Support leading and trailing icons. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.pl-button__content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -- idem (medium button) */
.btn {
  height: var(--base-size-32, 32px);
  padding: 0 var(--base-size-12, 12px);
  gap: var(--base-size-8, 8px);
}

.btn .pl-button__content {
  gap: var(--base-size-8, 8px);
}

/* -- idem (small button) */
.btn.btn-sm {
  height: 28px;
  padding: 0 var(--base-size-8, 8px);
  gap: var(--base-size-6, 6px);
}

.btn.btn-sm .pl-button__content {
  gap: var(--base-size-6, 6px);
}

/* -- idem (large button) */
.btn.btn-large {
  height: var(--primer-control-large-size, 40px);
  padding: 0 var(--base-size-16, 16px);
  gap: var(--base-size-8, 8px);
}

.btn.btn-large .pl-button__content {
  gap: var(--base-size-8, 8px);
}

/* -- idem */
.btn .octicon,
.btn .dropdown-caret,
.btn .Counter {
  margin-left: 0;
  margin-right: 0;
}

/* Support aligning content at the start. */
.btn.pl-button-aligned--start {
  display: grid;
  grid-template-columns: minmax(0, auto) var(--base-size-8, 8px);
  justify-content: space-between;
}

/* Resize octicon in a small button. */
.btn-sm .octicon[width="16"],
.btn-sm .octicon[height="16"] {
  width: 14px;
  height: 14px;
}

/* Use consistent height for large buttons. */
.btn-large {
  height: var(--primer-control-large-size, 40px);
  padding-top: 0;
  padding-bottom: 0;
}

/* Fix too small dropdown menu */
.dropdown-menu {
  width: auto;
  min-width: 160px;
}

/* Remove bullets from ul */
.dropdown-menu ul {
  list-style: none;
}

/* Fix dropdown-menu styling with dir=rtl */
/* -- Base */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .dropdown-item {
      padding-left: var(--control-medium-paddingInline-condensed, 8px);
      padding-right: var(--control-medium-paddingInline-spacious, 16px);
    }
  }
} @else {
  html[dir="rtl"] .dropdown-item {
    padding-left: var(--control-medium-paddingInline-condensed, 8px);
    padding-right: var(--control-medium-paddingInline-spacious, 16px);
  }
}

/* -- w */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .dropdown-menu-w {
      right: auto;
      margin-left: 8px;
      margin-right: 0;
      left: 100%;
    }
    .dropdown-menu-w:before {
      border-color: rgba(0, 0, 0, 0);
      border-right-color: var(--control-borderColor-rest);
      right: auto;
      left: calc(-1 * var(--base-size-16, 16px));
    }
    .dropdown-menu-w:after {
      border-color: rgba(0, 0, 0, 0);
      border-right-color: var(--overlay-bgColor);
      right: auto;
      left: -14px;
    }
  }
} @else {
  html[dir="rtl"] .dropdown-menu-w {
    right: auto;
    margin-left: 8px;
    margin-right: 0;
    left: 100%;
  }

  html[dir="rtl"] .dropdown-menu-w:before {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: var(--control-borderColor-rest);
    right: auto;
    left: calc(-1 * var(--base-size-16, 16px));
  }

  html[dir="rtl"] .dropdown-menu-w:after {
    border-color: rgba(0, 0, 0, 0);
    border-right-color: var(--overlay-bgColor);
    right: auto;
    left: -14px;
  }
}

/* -- e */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .dropdown-menu-e {
      left: auto;
      right: 100%;
      margin-right: 8px;
      margin-left: 0;
    }
    .dropdown-menu-e:before {
      border-color: rgba(0, 0, 0, 0);
      border-left-color: var(--control-borderColor-rest);
      right: calc(-1 * var(--base-size-16, 16px));
      left: auto;
    }
    .dropdown-menu-e:after {
      border-color: rgba(0, 0, 0, 0);
      border-left-color: var(--overlay-bgColor);
      right: -14px;
      left: auto;
    }
  }
} @else {
  html[dir="rtl"] .dropdown-menu-e {
    left: auto;
    right: 100%;
    margin-right: 8px;
    margin-left: 0;
  }

  html[dir="rtl"] .dropdown-menu-e:before {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: var(--control-borderColor-rest);
    right: calc(-1 * var(--base-size-16, 16px));
    left: auto;
  }

  html[dir="rtl"] .dropdown-menu-e:after {
    border-color: rgba(0, 0, 0, 0);
    border-left-color: var(--overlay-bgColor);
    right: -14px;
    left: auto;
  }
}

/* -- ne */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .dropdown-menu-ne {
      right: 0;
      left: auto;
    }
    .dropdown-menu-ne:after,
    .dropdown-menu-ne:before {
      left: auto;
    }
    .dropdown-menu-ne:before {
      right: 9px;
      left: auto;
    }
    .dropdown-menu-ne:after {
      right: 10px;
      left: auto;
    }
  }
} @else {
  html[dir="rtl"] .dropdown-menu-ne {
    right: 0;
    left: auto;
  }

  html[dir="rtl"] .dropdown-menu-ne:after,
  html[dir="rtl"] .dropdown-menu-ne:before {
    left: auto;
  }

  html[dir="rtl"] .dropdown-menu-ne:before {
    right: 9px;
    left: auto;
  }

  html[dir="rtl"] .dropdown-menu-ne:after {
    right: 10px;
    left: auto;
  }
}

/* -- s */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .dropdown-menu-s {
      right: auto;
      left: 50%;
      transform: translateX(-50%);
    }
    .dropdown-menu-s:before {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
    .dropdown-menu-s:after {
      left: 50%;
      right: auto;
      transform: translateX(-50%);
    }
  }
} @else {
  html[dir="rtl"] .dropdown-menu-s {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
  }

  html[dir="rtl"] .dropdown-menu-s:before {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  html[dir="rtl"] .dropdown-menu-s:after {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* -- sw */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .dropdown-menu-sw {
      right: auto;
      left: 0;
    }
    .dropdown-menu-sw:before {
      right: auto;
      left: 9px;
    }
    .dropdown-menu-sw:after {
      right: auto;
      left: 10px;
    }
  }
} @else {
  html[dir="rtl"] .dropdown-menu-sw {
    right: auto;
    left: 0;
  }

  html[dir="rtl"] .dropdown-menu-sw:before {
    right: auto;
    left: 9px;
  }

  html[dir="rtl"] .dropdown-menu-sw:after {
    right: auto;
    left: 10px;
  }
}

/* -- se */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .dropdown-menu-se {
      right: 0;
      left: auto;
    }
    .dropdown-menu-se:before {
      right: 9px;
      left: auto;
    }
    .dropdown-menu-se:after {
      right: 10px;
      left: auto;
    }
  }
} @else {
  html[dir="rtl"] .dropdown-menu-se {
    right: 0;
    left: auto;
  }

  html[dir="rtl"] .dropdown-menu-se:before {
    right: 9px;
    left: auto;
  }

  html[dir="rtl"] .dropdown-menu-se:after {
    right: 10px;
    left: auto;
  }
}

/* Fix animated_ellipsis styling with dir=rtl */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .AnimatedEllipsis::after {
      animation: AnimatedEllipsis-keyframes-rtl
        1.2s
        steps(4, jump-none)
        infinite;
    }
  }
} @else {
  html[dir="rtl"] .AnimatedEllipsis::after {
    animation: AnimatedEllipsis-keyframes-rtl 1.2s steps(4, jump-none) infinite;
  }
}

@keyframes AnimatedEllipsis-keyframes-rtl {
  0% {
    transform: translateX(100%);
  }
}

/* Fix filter styling with dir=rtl */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .filter-item .count {
      float: left;
    }
  }
} @else {
  html[dir="rtl"] .filter-item .count {
    float: left;
  }
}

/* Menu item: use gap instead of margins */
.menu-item {
  display: flex;
  align-items: flex-start;
  gap: var(--control-medium-gap, 8px);
}

.menu-item > * {
  flex-grow: 1;
}

.menu-item .octicon,
.menu-item .Counter {
  flex-grow: 0;
  flex-shrink: 0;
  margin: 1px 0 0 0;
}
.menu-item .octicon {
  min-height: 20px;
}

/* Fix pagination with dir=rtl */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .pagination .next_page:after,
    .pagination .previous_page:before {
      transform: scaleX(-1);
    }
  }
} @else {
  html[dir="rtl"] .pagination .next_page:after,
  html[dir="rtl"] .pagination .previous_page:before {
    transform: scaleX(-1);
  }
}

/* Give validation message and caption not inside a .FormControl a default top margin. */
.FormControl-inlineValidation,
.FormControl-caption {
  margin-top: var(--base-size-4, 4px);
}

/* Align icon with text */
.FormControl-inlineValidation > .octicon {
  margin-top: 2px;
}

/* -- and reset it when inside a form control. */
.FormControl .FormControl-inlineValidation,
.FormControl-radio-labelWrap .FormControl-inlineValidation,
.FormControl-checkbox-labelWrap .FormControl-inlineValidation {
  margin-top: 0;
}

/* -- idem for caption */
.FormControl .FormControl-caption {
  margin-top: 0;
}

.FormControl .FormControl-caption,
.FormControl-radio-labelWrap .FormControl-caption,
.FormControl-checkbox-labelWrap .FormControl-caption {
  /* Specification derived from screenshot in https://primer.style/components/checkbox-group */
  margin-top: 1px;
}

/* -- idem for form group header and bottom margin. */
.FormControl.form-group .form-group-header {
  margin: 0;
}

/* Prevent that FormControl each child element grows with the widest */
.FormControl {
  align-items: flex-start;
}

/* -- idem */
.FormControl-input,
.FormControl-select,
.FormControl-textarea {
  width: auto;
}

/* -- idem (restore full width) */
.FormControl.FormControl--fullWidth,
.FormControl--fullWidth .FormControl-input,
.FormControl--fullWidth .FormControl-textarea,
.FormControl--fullWidth .FormControl-select-wrap,
.FormControl--fullWidth .FormControl-select {
  width: 100%;
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .FormControl-select-wrap .FormControl-select {
      padding-left: var(--base-size-20, 20px);
      padding-right: var(--base-size-8, 8px);
    }
    .FormControl-select-wrap:after {
      margin-left: var(--base-size-4, 4px);
      padding-right: 0;
    }
  }
} @else {
  html[dir="rtl"] .FormControl-select-wrap .FormControl-select {
    padding-left: var(--base-size-20, 20px);
    padding-right: var(--base-size-8, 8px);
  }

  html[dir="rtl"] .FormControl-select-wrap:after {
    margin-left: var(--base-size-4, 4px);
    padding-right: 0;
  }
}

/* Format form group label and fieldset legend for required marker */
.form-group-header {
  display: flex;
  gap: 0.25rem;
  align-items: baseline;
}

/* Set disabled state to FormControl. */
.FormControl.pl-FormControl-disabled,
.FormControl.pl-FormControl-disabled .FormControl-label,
fieldset[disabled] .form-group-header,
fieldset[disabled] .FormControl-caption,
fieldset[disabled] .FormControl-label {
  color: var(--fgColor-disabled);
  cursor: not-allowed;
}

/* -- idem for checkbox and radio. */
.FormControl.pl-FormControl-disabled .FormControl-checkbox,
.FormControl.pl-FormControl-disabled .FormControl-radio {
  border-color: var(--control-borderColor-rest);
  cursor: not-allowed;
}

/* Allow inputs without FormControl to set full width. */
.FormControl-input.FormControl--fullWidth,
.FormControl-textarea.FormControl--fullWidth,
.FormControl-select-wrap.FormControl--fullWidth,
.FormControl-select.FormControl--fullWidth {
  width: 100%;
}

/* Don't set height on textareas. */
.FormControl-textarea.FormControl-small,
.FormControl-textarea.FormControl-medium,
.FormControl-textarea.FormControl-large {
  height: auto;
}

/* Don't set height on multiple selects. */
.FormControl-select[multiple].FormControl-small,
.FormControl-select[multiple].FormControl-medium,
.FormControl-select[multiple].FormControl-large {
  height: auto;
}

/* Set auto width on select wrapper. */
.FormControl-select-wrap {
  grid-template-columns: minmax(0, min-content) var(--base-size-16, 16px);
}

/* -- and set to full width when FormControl--fullWidth. */
.FormControl-select-wrap.FormControl--fullWidth {
  grid-template-columns: minmax(0, auto) var(--base-size-16, 16px);
}

/* Mute arrow icon when disabled. */
.pl-FormControl-select-wrap--disabled:after {
  background-color: var(--fgColor-disabled);
}

/* Don't create space for dropdown icon on multiple selects. */
.FormControl-select-wrap.pl-multiple-select .FormControl-select {
  padding-inline: var(--base-size-8, 8px);
}

/* Don't show dropdown icon on multiple selects. */
.FormControl-select-wrap.pl-multiple-select:after {
  display: none;
}

/* Set disabled color on read-only field with inset style */
.FormControl-input[readonly].FormControl-inset {
  background-color: var(--control-bgColor-disabled);
}

/* Support input-group with group button when using FormControl-x elements. */
@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .input-group .FormControl-input[type="text"] {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  html[dir="rtl"] .__AMP__ {
    .input-group .FormControl-input[type="text"] {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .input-group-button:last-child .btn {
      margin-right: -1px;
      margin-left: 0;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-top-left-radius: $border-radius;
      border-bottom-left-radius: $border-radius;
    }
  }
} @else {
  html:not([dir="rtl"]) .input-group .FormControl-input[type="text"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  html[dir="rtl"] .input-group .FormControl-input[type="text"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="rtl"] .input-group-button:last-child .btn {
    margin-right: -1px;
    margin-left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: $border-radius;
    border-bottom-left-radius: $border-radius;
  }
}

/* -- idem */
.input-group .FormControl-input {
  width: 100%;
}

/* -- Show entire border on error */
@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .input-group
      > .FormControl-input[invalid][type="text"]
      + .input-group-button
      > .btn {
      border-left-color: var(--borderColor-danger-emphasis);
    }
  }
  html[dir="rtl"] .__AMP__ {
    .input-group
      > .FormControl-input[invalid][type="text"]
      + .input-group-button
      > .btn {
      border-right-color: var(--borderColor-danger-emphasis);
    }
  }
} @else {
  html:not([dir="rtl"])
    .input-group
    > .FormControl-input[invalid][type="text"]
    + .input-group-button
    > .btn {
    border-left-color: var(--borderColor-danger-emphasis);
  }

  html[dir="rtl"]
    .input-group
    > .FormControl-input[invalid][type="text"]
    + .input-group-button
    > .btn {
    border-right-color: var(--borderColor-danger-emphasis);
  }
}

/* -- Position trailing action */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .FormControl-input-trailingAction {
      left: var(--base-size-4, 4px);
      right: auto;
    }
  }
} @else {
  html[dir="rtl"] .FormControl-input-trailingAction {
    left: var(--base-size-4, 4px);
    right: auto;
  }
}

/* Provide default values for trailing action separator. */
.FormControl-input-wrap
  .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before {
  height: var(--base-size-16, 16px);
  width: var(--borderWidth-thin, 1px);
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .FormControl-input-wrap
      .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before {
      right: calc(var(--base-size-4, 4px) * -1);
      left: auto;
    }
  }
} @else {
  html[dir="rtl"]
    .FormControl-input-wrap
    .FormControl-input-trailingAction.FormControl-input-trailingAction--divider:before {
    right: calc(var(--base-size-4, 4px) * -1);
    left: auto;
  }
}

/* Make radio_tabs a bit more useful on RTL */
.radio-group-wrapper {
  display: flex;
  align-items: flex-start;
}

/* Remove padding and margin for "icon only" button inside a trailing action. */
.FormControl-input-trailingAction .btn-octicon {
  padding: 0;
  margin: 0;
}

/* Make button clicks work inside a trailing action. */
.FormControl-input-trailingAction button {
  position: relative;
  z-index: 1;
}

/* Conditional trailing action. */
input:placeholder-shown
  + .FormControl-input-trailingAction.pl-trailingAction--if-value {
  visibility: hidden;
}

/* -- idem */
input:not(:placeholder-shown)
  + .FormControl-input-trailingAction.pl-trailingAction--if-value {
  visibility: visible;
}

/* -- idem */
.FormControl-inlineValidation--success {
  color: var(--fgColor-success);
  fill: var(--fgColor-success);
}

/* Use bold font only when the control is an input group */
.FormControl-inlineValidation {
  font-weight: 400;
}

.FormControl.pl-FormControl--input-group .FormControl-inlineValidation {
  font-weight: var(--base-text-weight-semibold, 600);
}

/* Style links inside validation messages. */
.FormControl-inlineValidation a[href] {
  color: inherit;
  text-decoration: underline;
}

/* Style links inside caption messages. */
.FormControl-caption a[href] {
  color: inherit;
  text-decoration: underline;
}

/* Reset field error state to initial if the field status is neutral. */
.FormControl-input[invalid]:not(:focus) .pl-neutral,
.FormControl-textarea[invalid]:not(:focus) .pl-neutral,
.FormControl-select[invalid]:not(:focus) .pl-neutral {
  border-color: var(--control-borderColor-rest);
}

/* -- idem */
.FormControl-input:not(:focus)[invalid] .pl-neutral,
.FormControl-select:not(:focus)[invalid] .pl-neutral {
  border-color: var(--control-borderColor-rest);
}

/* -- idem */
.pl-valid + .FormControl-inlineValidation--error,
.pl-neutral + .FormControl-inlineValidation--error {
  display: none;
}

.pl-invalid + .FormControl-inlineValidation--success {
  display: none;
}

/* Remove error color from radios and checkboxes. */
input.FormControl-checkbox[type="checkbox"][invalid]:not(:focus),
input.FormControl-radio[type="radio"][invalid]:not(:focus) {
  border-color: var(--bgColor-neutral-emphasis);
}

/* Set visual error state to neutral if preceding marker element has class pl-valid. */
.pl-valid .FormControl-input:not(:focus)[invalid],
.pl-valid .FormControl-textarea:not(:focus)[invalid],
.pl-valid .FormControl-select:not(:focus),
.pl-valid .FormControl-select:not(:focus)[invalid] {
  border-color: var(--borderColor-success-emphasis);
}

.pl-neutral .FormControl-input:not(:focus)[invalid],
.pl-neutral .FormControl-textarea:not(:focus)[invalid],
.pl-neutral .FormControl-select:not(:focus)[invalid] {
  border-color: var(--control-borderColor-rest);
}

/* Copy checkbox emphasis style to FormControl checkbox and radio button.*/
.FormControl-checkbox-wrap .FormControl-label em.highlight,
.FormControl-radio-wrap .FormControl-label em.highlight {
  position: relative;
  left: calc(-1 * var(--base-size-4, 4px));
  padding: 2px var(--base-size-4, 4px);
  font-style: normal;
  background: var(--bgColor-attention-muted);
  border-radius: $border-radius;
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .FormControl-checkbox-wrap .FormControl-label em.highlight,
    .FormControl-radio-wrap .FormControl-label em.highlight {
      right: calc(-1 * var(--base-size-4, 4px));
      left: auto;
    }
  }
} @else {
  html[dir="rtl"] .FormControl-checkbox-wrap .FormControl-label em.highlight,
  html[dir="rtl"] .FormControl-radio-wrap .FormControl-label em.highlight {
    right: calc(-1 * var(--base-size-4, 4px));
    left: auto;
  }
}

/* Use the radio styling from FormControl-radio for radio-group inputs. */
.radio-group input[type="radio"].radio-input.FormControl-radio {
  margin: 10px calc(var(--base-size-32, 32px) * -1) 0 var(--base-size-16, 16px);
  width: 13px;
  height: 13px;
}

/* Remove checkbox animation dururation because the effect appears to lag compared to other page updates. */
@media screen and (prefers-reduced-motion: no-preference) {
  input.FormControl-checkbox[type="checkbox"]:checked:before {
    animation-duration: 0ms;
    animation-delay: 0ms;
  }
}

/* Disable form elements when wrapping fieldset is disabled. */
fieldset[disabled] * {
  pointer-events: none;
}

fieldset[disabled] input.FormControl-radio[type="radio"]:not(:focus),
fieldset[disabled] input.FormControl-checkbox[type="checkbox"]:not(:focus) {
  -webkit-text-fill-color: var(--fgColor-disabled);
  background-color: var(--control-bgColor-disabled);
  border-color: var(--control-borderColor-rest);
  color: var(--fgColor-disabled);
  cursor: not-allowed;
  opacity: 1;
}

/* -- idem */
fieldset[disabled] legend.FormControl-label,
fieldset[disabled] .FormControl-checkbox-labelWrap .FormControl-label,
fieldset[disabled] .FormControl-radio-labelWrap .FormControl-label {
  color: var(--fgColor-disabled);
  cursor: not-allowed;
}

/* -- idem */
fieldset[disabled] .FormControl-input,
fieldset[disabled] .FormControl-textarea,
fieldset[disabled] .FormControl-select {
  color: var(--fgColor-disabled);
  background-color: var(--control-bgColor-disabled);
  border-color: var(--control-borderColor-rest);
  -webkit-text-fill-color: var(--fgColor-disabled);
  opacity: 1;
  cursor: not-allowed;
}

/* -- idem */
fieldset[disabled] .FormControl-input::placeholder,
fieldset[disabled] .FormControl-textarea::placeholder {
  color: var(--fgColor-disabled);
}

@if $scoped {
  ul.ActionList:not(.ActionList--full, .ActionList--subGroup),
  html[dir="rtl"] .__AMP__ {
    ul.ActionList:not(.ActionList--full, .ActionList--subGroup) {
      padding: var(--base-size-8, 8px);
    }
  }
} @else {
  ul.ActionList:not(.ActionList--full, .ActionList--subGroup),
  html[dir="rtl"] ul.ActionList:not(.ActionList--full, .ActionList--subGroup) {
    padding: var(--base-size-8, 8px);
  }
}

/* Hide UI state elements when they are not interactive */
div.ActionList-content--visual16,
div.ActionList-content--visual20,
div.ActionList-content--visual24 {
  padding: 0;
  height: 0;
}

/* -- RTL support */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .ActionList-content > :not(:last-child) {
      margin-right: 0;
      margin-left: $spacer-2;
    }
  }
} @else {
  html[dir="rtl"] .ActionList-content > :not(:last-child) {
    margin-right: 0;
    margin-left: $spacer-2;
  }
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .ActionList-content[aria-expanded] {
      + .ActionList--subGroup {
        padding-left: 0;
      }
      // has 16px leading visual
      &.ActionList-content--visual16 + .ActionList--subGroup {
        .ActionList-content {
          padding-left: 0;
          padding-right: $spacer-5;
        }
      }

      // has 20px leading visual
      &.ActionList-content--visual20 + .ActionList--subGroup {
        .ActionList-content {
          padding-left: 0;
          padding-right: $spacer-2 * 4.5; // 36px
        }
      }

      // has 24px leading visual
      &.ActionList-content--visual24 + .ActionList--subGroup {
        .ActionList-content {
          padding-left: 0;
          padding-right: $spacer-6;
        }
      }
    }
  }
} @else {
  html[dir="rtl"] .ActionList-content[aria-expanded] {
    + .ActionList--subGroup {
      padding-left: 0;
    }
    // has 16px leading visual
    &.ActionList-content--visual16 + .ActionList--subGroup {
      .ActionList-content {
        padding-left: 0;
        padding-right: $spacer-5;
      }
    }

    // has 20px leading visual
    &.ActionList-content--visual20 + .ActionList--subGroup {
      .ActionList-content {
        padding-left: 0;
        padding-right: $spacer-2 * 4.5; // 36px
      }
    }

    // has 24px leading visual
    &.ActionList-content--visual24 + .ActionList--subGroup {
      .ActionList-content {
        padding-left: 0;
        padding-right: $spacer-6;
      }
    }
  }
}

/* Align checkbox styles with action list select icons. */
/* Multiple select: use smaller checkboxes when shown in an action list (mimic ui icon "multiple-select-16") */
.ActionList-item-visual
  .ActionList-item-multiSelectIcon
  input.FormControl-checkbox[type="checkbox"],
.ActionList-item-visual
  .ActionList-item-singleSelectCheckmark
  input.FormControl-checkbox[type="checkbox"] {
  width: var(--base-size-16, 16px);
  height: var(--base-size-16, 16px);
  margin: 0;
  box-shadow: none;
}

/* -- idem */
.ActionList-item-visual
  .ActionList-item-multiSelectIcon
  input.FormControl-checkbox[type="checkbox"] {
  border-color: var(--control-borderColor-rest);
}

/* -- idem */
.ActionList-item-visual
  .ActionList-item-multiSelectIcon
  input.FormControl-checkbox[type="checkbox"]:checked {
  border-color: var(--focus-outlineColor);
}

/* -- idem */
.ActionList-item-visual
  .ActionList-item-multiSelectIcon
  input.FormControl-checkbox[type="checkbox"]:before {
  height: 12px;
  width: 12px;
}

/* -- idem */
.ActionList-item-visual
  .ActionList-item-multiSelectIcon.FormControl-checkbox-wrap,
.ActionList-item-visual
  .ActionList-item-multiSelectIcon.FormControl-radio-wrap {
  gap: 0;
  width: var(--base-size-16, 16px);
}

/* Use borderless checkboxes when shown in an action list, single select style (mimic ui icon "single-select-16") */
.ActionList-item-visual
  .ActionList-item-singleSelectCheckmark
  input.FormControl-checkbox[type="checkbox"] {
  background: none;
  border: none;
}

/* -- idem */
.ActionList-item-visual
  .ActionList-item-singleSelectCheckmark
  input.FormControl-checkbox[type="checkbox"]:before {
  background-color: var(--fgColor-muted);
}

/* -- idem */
.ActionList-item-visual
  .ActionList-item-singleSelectCheckmark.FormControl-checkbox-wrap,
.ActionList-item-visual
  .ActionList-item-singleSelectCheckmark.FormControl-radio-wrap {
  gap: 0;
  width: var(--base-size-16, 16px);
}

/* Hide radio inputs in an action list. */
.ActionList-item-visual
  .ActionList-item-singleSelectCheckmark
  input.FormControl-radio[type="radio"] {
  visibility: hidden;
  width: 0;
  border: 0;
}

/* -- idem - reduce label element height. */
.ActionList-item-visual
  .ActionList-item-singleSelectCheckmark
  .FormControl-radio-labelWrap
  .FormControl-label {
  display: grid;
}

/* -- idem - shorten animation duration. */
@media screen and (prefers-reduced-motion: no-preference) {
  .ActionList-item[aria-checked="false"] .ActionList-item-singleSelectCheckmark,
  .ActionList-item[aria-selected="false"]
    .ActionList-item-singleSelectCheckmark,
  .ActionList-item[aria-checked="true"] .ActionList-item-singleSelectCheckmark,
  .ActionList-item[aria-selected="true"]
    .ActionList-item-singleSelectCheckmark {
    animation-duration: 80ms;
  }
}

/* -- Spacing of description in inline item: use gap instead of margins */
.ActionList-item-descriptionWrap {
  column-gap: var(--base-size-8, 8px);
  row-gap: var(--base-size-4, 4px);
}
.ActionList-item-descriptionWrap .ActionList-item-description {
  margin: 0;
}

/* Center SVG within leading visual. */
.FormControl-input-wrap .FormControl-input-leadingVisualWrap {
  display: grid;
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .FormControl-input-wrap .FormControl-input-leadingVisualWrap {
      right: var(--base-size-8, 8px);
      left: auto;
    }
  }
} @else {
  html[dir="rtl"] .FormControl-input-wrap .FormControl-input-leadingVisualWrap {
    right: var(--base-size-8, 8px);
    left: auto;
  }
}

/* Remove whitespace introduced by the default display: inline-block */
.btn-octicon,
.close-button {
  flex-shrink: 0;
  margin: -10px;
  padding: 10px;
}

.btn-octicon {
  font-size: 0;
}

.close-button {
  line-height: 0;
  box-shadow: none;
}

/* Improve subnav layout on small screens. */
.subnav {
  display: flex;
}

.subnav-search {
  display: flex;
  flex-grow: 1;
  margin-left: 0;
}

/* -- idem */
@media (min-width: 544px) {
  .subnav-search {
    flex-grow: unset;
  }
}

/* Add the right styles for search input inside subnav, to avoid having to add class `subnav-search-input`. */
/* input[type="search"] will display a search icon (when .octicon SVG exists). */
.subnav-search input[type="text"],
.subnav-search input[type="search"] {
  color: var(--fgColor-muted);
  flex-grow: 1;
}

/* -- idem */
.subnav-search input[type="text"].input-block,
.subnav-search input[type="search"].input-block {
  width: 100%;
}

/* -- idem */
.subnav-search input[type="search"] {
  padding-left: var(--base-size-32, 32px);
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .subnav-search input[type="search"] {
      padding-right: var(--base-size-32, 32px);
      padding-left: 0;
    }
    .subnav-search-icon {
      right: var(--base-size-8, 8px);
      left: auto;
    }
  }
} @else {
  html[dir="rtl"] .subnav-search input[type="search"] {
    padding-right: var(--base-size-32, 32px);
    padding-left: 0;
  }
  html[dir="rtl"] .subnav-search-icon {
    right: var(--base-size-8, 8px);
    left: auto;
  }
}

/* -- idem */
.subnav-search input + .octicon {
  display: none;
}

/* -- idem */
.subnav-search input[type="search"] + .octicon {
  position: absolute;
  top: var(--base-size-8, 8px);
  left: var(--base-size-8, 8px);
  display: block;
  color: var(--fgColor-muted);
  text-align: center;
  pointer-events: none;
}

/* -- idem */
@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .subnav-search-context + .subnav-search input[type="text"],
    .subnav-search-context + .subnav-search input[type="search"] {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .subnav-search-context .btn {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .subnav-search-context + .subnav-search {
      margin-left: -1px;
    }
  }
  html[dir="rtl"] .__AMP__ {
    .subnav-search-context .btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .subnav-search-context + .subnav-search input[type="text"],
    .subnav-search-context + .subnav-search input[type="search"] {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .subnav-search-context + .subnav-search {
      margin-right: -1px;
      margin-left: 0;
    }
  }
} @else {
  html:not([dir="rtl"])
    .subnav-search-context
    + .subnav-search
    input[type="text"],
  html:not([dir="rtl"])
    .subnav-search-context
    + .subnav-search
    input[type="search"] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  html:not([dir="rtl"]) .subnav-search-context .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  html:not([dir="rtl"]) .subnav-search-context + .subnav-search {
    margin-left: -1px;
  }

  html[dir="rtl"] .subnav-search-context .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  html[dir="rtl"] .subnav-search-context + .subnav-search input[type="text"],
  html[dir="rtl"] .subnav-search-context + .subnav-search input[type="search"] {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  html[dir="rtl"] .subnav-search-context + .subnav-search {
    margin-right: -1px;
    margin-left: 0;
  }
}

/* Support wrapping of subnav child elements. */
.subnav.pl-subnav--wrap {
  gap: 12px;
  flex-wrap: wrap;
}

/* -- idem - remove float style */
.subnav.pl-subnav--wrap:before,
.subnav.pl-subnav--wrap:after {
  display: none;
}

/* Tweak box header whitespace so that any adjacent buttons align nicely. */
.Box-title {
  line-height: 1.25;
}

/* Ensure that successive Box-row siblings don't show rounded top corners. */
.Box-header + .Box-row,
.Box-row + .Box-row,
.Box-header + [data-stream-container] > .Box-row:first-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Don't show link menu appearance for non-link items such as single and multiple select items: */
/* hide selection line at left and selection background. */
.ActionList-item:not(.ActionList-item--navActive)[aria-selected="true"]:not(
    :hover
  ) {
  background: none;
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .ActionList-item.ActionList-item--navActive:not(
        .ActionList-item--danger
      ):after {
      right: calc(-1 * var(--base-size-8, 8px));
      left: auto;
    }
  }
} @else {
  html[dir="rtl"]
    .ActionList-item.ActionList-item--navActive:not(
      .ActionList-item--danger
    ):after {
    right: calc(-1 * var(--base-size-8, 8px));
    left: auto;
  }
}

/* -- idem */
.ActionList-item:not(.ActionList-item--navActive)[aria-selected="true"]::after {
  display: none;
}

/* Add space to label following an octicon. */
.ActionList-item-label > .octicon + span {
  margin-left: var(--base-size-8, 8px);
}

/* Adjust leading visual to size setting  */
.ActionList-content--visual20 .ActionList-item-visual--leading {
  width: 20px;
}

/* Align label and trailing icon with leading icon */
.ActionList-content--visual24 .ActionList-item-label {
  padding: 2px 0;
}

.ActionList-content--visual24 .ActionList-item-visual--trailing {
  min-height: 24px;
}

/* Hide sub group toggles that are not button */
span.ActionList-content[aria-expanded] {
  display: none;
}

/* Hide empty labels */
.ActionList-item-label:empty {
  display: none;
}

/* For ActionMenu, take SelectMenu non-mobile style for all screen sizes. */
.ActionMenu {
  position: absolute;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  padding: 0;
}

/* Restore hover when ActionList-content is used on a label */
label.ActionList-content {
  cursor: inherit;
}

/* Fix ActionList-content styling with dir=rtl */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .ActionList-content {
      text-align: right;
    }
  }
} @else {
  html[dir="rtl"] .ActionList-content {
    text-align: right;
  }
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .ActionList-content > :not(:last-child) {
      margin-right: 0;
      margin-left: var(--base-size-8, 8px);
    }
  }
} @else {
  html[dir="rtl"] .ActionList-content > :not(:last-child) {
    margin-right: 0;
    margin-left: var(--base-size-8, 8px);
  }
}

/* Reset extra padding for touch devices because lots of layouts break because of it. */
@media (pointer: coarse) {
  .ActionList-content {
    padding-top: var(--base-size-8, 8px);
    padding-bottom: var(--base-size-8, 8px);
  }
}

/* Mimic Primer/React's ActionMenu overlay style. */
.ActionMenu-modal {
  position: relative;
  z-index: 99;
  display: flex;
  overflow: hidden;
  pointer-events: auto;
  flex-direction: column;
  background-color: var(--overlay-bgColor);
  border-radius: 12px;
  box-shadow: var(--shadow-floating-legacy, var(--color-overlay-shadow));
  min-width: 192px;
  max-width: 640px;
  border: none;
  margin: var(--base-size-8, 8px) 0 var(--base-size-16, 16px) 0;
}

/* Header */

/* -- Make whitespace work on both sides. */
.Header {
  column-gap: var(--base-size-16, 16px);
}

/* -- idem */
.Header-item {
  margin-left: 0;
  margin-right: 0;
}

/* -- Variant base (light color) */
.Header.pl-header--base {
  color: var(--fgColor-default);
  background-color: var(--bgColor-default);
  border-bottom: 1px solid var(--borderColor-default);
}

.Header.pl-header--base .Header-link {
  color: var(--fgColor-default);
  font-weight: var(--base-text-weight-medium, 500);
  white-space: nowrap;
}

/* -- Compact header */
.Header.pl-header--compact {
  padding-top: var(--base-size-12, 12px);
  padding-bottom: var(--base-size-12, 12px);
}

/* Implement Primer React's IconButton. */
.btn-icon {
  padding: 5px var(--base-size-8, 8px);
}

/* -- idem */
.btn-icon.btn-sm {
  padding: 3px 6px;
}

/* -- idem */
.btn-icon.btn-large {
  padding: 9px 12px;
}

/* Box--overlay: reduce width on small screens */
@media (max-width: 480px) {
  .Box--overlay {
    max-width: 90vw;
  }
}

/* Small tabnav-tab items */
.tabnav-tab--small {
  padding: var(--base-size-8, 8px) var(--base-size-16, 16px);
  font-size: 12px;
}

/* -- idem */
@media (min-width: 544px) {
  .tabnav-tab--small {
    padding: var(--base-size-4, 4px) var(--base-size-16, 16px);
  }
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .tabnav-tab .octicon {
      margin-left: var(--control-small-gap, 4px);
      margin-right: 0;
    }
    .tabnav-tab .Counter {
      margin-right: var(--control-small-gap, 4px);
      margin-left: 0;
    }
  }
} @else {
  html[dir="rtl"] .tabnav-tab .octicon {
    margin-left: var(--control-small-gap, 4px);
    margin-right: 0;
  }
  html[dir="rtl"] .tabnav-tab .Counter {
    margin-right: var(--control-small-gap, 4px);
    margin-left: 0;
  }
}

.pl-tabnav-end {
  float: right;
}

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .pl-tabnav-end {
      float: left;
    }
  }
} @else {
  html[dir="rtl"] .pl-tabnav-end {
    float: left;
  }
}

/* Theming: prevent setting a background on inline elements. */
span[data-color-mode] {
  background: none;
}

/* Radio/checkbox group styles. */
.pl-FormControl--input-group {
  display: flex;
}

/* -- container */
.pl-FormControl--input-group__container {
  display: flex;
  flex-direction: column;
  gap: var(--base-size-8, 8px);
  margin-bottom: var(--base-size-4, 4px);
}

* + .pl-FormControl--input-group__container {
  margin-top: var(--base-size-4, 4px);
}

/* -- label */
.pl-FormControl--input-group .form-group-header .FormControl-label,
legend.FormControl-label {
  font-weight: var(--base-text-weight-normal, 400);
  font-size: var(--h4-size, 16px);
}

/* -- copy form-group-header margin */
legend.FormControl-label {
  margin: 0 0 6px;
}

/* -- caption */
.pl-FormControl--input-group .FormControl-caption {
  margin-top: -5px;
  font-size: var(--body-font-size, 14px);
}

/* Simplify button group with flex children. */

.pl-button-group {
  display: flex;
}

/* -- idem */
@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .pl-button-group .btn:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  html[dir="rtl"] .__AMP__ {
    .pl-button-group .btn:first-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
} @else {
  html:not([dir="rtl"]) .pl-button-group .btn:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  html[dir="rtl"] .pl-button-group .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* -- idem */
@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .pl-button-group .btn:not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left-color: transparent;
    }
  }
  html[dir="rtl"] .__AMP__ {
    .pl-button-group .btn:not(:first-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      border-right-color: transparent;
    }
  }
} @else {
  html:not([dir="rtl"]) .pl-button-group .btn:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left-color: transparent;
  }

  html[dir="rtl"] .pl-button-group .btn:not(:first-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-color: transparent;
  }
}

/* -- idem */
@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .pl-button-group .btn:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  html[dir="rtl"] .__AMP__ {
    .pl-button-group .btn:last-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
} @else {
  html:not([dir="rtl"]) .pl-button-group .btn:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  html[dir="rtl"] .pl-button-group .btn:last-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}

/* -- idem */
@if $scoped {
  html:not([dir="rtl"]) .__AMP__ {
    .pl-button-group .btn:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  html[dir="rtl"] .__AMP__ {
    .pl-button-group .btn:not(:last-child) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
} @else {
  html:not([dir="rtl"]) .pl-button-group .btn:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  html[dir="rtl"] .pl-button-group .btn:not(:last-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

/* Support round avatars. */
.pl-avatar--round {
  border-radius: 50%;
}

/* Support avatar pair inside a flex container. */
.avatar-parent-child {
  align-self: baseline;
}

/* Add missing border in avatar child .*/
.avatar-child {
  box-shadow: var(--avatar-shadow, var(--color-avatar-child-shadow));
}

/* Fix avatar-child styling with dir=rtl */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .avatar-child {
      left: -15%;
      right: auto;
    }
  }
} @else {
  html[dir="rtl"] .avatar-child {
    left: -15%;
    right: auto;
  }
}

/* Fix monospace font */
.FormControl-input.FormControl-monospace,
.FormControl-textarea.FormControl-monospace,
.FormControl-select.FormControl-monospace {
  font-family: var(
    --fontStack-monospace,
    "ui-monospace",
    "SFMono-Regular",
    "SF Mono",
    Menlo,
    Consolas,
    "Liberation Mono",
    monospace
  );
}

/* Fix wide dialog overflowing window */
.Box-overlay--wide {
  width: min(90vw, 640px);
}

/* Alert */

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .flash:not(.Banner) .octicon {
      margin-left: var(--base-size-12);
      margin-right: 0;
    }
  }
} @else {
  html[dir="rtl"] .flash:not(.Banner) .octicon {
    margin-left: var(--base-size-12);
    margin-right: 0;
  }
}

/* Fix close button padding */
.flash-close:not(.Banner-close) {
  display: block;
  width: var(--base-size-48, 48px);
  height: var(--base-size-48, 48px);
  margin: calc(-1 * var(--base-size-16, 16px));
  margin-top: -14px;
  padding: var(--base-size-16, 16px);
}

/* -- Remove box-shadow from flash-close */
.flash-close:not(.Banner-close) {
  box-shadow: none;
}
/* -- Remove margin */
.flash-close:not(.Banner-close) .octicon {
  margin: 0;
}

.flash-action.btn:not(.Banner-actions) .octicon {
  margin: 0;
}

/* Fix flash styling with dir=rtl */
@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .flash-close:not(.Banner-close) {
      float: left;
    }
    .flash-action:not(.Banner-actions) {
      float: left;
      margin-left: 0;
      margin-right: var(--stack-gap-spacious, 24px);
    }
  }
} @else {
  html[dir="rtl"] .flash-close:not(.Banner-close) {
    float: left;
  }
  html[dir="rtl"] .flash-action:not(.Banner-actions) {
    float: left;
    margin-left: 0;
    margin-right: var(--stack-gap-spacious, 24px);
  }
}

/* select_menu */
.FormControl-input.SelectMenu-input {
  width: 100%;
}

.SelectMenu-item {
  gap: var(--base-size-8, 8px);
}

.SelectMenu-item .SelectMenu-icon {
  margin: 0;
  flex-shrink: 0;
  margin: 0;
}

/* Fix select_menu styling with dir=rtl */
@media (min-width: 544px) {
  @if $scoped {
    html[dir="rtl"] .__AMP__ {
      .SelectMenu-header {
        padding: 7px var(--base-size-16, 16px) 7px 7px;
      }
    }
  } @else {
    html[dir="rtl"] .SelectMenu-header {
      padding: 7px var(--base-size-16, 16px) 7px 7px;
    }
  }
}

/* timeline */

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .TimelineItem {
      margin-right: var(--stack-gap-normal, 16px);
      margin-left: 0;
    }
    .TimelineItem:before {
      right: 0;
      left: auto;
    }
    .TimelineItem-badge {
      margin-right: calc(var(--control-medium-size, 32px) / -2 + 1px);
      margin-left: var(--controlStack-medium-gap-condensed, 8px);
    }
    .TimelineItem-avatar {
      right: -72px;
      left: auto;
    }
    .TimelineItem-break {
      margin-right: -56px;
      margin-left: 0;
    }
  }
} @else {
  html[dir="rtl"] .TimelineItem {
    margin-right: var(--stack-gap-normal, 16px);
    margin-left: 0;
  }

  html[dir="rtl"] .TimelineItem:before {
    right: 0;
    left: auto;
  }

  html[dir="rtl"] .TimelineItem-badge {
    margin-right: calc(var(--control-medium-size, 32px) / -2 + 1px);
    margin-left: var(--controlStack-medium-gap-condensed, 8px);
  }

  html[dir="rtl"] .TimelineItem-avatar {
    right: -72px;
    left: auto;
  }

  html[dir="rtl"] .TimelineItem-break {
    margin-right: -56px;
    margin-left: 0;
  }
}

/* Spinner */

@if $scoped {
  html[dir="rtl"] .__AMP__ {
    .anim-rotate {
      animation: rotate-keyframes-rtl 1s linear infinite;
    }
  }
} @else {
  html[dir="rtl"] .anim-rotate {
    animation: rotate-keyframes-rtl 1s linear infinite;
  }
}

@keyframes rotate-keyframes-rtl {
  100% {
    transform: rotate(-360deg);
  }
}
