@primer/react/dist/components.css

An implementation of GitHub's Primer Design System using React

/* stylelint-disable selector-max-specificity */
/* stylelint-disable selector-type-no-unknown */

/* -------------------------------- 
 *           Global Styles         
 *--------------------------------- */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

table {
  /* stylelint-disable-next-line primer/borders */
  border-collapse: collapse;
}

[data-color-mode='light'] input {
  color-scheme: light;
}

[data-color-mode='dark'] input {
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  [data-color-mode='auto'][data-light-theme*='light'] {
    color-scheme: light;
  }
}

@media (prefers-color-scheme: dark) {
  [data-color-mode='auto'][data-dark-theme*='dark'] {
    color-scheme: dark;
  }
}

[role='button']:focus:not(:focus-visible):not(.prc_focus-visible_vqyE9),
[role='tabpanel'][tabindex='0']:focus:not(:focus-visible):not(.prc_focus-visible_vqyE9),
button:focus:not(:focus-visible):not(.prc_focus-visible_vqyE9),
summary:focus:not(:focus-visible):not(.prc_focus-visible_vqyE9),
a:focus:not(:focus-visible):not(.prc_focus-visible_vqyE9) {
  outline: none;
  box-shadow: none;
}

[tabindex='0']:focus:not(:focus-visible):not(.prc_focus-visible_vqyE9),
details-dialog:focus:not(:focus-visible):not(.prc_focus-visible_vqyE9) {
  outline: none;
}

/* -------------------------------------------------------------------------- */

.prc_BaseStyles_dl-St {
  font-family: var(--BaseStyles-fontFamily, var(--fontStack-system));
  /* stylelint-disable-next-line primer/typography */
  line-height: var(--BaseStyles-lineHeight, 1.5);
  /* stylelint-disable-next-line primer/colors */
  color: var(--BaseStyles-fgColor, var(--fgColor-default));

  /* Global styles for light mode */
  &:has([data-color-mode='light']) {
    input & {
      color-scheme: light;
    }
  }

  /* Global styles for dark mode */
  &:has([data-color-mode='dark']) {
    input & {
      color-scheme: dark;
    }
  }
}

.prc_VisuallyHidden_UNWQp {
  &:not(:focus):not(:active):not(:focus-within) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }
}

.prc_Box_qNUI9 {
  display: inline-flex;
}

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

.prc_SpinnerAnimation_e7Gf- {
  animation: prc_rotate-keyframes_XyFIG var(--base-duration-1000) var(--base-easing-linear) infinite;
}

.prc_CounterLabel_ZwXPe {
  display: inline-block;
  padding: var(--base-size-2) var(--base-size-6);
  font-size: var(--text-body-size-small);
  font-weight: var(--base-text-weight-semibold);
  /* stylelint-disable-next-line primer/typography */
  line-height: 1;
  border: var(--borderWidth-thin) solid var(--counter-borderColor);
  /* stylelint-disable-next-line primer/borders */
  border-radius: 20px;

  &:where([data-scheme='primary']) {
    color: var(--fgColor-onEmphasis);
    background-color: var(--bgColor-neutral-emphasis);
  }

  &:where([data-scheme='secondary']) {
    color: var(--fgColor-default);
    background-color: var(--bgColor-neutral-muted);
  }

  &:where(:empty) {
    display: none;
  }
}

/* Base styles */
.prc_ButtonBase_c50BI {
  display: flex;
  min-width: max-content;
  height: var(--control-medium-size);
  /* stylelint-disable-next-line primer/spacing */
  padding: 0 var(--control-medium-paddingInline-normal);
  font-family: inherit;
  font-size: var(--text-body-size-medium);
  font-weight: var(--base-text-weight-medium);
  color: var(--button-default-fgColor-rest);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: var(--borderWidth-thin) solid;
  border-color: var(--button-default-borderColor-rest);
  border-radius: var(--borderRadius-medium);
  transition: 80ms cubic-bezier(0.65, 0, 0.35, 1);
  transition-property: color, fill, background-color, border-color;
  appearance: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--base-size-8);

  &:hover {
    transition-duration: 80ms;
  }

  &:focus-visible {
    @mixin focusOutline;
  }

  &:active {
    transition: none;
  }

  &:disabled,
  &[aria-disabled='true']:not([data-loading='true']) {
    cursor: not-allowed;
    box-shadow: none;

    & .prc_Visual_2epfX,
    & .prc_CounterLabel_f5-4u {
      color: inherit;
    }
  }

  @media (forced-colors: active) {
    &:focus {
      outline: solid 1px transparent;
    }
  }

  /* Visuals */
  & :where(.prc_Visual_2epfX) {
    display: flex;
    color: var(--fgColor-muted);
    pointer-events: none;
  }

  /* mostly for CounterLabel */
  & :where(.prc_VisualWrap_Db-eB) {
    display: flex;
    pointer-events: none;
  }

  /* IconButton */

  &:where(.prc_IconButton_szpyj) {
    display: inline-grid;
    width: var(--control-medium-size);
    min-width: unset;
    /* stylelint-disable-next-line primer/spacing */
    padding: unset;
    place-content: center;
    flex-shrink: 0;

    &:where([data-size='small']) {
      width: var(--control-small-size);
    }

    &:where([data-size='large']) {
      width: var(--control-large-size);
    }
  }

  /* LinkButton */

  &:where([href]) {
    display: inline-flex;

    &:hover {
      text-decoration: none;
    }
  }

  /* Button layout */

  & :where(.prc_ButtonContent_HKbr-) {
    flex: 1 0 auto;
    display: grid;
    grid-template-areas: 'leadingVisual text trailingVisual';
    grid-template-columns: min-content minmax(0, auto) min-content;
    align-items: center;
    align-content: center;

    & > :not(:last-child) {
      margin-right: var(--base-size-8);
    }

    /* Content alignment */

    &:where([data-align='center']) {
      justify-content: center;
    }

    &:where([data-align='start']) {
      justify-content: flex-start;
    }
  }

  & :where([data-component='leadingVisual']) {
    grid-area: leadingVisual;
  }

  & :where(.prc_Label_pTQ3x) {
    /* stylelint-disable-next-line primer/typography */
    line-height: 1.4285714; /* temporary until we use Text component with --text-body-lineHeight-medium */
    white-space: nowrap;
    grid-area: text;
  }

  & :where([data-component='trailingVisual']) {
    grid-area: trailingVisual;
  }

  & :where([data-component='trailingAction']) {
    margin-right: calc(var(--base-size-4) * -1);
  }

  /* Size */

  &:where([data-size='small']) {
    height: var(--control-small-size);
    /* stylelint-disable-next-line primer/spacing */
    padding: 0 var(--control-small-paddingInline-condensed);
    gap: var(--control-small-gap);
    font-size: var(--text-body-size-small);

    & .prc_ButtonContent_HKbr- > :not(:last-child) {
      /* stylelint-disable-next-line primer/spacing */
      margin-right: var(--control-small-gap);
    }

    & .prc_Label_pTQ3x {
      /* stylelint-disable-next-line primer/typography */
      line-height: 1.6666667; /* temporary until we use Text component with --text-body-lineHeight-small */
    }
  }

  &:where([data-size='large']) {
    height: var(--control-large-size);
    /* stylelint-disable-next-line primer/spacing */
    padding: 0 var(--control-large-paddingInline-spacious);
    gap: var(--control-large-gap);

    & .prc_ButtonContent_HKbr- > :not(:last-child) {
      /* stylelint-disable-next-line primer/spacing */
      margin-right: var(--control-large-gap);
    }
  }

  /* Full width */

  &:where([data-block='block']) {
    width: 100%;
  }

  /* Wrap label text */

  &:where([data-label-wrap='true']) {
    min-width: fit-content;
    height: unset;
    min-height: var(--control-medium-size);

    & .prc_ButtonContent_HKbr- {
      flex: 1 1 auto;
      align-self: stretch;
      /* stylelint-disable-next-line primer/spacing */
      padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));
    }

    & .prc_Label_pTQ3x {
      word-break: break-word;
      white-space: unset;
    }

    &:where([data-size='small']) {
      height: unset;
      min-height: var(--control-small-size);

      & .prc_ButtonContent_HKbr- {
        /* stylelint-disable-next-line primer/spacing */
        padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));
      }
    }

    &:where([data-size='large']) {
      height: unset;
      min-height: var(--control-large-size);
      /* stylelint-disable-next-line primer/spacing */
      padding-inline: var(--control-large-paddingInline-spacious);

      & .prc_ButtonContent_HKbr- {
        /* stylelint-disable-next-line primer/spacing */
        padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));
      }
    }
  }

  /* Loading */

  /* only hide label if there's no leading/trailing visuals
  * move spinner to label spot if not leading/trailing visuals
  */

  &:where([data-loading='true']) {
    &
      .prc_LoadingSpinner_hLV6o:not(
        [data-component='leadingVisual'],
        [data-component='trailingVisual'],
        [data-component='trailingAction']
      ) {
      grid-area: text;
      margin-right: 0 !important;
      place-self: center;

      & + .prc_Label_pTQ3x {
        visibility: hidden;
      }
    }
  }

  /* Default Variant */

  &:where([data-variant='default']) {
    color: var(--button-default-fgColor-rest);
    background-color: var(--button-default-bgColor-rest);
    box-shadow: var(--button-default-shadow-resting);

    &[aria-expanded='true'] {
      background-color: var(--button-default-bgColor-active);
      border-color: var(--button-default-borderColor-active);
    }

    &:hover {
      background-color: var(--button-default-bgColor-hover);
      border-color: var(--button-default-borderColor-hover);
    }

    &:active {
      background-color: var(--button-default-bgColor-active);
      border-color: var(--button-default-borderColor-active);
    }

    &:disabled,
    &[aria-disabled='true']:not([data-loading='true']) {
      color: var(--control-fgColor-disabled);
      background-color: var(--button-default-bgColor-disabled);
      border-color: var(--button-default-borderColor-disabled);
      box-shadow: none;
    }

    & .prc_CounterLabel_f5-4u {
      background-color: var(--buttonCounter-default-bgColor-rest) !important; /* temporarily override our own sx prop */
    }

    &:where(.prc_IconButton_szpyj) {
      color: var(--fgColor-muted);
    }
  }

  /* Primary variant */

  &:where([data-variant='primary']) {
    color: var(--button-primary-fgColor-rest);
    background-color: var(--button-primary-bgColor-rest);
    border-color: var(--button-primary-borderColor-rest);
    box-shadow: var(--shadow-resting-small);

    &[aria-expanded='true'] {
      background-color: var(--button-primary-bgColor-active);
      box-shadow: var(--button-primary-shadow-selected);
    }

    &:hover {
      background-color: var(--button-primary-bgColor-hover);
      border-color: var(--button-primary-borderColor-hover);
    }

    &:focus-visible {
      @mixin focusOutlineOnEmphasis;
    }

    &:active {
      background-color: var(--button-primary-bgColor-active);
      box-shadow: var(--button-primary-shadow-selected);
    }

    &:disabled,
    &[aria-disabled='true']:not([data-loading='true']) {
      color: var(--button-primary-fgColor-disabled);
      background-color: var(--button-primary-bgColor-disabled);
      border-color: var(--button-primary-borderColor-disabled);
      box-shadow: none;
    }

    & .prc_CounterLabel_f5-4u {
      color: var(--button-primary-fgColor-rest) !important; /* temporarily override our own sx prop */
      background-color: var(--buttonCounter-primary-bgColor-rest) !important; /* temporarily override our own sx prop */
    }

    /* temporarily using the fgColor to match legacy and reduce visual changes- will eventually be iconColor */
    & .prc_Visual_2epfX {
      color: var(--button-primary-fgColor-rest);
    }
  }

  /* Danger variant */

  &:where([data-variant='danger']) {
    color: var(--button-danger-fgColor-rest);
    background-color: var(--button-danger-bgColor-rest);
    box-shadow: var(--button-default-shadow-resting);

    &[aria-expanded='true'] {
      color: var(--button-danger-fgColor-active);
      background-color: var(--button-danger-bgColor-active);
      border-color: var(--button-danger-borderColor-active);
      box-shadow: var(--button-danger-shadow-selected);

      & .prc_Visual_2epfX {
        color: var(--button-danger-iconColor-hover);
      }
    }

    &:hover {
      color: var(--button-danger-fgColor-hover);
      background-color: var(--button-danger-bgColor-hover);
      border-color: var(--button-danger-borderColor-hover);
      box-shadow: var(--shadow-resting-small);

      & .prc_CounterLabel_f5-4u {
        color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */
        background-color: var(--buttonCounter-danger-bgColor-hover) !important;
      }

      & .prc_Visual_2epfX {
        color: var(--button-danger-iconColor-hover);
      }
    }

    &:active {
      color: var(--button-danger-fgColor-active);
      background-color: var(--button-danger-bgColor-active);
      border-color: var(--button-danger-borderColor-active);
      box-shadow: var(--button-danger-shadow-selected);

      & .prc_CounterLabel_f5-4u {
        color: var(--buttonCounter-danger-fgColor-hover) !important; /* temporarily override our own sx prop */
        background-color: var(--buttonCounter-danger-bgColor-hover) !important;
      }

      & .prc_Visual_2epfX {
        color: var(--button-danger-iconColor-hover);
      }
    }

    &:disabled,
    &[aria-disabled='true']:not([data-loading='true']) {
      color: var(--button-danger-fgColor-disabled);
      background-color: var(--button-danger-bgColor-disabled);
      border-color: var(--button-default-borderColor-disabled);
      box-shadow: none;

      & .prc_CounterLabel_f5-4u {
        color: var(--buttonCounter-danger-fgColor-disabled) !important; /* temporarily override our own sx prop */
        background-color: var(--buttonCounter-danger-bgColor-disabled) !important;
      }
    }

    & .prc_CounterLabel_f5-4u {
      color: var(--buttonCounter-danger-fgColor-rest) !important; /* temporarily override our own sx prop */
      background-color: var(--buttonCounter-danger-bgColor-rest) !important;
    }

    & .prc_Visual_2epfX {
      color: var(--button-danger-iconColor-rest);
    }
  }

  /* Invisible variant */

  &:where([data-variant='invisible']) {
    color: var(--button-default-fgColor-rest);
    border-color: transparent;
    box-shadow: none;

    &[aria-expanded='true'] {
      background-color: var(--button-invisible-bgColor-active);
    }

    &:hover {
      background-color: var(--button-invisible-bgColor-hover);

      & .prc_Visual_2epfX {
        color: var(--button-invisible-iconColor-hover);
      }
    }

    &:active {
      background-color: var(--button-invisible-bgColor-active);

      & .prc_Visual_2epfX {
        color: var(--button-invisible-iconColor-hover);
      }
    }

    &:disabled,
    &[aria-disabled='true']:not([data-loading='true']) {
      color: var(--button-invisible-fgColor-disabled);
      background-color: var(--button-invisible-bgColor-disabled);
      border-color: var(--button-invisible-borderColor-disabled);
      box-shadow: none;
    }

    & .prc_Visual_2epfX {
      color: var(--button-invisible-iconColor-rest);
    }

    & .prc_CounterLabel_f5-4u {
      background-color: var(--buttonCounter-invisible-bgColor-rest) !important;
    }

    &:where(.prc_IconButton_szpyj) {
      color: var(--button-invisible-iconColor-rest);
    }
  }

  /* Link variant */

  &:where([data-variant='link']) {
    display: inline-flex;
    min-width: fit-content;
    height: unset;
    padding: 0;
    font-size: inherit;
    color: var(--fgColor-link);
    text-align: left;
    border: unset;

    &:hover:not(:disabled, [data-inactive]) {
      text-decoration: underline;
    }

    &:focus-visible,
    &:focus {
      outline-offset: 2px;
    }

    &:disabled,
    &[aria-disabled='true']:not([data-loading='true']) {
      color: var(--control-fgColor-disabled);
      background-color: transparent;
      border-color: transparent;
    }

    & .prc_Label_pTQ3x {
      white-space: unset;
    }

    &:where([data-inactive]) {
      color: var(--button-inactive-fgColor);
      background: transparent !important;
    }

    & .prc_Visual_2epfX {
      color: var(--fgColor-link);
    }
  }

  /* Inactive */

  &:where([data-inactive]),
  &:where([data-inactive]):hover {
    color: var(--button-inactive-fgColor);
    cursor: auto;
    background-color: var(--button-inactive-bgColor);
    /* stylelint-disable-next-line primer/colors */
    border-color: var(--button-inactive-bgColor);

    & .prc_Visual_2epfX,
    & .prc_CounterLabel_f5-4u {
      color: inherit !important;
    }
  }

  /* Icon-only + Counter */

  &:where([data-has-count]):has([data-component='leadingVisual']):not(:has([data-component='text'])) {
    /* stylelint-disable-next-line primer/spacing */
    padding-inline: var(--control-medium-paddingInline-condensed);

    &:where([data-size='small']) {
      /* stylelint-disable-next-line primer/spacing */
      padding-inline: var(--control-xsmall-paddingInline-condensed);
    }

    &:where([data-size='large']) {
      /* stylelint-disable-next-line primer/spacing */
      padding-inline: var(--control-large-paddingInline-normal);
    }
  }
}

.prc_ConditionalWrapper_WLT4Z {
  display: block;
}

/* Animation definition */
@keyframes prc_tooltip-appear_hLf77 {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.prc_Tooltip_cYMVY {
  /* Overriding the default popover styles */
  display: none;

  &[popover] {
    position: absolute;
    width: max-content;
    max-width: 250px;
    /* stylelint-disable-next-line primer/spacing */
    padding: 0.5em 0.75em;
    margin: auto;

    /* for scrollbar */
    overflow: visible;
    clip: auto;
    /* stylelint-disable-next-line primer/typography */
    font: normal normal 11px/1.5 var(--fontStack-system);
    color: var(--tooltip-fgColor);
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    background: var(--tooltip-bgColor);
    border: 0;
    border-radius: var(--borderRadius-medium);
    opacity: 0;
    -webkit-font-smoothing: subpixel-antialiased;
    inset: auto;
  }

  /* class name in chrome is :popover-open */
  &[popover]:popover-open {
    display: block;
  }

  /* class name in firefox and safari is \:popover-open */
  &[popover].prc_--_ketfx:popover-open {
    display: block;
  }

  @media (forced-colors: active) {
    outline: 1px solid transparent;
  }

  /* This is needed to keep the tooltip open when the user leaves the trigger element to hover tooltip */
  &::after {
    position: absolute;
    right: 0;
    left: 0;
    display: block;
    height: var(--overlay-offset);
    content: '';
  }

  /* South, East, Southeast, Southwest after */
  &[data-direction='n']::after,
  &[data-direction='ne']::after,
  &[data-direction='nw']::after {
    top: 100%;
  }

  &[data-direction='s']::after,
  &[data-direction='se']::after,
  &[data-direction='sw']::after {
    bottom: 100%;
  }

  &[data-direction='w']::after {
    position: absolute;
    bottom: 0;
    left: 100%;
    display: block;
    width: 8px;
    height: 100%;
    content: '';
  }

  /* East before and after */
  &[data-direction='e']::after {
    position: absolute;
    right: 100%;
    bottom: 0;
    display: block;
    width: 8px;
    height: 100%;
    /* stylelint-disable-next-line primer/spacing */
    margin-left: -8px;
    content: '';
  }

  /* Animation styles */
  &:popover-open,
  &:popover-open::before {
    animation-name: prc_tooltip-appear_hLf77;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-delay: 0s;
  }

  /* Animation styles */
  &.prc_--_ketfx:popover-open,
  &.prc_--_ketfx:popover-open::before {
    animation-name: prc_tooltip-appear_hLf77;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-in;
    animation-delay: 0s;
  }
}

.prc_keybindingHintContainer_tv-0S.prc_hasTextBefore_ot22R {
  /* Offset negative on the right right to make right spacing look like top and bottom spacing, only for keybinding hints and only when there is text */
  /* stylelint-disable-next-line primer/spacing */
  margin-right: -0.125em;
  margin-left: var(--base-size-6);
}

.prc_Text_0ima0 {
  &:where([data-size='small']) {
    font-size: var(--text-body-size-small);
    line-height: var(--text-body-lineHeight-small);
  }

  &:where([data-size='medium']) {
    font-size: var(--text-body-size-medium);
    line-height: var(--text-body-lineHeight-medium);
  }

  &:where([data-size='large']) {
    font-size: var(--text-body-size-large);
    line-height: var(--text-body-lineHeight-large);
  }

  &:where([data-weight='light']) {
    font-weight: var(--base-text-weight-light);
  }

  &:where([data-weight='normal']) {
    font-weight: var(--base-text-weight-normal);
  }

  &:where([data-weight='medium']) {
    font-weight: var(--base-text-weight-medium);
  }

  &:where([data-weight='semibold']) {
    font-weight: var(--base-text-weight-semibold);
  }
}

.prc_KeybindingHint_0pyit {
  position: relative;
  padding: 0;
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  /* stylelint-disable-next-line primer/typography */
  line-height: unset;
  color: inherit;
  white-space: nowrap;
  vertical-align: baseline;
  background: none;
  border: none;
  box-shadow: none;
}

/* Maintain resize cursor while dragging */
/* stylelint-disable-next-line selector-no-qualifying-type */
body[data-page-layout-dragging='true'] {
  cursor: col-resize;
}

/* Disable text selection while dragging */
/* stylelint-disable-next-line selector-no-qualifying-type */
body[data-page-layout-dragging='true'] * {
  user-select: none;
}

.prc_PageLayoutRoot_1zlEO {
  /* Region Order */
  --region-order-header: 0;
  --region-order-pane-start: 1;
  --region-order-content: 2;
  --region-order-pane-end: 3;
  --region-order-footer: 4;

  /* Spacing Values */
  --spacing-none: 0;
  --spacing-condensed: var(--base-size-16);
  --spacing-normal: var(--base-size-16);

  @media screen and (min-width: 1012px) {
    --spacing-normal: var(--base-size-24);
  }

  /* Pane Width Values */
  --pane-width-small: 100%;
  --pane-width-medium: 100%;
  --pane-width-large: 100%;
  --pane-max-width-diff: 511px;

  @media screen and (min-width: 768px) {
    --pane-width-small: 240px;
    --pane-width-medium: 256px;
    --pane-width-large: 256px;
  }

  @media screen and (min-width: 1012px) {
    --pane-width-small: 256px;
    --pane-width-medium: 296px;
    --pane-width-large: 320px;
  }

  @media screen and (min-width: 1280px) {
    --pane-max-width-diff: 959px;
  }

  /* These following CSS variables are dynamic values that get overridden by styles passed in via props. */
  --spacing: 0;
  --spacing-row: 0;
  --spacing-column: 0;
  --spacing-divider: 0;
  --offset-header: 0;
  --sticky-pane-height: 0;
  --pane-width: 0;
  --pane-min-width: 0;
  --pane-max-width: 0;
  --pane-width-custom: 0;
  --pane-width-size: 0;

  /* stylelint-disable-next-line primer/spacing */
  padding: var(--spacing);
}

.prc_PageLayoutWrapper_s2ao4 {
  display: flex;
  margin-right: auto;
  margin-left: auto;
  flex-wrap: wrap;

  &:where([data-width='medium']) {
    max-width: 768px;
  }

  &:where([data-width='large']) {
    max-width: 1012px;
  }

  &:where([data-width='full']) {
    max-width: 100%;
  }

  &:where([data-width='xlarge']) {
    max-width: 1280px;
  }
}

.prc_PageLayoutContent_jzDMn {
  display: flex;
  flex: 1 1 100%;
  flex-wrap: wrap;
  max-width: 100%;
}

.prc_HorizontalDivider_CYLp5 {
  /* stylelint-disable-next-line primer/spacing */
  margin-right: calc(-1 * var(--spacing-divider));
  /* stylelint-disable-next-line primer/spacing */
  margin-left: calc(-1 * var(--spacing-divider));

  &:where([data-variant='none']) {
    display: none;
  }

  &:where([data-variant='line']) {
    display: block;
    height: 1px;
    /* stylelint-disable-next-line primer/colors */
    background-color: var(--borderColor-default);
  }

  &:where([data-variant='filled']) {
    display: block;
    height: var(--base-size-8);
    background-color: var(--bgColor-inset);
    box-shadow:
      /* stylelint-disable-next-line primer/box-shadow */
      inset 0 -1px 0 0 var(--borderColor-default),
      inset 0 1px 0 0 var(--borderColor-default);
  }

  @media screen and (min-width: 768px) {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

.prc_VerticalDivider_4A4Qm {
  position: relative;
  height: 100%;

  &:where([data-variant='none']) {
    display: none;
  }

  &:where([data-variant='line']) {
    display: block;
    width: 1px;
    /* stylelint-disable-next-line primer/colors */
    background-color: var(--borderColor-default);
  }

  &:where([data-variant='filled']) {
    display: block;
    width: var(--base-size-8);
    background-color: var(--bgColor-inset);
    box-shadow:
      /* stylelint-disable-next-line primer/box-shadow */
      inset -1px 0 0 0 var(--borderColor-default),
      inset 1px 0 0 0 var(--borderColor-default);
  }
}

.prc_Header_mQXK1 {
  width: 100%;
  /* stylelint-disable-next-line primer/spacing */
  margin-bottom: var(--spacing);
}

.prc_HeaderContent_dVIQb {
  /* stylelint-disable-next-line primer/spacing */
  padding: var(--spacing);
}

.prc_HeaderHorizontalDivider_bofyb {
  /* stylelint-disable-next-line primer/spacing */
  margin-top: var(--spacing);
}

.prc_ContentWrapper_b-QRo {
  display: flex;

  /* Hack to prevent overflowing content from pushing the pane region to the next line */
  min-width: 1px;
  flex-direction: column;
  order: var(--region-order-content);

  /* Set flex-basis to 0% to allow flex-grow to control the width of the content region.
      Without this, the content region could wrap onto a different line
      than the pane region on wide viewports if its contents are too wide. */
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;

  &:where([data-is-hidden='true']) {
    display: none;
  }
}

.prc_Content_-F7-I {
  width: 100%;

  /* stylelint-disable-next-line primer/spacing */
  padding: var(--spacing);
  margin-right: auto;
  margin-left: auto;
  flex-grow: 1;

  &:where([data-width='medium']) {
    max-width: 768px;
  }

  &:where([data-width='large']) {
    max-width: 1012px;
  }

  &:where([data-width='full']) {
    max-width: 100%;
  }

  &:where([data-width='xlarge']) {
    max-width: 1280px;
  }
}

.prc_PaneWrapper_nGO0U {
  display: flex;
  width: 100%;
  margin-right: 0;
  margin-left: 0;

  &:where([data-is-hidden='true']) {
    display: none;
  }

  &:where([data-position='end']) {
    /* stylelint-disable-next-line primer/spacing */
    margin-top: var(--spacing-row);
    flex-direction: column;
    order: var(--region-order-pane-end);
  }

  &:where([data-position='start']) {
    /* stylelint-disable-next-line primer/spacing */
    margin-bottom: var(--spacing-row);
    flex-direction: column-reverse;
    order: var(--region-order-pane-start);
  }

  @media screen and (min-width: 768px) {
    width: auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;

    &:where([data-sticky]) {
      position: sticky;
      /* stylelint-disable-next-line primer/spacing */
      top: var(--offset-header);
      max-height: var(--sticky-pane-height);
    }

    &:where([data-position='end']) {
      /* stylelint-disable-next-line primer/spacing */
      margin-left: var(--spacing-column);
      flex-direction: row-reverse;
    }

    &:where([data-position='start']) {
      /* stylelint-disable-next-line primer/spacing */
      margin-right: var(--spacing-column);
      flex-direction: row;
    }
  }
}

.prc_PaneVerticalDivider_1c9vy {
  &:where([data-position='start']) {
    /* stylelint-disable-next-line primer/spacing */
    margin-left: var(--spacing);
  }

  &:where([data-position='end']) {
    /* stylelint-disable-next-line primer/spacing */
    margin-right: var(--spacing);
  }
}

.prc_Pane_Vl5LI {
  width: var(--pane-width-size);
  /* stylelint-disable-next-line primer/spacing */
  padding: var(--spacing);

  @media screen and (min-width: 768px) {
    overflow: auto;
  }

  &:where([data-resizable]) {
    width: 100%;

    @media screen and (min-width: 768px) {
      width: clamp(var(--pane-min-width), var(--pane-width), var(--pane-max-width));
    }
  }
}

.prc_PaneHorizontalDivider_4exOb {
  &:where([data-position='start']) {
    /* stylelint-disable-next-line primer/spacing */
    margin-top: var(--spacing);
  }

  &:where([data-position='end']) {
    /* stylelint-disable-next-line primer/spacing */
    margin-bottom: var(--spacing);
  }
}

.prc_FooterWrapper_WZwgZ {
  width: 100%;
  order: var(--region-order-footer);

  /* stylelint-disable-next-line primer/spacing */
  margin-top: var(--spacing);
}

.prc_FooterHorizontalDivider_sNLmj {
  /* stylelint-disable-next-line primer/spacing */
  margin-bottom: var(--spacing);
}

.prc_FooterContent_UFWGW {
  /* stylelint-disable-next-line primer/spacing */
  padding: var(--spacing);
}

@keyframes prc_dialog-backdrop-appear_FwQst {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes prc_Overlay--motion-scaleFade_ctSnM {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes prc_Overlay--motion-slideUp_PtiP3 {
  from {
    transform: translateY(100%);
  }
}

@keyframes prc_Overlay--motion-slideInRight_dOTaT {
  from {
    transform: translateX(-100%);
  }
}

@keyframes prc_Overlay--motion-slideInLeft_Lfaz8 {
  from {
    transform: translateX(100%);
  }
}

.prc_Backdrop_ugYqZ {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  background-color: var(--overlay-backdrop-bgColor);
  animation: prc_dialog-backdrop-appear_FwQst 200ms cubic-bezier(0.33, 1, 0.68, 1);
  align-items: center;
  justify-content: center;

  &[data-position-regular='center'] {
    align-items: center;
    justify-content: center;
  }

  &[data-position-regular='left'] {
    align-items: center;
    justify-content: flex-start;
  }

  &[data-position-regular='right'] {
    align-items: center;
    justify-content: flex-end;
  }

  .prc_DialogOverflowWrapper_oDYJo {
    flex-grow: 1;
  }

  @media (max-width: 767px) {
    &[data-position-narrow='center'] {
      align-items: center;
      justify-content: center;
    }

    &[data-position-narrow='bottom'] {
      align-items: end;
      justify-content: center;
    }
  }
}

.prc_Dialog_luvDS {
  display: flex;
  /* stylelint-disable-next-line primer/responsive-widths */
  width: 640px;
  min-width: 296px;
  max-width: calc(100dvw - 64px);
  height: auto;
  max-height: calc(100dvh - 64px);
  flex-direction: column;
  background-color: var(--overlay-bgColor);
  border-radius: var(--borderRadius-large);
  border-radius: var(--borderRadius-large, var(--borderRadius-large));
  box-shadow: var(--shadow-floating-small);
  opacity: 1;

  &:where([data-width='small']) {
    width: 296px;
  }

  &:where([data-width='medium']) {
    width: 320px;
  }

  &:where([data-width='large']) {
    /* stylelint-disable-next-line primer/responsive-widths */
    width: 480px;
  }

  &:where([data-height='small']) {
    height: 480px;
  }

  &:where([data-height='large']) {
    height: 640px;
  }

  @media screen and (prefers-reduced-motion: no-preference) {
    animation: prc_Overlay--motion-scaleFade_ctSnM 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
  }

  &[data-position-regular='center'] {
    border-radius: var(--borderRadius-large, var(--borderRadius-large));

    @media screen and (prefers-reduced-motion: no-preference) {
      animation: prc_Overlay--motion-scaleFade_ctSnM 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
    }
  }

  &[data-position-regular='left'] {
    height: 100dvh;
    max-height: unset;
    border-radius: var(--borderRadius-large, var(--borderRadius-large));
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    @media screen and (prefers-reduced-motion: no-preference) {
      animation: prc_Overlay--motion-slideInRight_dOTaT 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
    }
  }

  &[data-position-regular='right'] {
    height: 100dvh;
    max-height: unset;
    border-radius: var(--borderRadius-large, var(--borderRadius-large));
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    @media screen and (prefers-reduced-motion: no-preference) {
      animation: prc_Overlay--motion-slideInLeft_Lfaz8 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
    }
  }

  @media (max-width: 767px) {
    &[data-position-narrow='center'] {
      /* stylelint-disable-next-line primer/responsive-widths */
      width: 640px;
      height: auto;
      border-radius: var(--borderRadius-large, var(--borderRadius-large));

      &:where([data-width='small']) {
        width: 296px;
      }

      &:where([data-width='medium']) {
        width: 320px;
      }

      &:where([data-width='large']) {
        /* stylelint-disable-next-line primer/responsive-widths */
        width: 480px;
      }

      &:where([data-height='small']) {
        height: 480px;
      }

      &:where([data-height='large']) {
        height: 640px;
      }
    }

    &[data-position-narrow='bottom'] {
      width: 100dvw;
      max-width: 100dvw;
      height: auto;
      max-height: calc(100dvh - 64px);
      border-radius: var(--borderRadius-large, var(--borderRadius-large));
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: prc_Overlay--motion-slideUp_PtiP3 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
      }
    }

    &[data-position-narrow='fullscreen'] {
      width: 100%;
      max-width: 100dvw;
      height: 100%;
      max-height: 100dvh;
      border-radius: unset !important;
      flex-grow: 1;

      @media screen and (prefers-reduced-motion: no-preference) {
        animation: prc_Overlay--motion-scaleFade_ctSnM 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
      }
    }
  }
}

.prc_Header_cjbcl {
  z-index: 1;
  padding: var(--base-size-8);
  /* stylelint-disable-next-line primer/box-shadow */
  box-shadow: 0 1px 0 var(--borderColor-default);
  flex-shrink: 0;
}

.prc_Title_oQ-W6 {
  margin: 0; /* override default margin */
  font-size: var(--text-body-size-medium);
  font-weight: var(--text-title-weight-large);
}

.prc_Subtitle_sITpo {
  margin: 0; /* override default margin */
  margin-top: var(--base-size-4);
  font-size: var(--text-body-size-small);
  font-weight: var(--base-text-weight-normal);
  color: var(--fgColor-muted);
}

.prc_Body_LCvER {
  padding: var(--base-size-16);
  overflow: auto;
  flex-grow: 1;
}

.prc_Footer_jQfN4 {
  z-index: 1;
  display: flex;
  padding: var(--base-size-16);
  /* stylelint-disable-next-line primer/box-shadow */
  box-shadow: 0 -1px 0 var(--borderColor-default);
  flex-flow: wrap;
  justify-content: flex-end;
  gap: var(--base-size-8);
  flex-shrink: 0;
}

.prc_ConfirmationHeader_yiLEc {
  display: flex;
  padding: var(--base-size-8);
  flex-direction: row;

  > h1 {
    padding: var(--base-size-6) var(--base-size-8);

    /* override default margin */
    margin: 0;
    font-size: var(--text-title-size-medium);
    font-weight: var(--text-title-weight-medium);
    flex-grow: 1;
  }
}

.prc_ConfirmationBody_ht9P- {
  padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16);
  font-size: var(--text-body-size-medium);
  flex-grow: 1;
}

.prc_ConfirmationFooter_AqKBI {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  grid-gap: var(--base-size-8);
  align-items: end;
  justify-content: end;
  padding: var(--base-size-4) var(--base-size-16) var(--base-size-16);
}

.prc_Body_cNQoa {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-direction: column;

  & > * + * {
    margin-top: var(--base-size-8);
  }
}

.prc_GroupFieldset_0NZzG {
  padding: 0;
  margin: 0;
  border: none;

  &:where([data-validation]) {
    margin-bottom: var(--base-size-8);
  }
}

.prc_GroupLegend_HW4-c {
  padding: 0;

  &:where([data-legend-visible]) {
    margin-bottom: var(--base-size-8);
  }
}

.prc_CheckboxOrRadioGroupCaption_9GgyY {
  font-size: var(--text-body-size-medium);
  color: var(--fgColor-muted);
}

.prc_RadioGroupLabel_anQ3U {
  display: block;
  font-size: var(--text-body-size-medium);
  font-weight: var(--base-text-weight-semibold);

  &:where([data-label-disabled]) {
    color: var(--fgColor-muted);
  }
}

.prc_GroupLabelChildren_j5sBI {
  margin-right: var(--base-size-8);
}

.prc_Stack_WJVsK {
  display: flex;
  flex-flow: column;
  align-items: stretch;
  align-content: flex-start;
  gap: var(--stack-gap, var(--stack-gap-normal));

  &[data-padding='none'],
  &[data-padding-narrow='none'] {
    padding: 0;
  }

  &[data-padding='condensed'],
  &[data-padding-narrow='condensed'] {
    /* stylelint-disable-next-line primer/spacing */
    padding: var(--stack-padding-condensed);
  }

  &[data-padding='normal'],
  &[data-padding-narrow='normal'] {
    /* stylelint-disable-next-line primer/spacing */
    padding: var(--stack-padding-normal);
  }

  &[data-padding='spacious'],
  &[data-padding-narrow='spacious'] {
    /* stylelint-disable-next-line primer/spacing */
    padding: var(--stack-padding-spacious);
  }

  &[data-direction='horizontal'],
  &[data-direction-narrow='horizontal'] {
    flex-flow: row;
  }

  &[data-direction='vertical'],
  &[data-direction-narrow='vertical'] {
    flex-flow: column;
  }

  &[data-gap='none'],
  &[data-gap-narrow='none'] {
    --stack-gap: 0;
  }

  &[data-gap='condensed'],
  &[data-gap-narrow='condensed'] {
    --stack-gap: var(--stack-gap-condensed);
  }

  &[data-gap='normal'],
  &[data-gap-narrow='normal'] {
    --stack-gap: var(--stack-gap-normal);
  }

  &[data-gap='spacious'],
  &[data-gap-narrow='spacious'] {
    --stack-gap: var(--stack-gap-spacious);
  }

  &[data-align='start'],
  &[data-align-narrow='start'] {
    align-items: flex-start;
  }

  &[data-align='center'],
  &[data-align-narrow='center'] {
    align-items: center;
  }

  &[data-align='end'],
  &[data-align-narrow='end'] {
    align-items: flex-end;
  }

  &[data-align='baseline'],
  &[data-align-narrow='baseline'] {
    align-items: baseline;
  }

  &[data-justify='start'],
  &[data-justify-narrow='start'] {
    justify-content: flex-start;
  }

  &[data-justify='center'],
  &[data-justify-narrow='center'] {
    justify-content: center;
  }

  &[data-justify='end'],
  &[data-justify-narrow='end'] {
    justify-content: flex-end;
  }

  &[data-justify='space-between'],
  &[data-justify-narrow='space-between'] {
    justify-content: space-between;
  }

  &[data-justify='space-evenly'],
  &[data-justify-narrow='space-evenly'] {
    justify-content: space-evenly;
  }

  &[data-wrap='wrap'],
  &[data-wrap-narrow='wrap'] {
    flex-wrap: wrap;
  }

  &[data-wrap='nowrap'],
  &[data-wrap-narrow='nowrap'] {
    flex-wrap: nowrap;
  }

  @media (--viewportRange-regular) {
    &[data-padding-regular='none'] {
      padding: 0;
    }

    &[data-padding-regular='condensed'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-condensed);
    }

    &[data-padding-regular='normal'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-normal);
    }

    &[data-padding-regular='spacious'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-spacious);
    }

    &[data-direction-regular='horizontal'] {
      flex-flow: row;
    }

    &[data-direction-regular='vertical'] {
      flex-flow: column;
    }

    &[data-gap-regular='none'] {
      --stack-gap: 0;
    }

    &[data-gap-regular='condensed'] {
      --stack-gap: var(--stack-gap-condensed);
    }

    &[data-gap-regular='normal'] {
      --stack-gap: var(--stack-gap-normal);
    }

    &[data-gap-regular='spacious'] {
      --stack-gap: var(--stack-gap-spacious);
    }

    &[data-align-regular='start'] {
      align-items: flex-start;
    }

    &[data-align-regular='center'] {
      align-items: center;
    }

    &[data-align-regular='end'] {
      align-items: flex-end;
    }

    &[data-align-regular='baseline'] {
      align-items: baseline;
    }

    &[data-justify-regular='start'] {
      justify-content: flex-start;
    }

    &[data-justify-regular='center'] {
      justify-content: center;
    }

    &[data-justify-regular='end'] {
      justify-content: flex-end;
    }

    &[data-justify-regular='space-between'] {
      justify-content: space-between;
    }

    &[data-justify-regular='space-evenly'] {
      justify-content: space-evenly;
    }

    &[data-wrap-regular='wrap'] {
      flex-wrap: wrap;
    }

    &[data-wrap-regular='nowrap'] {
      flex-wrap: nowrap;
    }
  }

  @media (--viewportRange-wide) {
    &[data-padding-wide='none'] {
      padding: 0;
    }

    &[data-padding-wide='condensed'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-condensed);
    }

    &[data-padding-wide='normal'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-normal);
    }

    &[data-padding-wide='spacious'] {
      /* stylelint-disable-next-line primer/spacing */
      padding: var(--stack-padding-spacious);
    }

    &[data-direction-wide='horizontal'] {
      flex-flow: row;
    }

    &[data-direction-wide='vertical'] {
      flex-flow: column;
    }

    &[data-gap-wide='none'] {
      --stack-gap: 0;
    }

    &[data-gap-wide='condensed'] {
      --stack-gap: var(--stack-gap-condensed);
    }

    &[data-gap-wide='normal'] {
      --stack-gap: var(--stack-gap-normal);
    }

    &[data-gap-wide='spacious'] {
      --stack-gap: var(--stack-gap-spacious);
    }

    &[data-align-wide='start'] {
      align-items: flex-start;
    }

    &[data-align-wide='center'] {
      align-items: center;
    }

    &[data-align-wide='end'] {
      align-items: flex-end;
    }

    &[data-align-wide='baseline'] {
      align-items: baseline;
    }

    &[data-justify-wide='start'] {
      justify-content: flex-start;
    }

    &[data-justify-wide='center'] {
      justify-content: center;
    }

    &[data-justify-wide='end'] {
      justify-content: flex-end;
    }

    &[data-justify-wide='space-between'] {
      justify-content: space-between;
    }

    &[data-justify-wide='space-evenly'] {
      justify-content: space-evenly;
    }

    &[data-wrap-wide='wrap'] {
      flex-wrap: wrap;
    }

    &[data-wrap-wide='nowrap'] {
      flex-wrap: nowrap;
    }
  }
}

.prc_StackItem_CweWT {
  flex: 0 1 auto;
  min-inline-size: 0;

  &[data-grow='true'],
  &[data-grow-narrow='true'] {
    flex-grow: 1;
  }

  @media (--viewportRange-regular) {
    &[data-grow-regular='true'] {
      flex-grow: 1;
    }

    &[data-grow-regular='false'] {
      flex-grow: 0;
    }
  }

  @media (--viewportRange-wide) {
    &[data-grow-wide='true'] {
      flex-grow: 1;
    }

    &[data-grow-wide='false'] {
      flex-grow: 0;
    }
  }
}

.prc_InputValidation_GjS0D {
  display: flex;
  font-size: var(--text-body-size-small);
  font-weight: var(--base-text-weight-semibold);
  /* stylelint-disable-next-line primer/colors */
  color: var(--inputValidation-fgColor);

  & :where(a) {
    color: currentColor;
    text-decoration: underline;
  }

  &:where([data-validation-status='success']) {
    --inputValidation-fgColor: var(--fgColor-success);
  }

  &:where([data-validation-status='error']) {
    --inputValidation-fgColor: var(--fgColor-danger);
  }
}

.prc_ValidationIcon_Kdbbr {
  align-items: center;
  display: flex;
  margin-inline-end: var(--base-size-4);
  min-height: var(--inputValidation-iconSize);
}

.prc_ValidationText_jjsBp {
  /* stylelint-disable-next-line primer/typography */
  line-height: var(--inputValidation-lineHeight);
}

.prc_Radio_Ly4MR {
  border-radius: var(--borderRadius-full, 100vh);
  transition:
    background-color,
    border-color 80ms cubic-bezier(0.33, 1, 0.68, 1); /* checked -> unchecked - add 120ms delay to fully see animation-out */

  &:where(:checked) {
    /* stylelint-disable-next-line primer/colors */
    background-color: var(--control-checked-fgColor-rest);

    /* using bgColor here to avoid a border change in dark high contrast */
    /* stylelint-disable-next-line primer/colors */
    border-color: var(--control-checked-bgColor-rest);
    border-width: var(--borderWidth-thicker);

    &:disabled {
      cursor: not-allowed;
      /* stylelint-disable-next-line primer/colors */
      background-color: var(--fgColor-muted);
      /* stylelint-disable-next-line primer/colors */
      border-color: var(--fgColor-muted);
    }
  }

  &:focus,
  &:focus-within {
    @mixin focusOutline 2px;
  }

  @media (forced-colors: active) {
    background-color: canvastext;
    border-color: canvastext;
  }
}

.prc_Input_mxggT {
  position: relative;
  display: grid;
  width: var(--base-size-16);
  height: var(--base-size-16);
  margin: 0;

  /* 2px to center align with label (20px line-height) */
  margin-top: var(--base-size-2);
  cursor: pointer;
  background-color: var(--bgColor-default);
  border-color: var(--control-borderColor-emphasis);
  border-style: solid;
  border-width: var(--borderWidth-thin);
  appearance: none;
  place-content: center;

  &:disabled {
    background-color: var(--control-bgColor-disabled);
    border-color: var(--control-borderColor-disabled);
  }
}

:where(.prc_Heading_6CmGO) {
  margin: 0;
  font-size: var(--text-title-size-large);
  font-weight: var(--base-text-weight-semibold);

  &:where([data-variant='large']) {
    font: var(--text-title-shorthand-large);
  }

  &:where([data-variant='medium']) {
    font: var(--text-title-shorthand-medium);
  }

  &:where([data-variant='small']) {
    font: var(--text-title-shorthand-small);
  }
}

.prc_ActionListHeader_lEr8v {
  margin-block-end: var(--base-size-8);

  &:where([data-list-variant='full']) {
    margin-inline-start: var(--base-size-8);
  }

  &:where([data-list-variant='inset']) {
    /* stylelint-disable-next-line primer/spacing */
    margin-inline-start: calc(var(--control-medium-paddingInline-condensed) + var(--base-size-8));
  }
}

/* stylelint-disable max-nesting-depth, selector-max-specificity, selector-max-compound-selectors */

.prc_ActionList_X4RiC {
  padding: 0;
  margin: 0;
  list-style: none;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  &:where([data-variant='inset']) {
    padding-block: var(--base-size-8);

    /* this is only to match default experience */
    & .prc_ActionListItem_uq6I7 {
      margin-inline: var(--base-size-8);
    }
  }

  &:where([data-dividers='true']) {
    /* place dividers on the wrapper that excludes leading visuals/actions */
    & .prc_ActionListSubContent_lP9xj::before {
      position: absolute;

      /* use this top size after FF removed */

      /* top: calc(-1 * var(--control-medium-paddingBlock)); */
      /* stylelint-disable-next-line primer/spacing */
      top: -7px;
      display: block;
      width: 100%;
      height: 1px;
      content: '';
      /* stylelint-disable-next-line primer/colors */
      background: var(--borderColor-muted);
    }

    /* if inline description, move pseudo divider to description wrapper */
    & [data-description-variant='inline'] {
      &::before {
        position: absolute;

        /* use this top size after FF removed */

        /* top: calc(-1 * var(--control-medium-paddingBlock)); */
        /* stylelint-disable-next-line primer/spacing */
        top: -7px;
        display: block;
        width: 100%;
        height: var(--borderWidth-thin);
        content: '';
        /* stylelint-disable-next-line primer/colors */
        background: var(--borderColor-muted);
      }

      /* remove the default divider */
      & .prc_ActionListSubContent_lP9xj::before {
        content: unset;
      }
    }

    /* hide if item is first of type with label::before, or is the first item after a sectionDivider */
    .prc_ActionListItem_uq6I7:first-of-type .prc_ActionListSubContent_lP9xj::before,
    .prc_Divider_rsZFG + .prc_ActionListItem_uq6I7 .prc_ActionListSubContent_lP9xj::before {
      visibility: hidden;
    }

    /* hide if item is first of type with label::before, or is the first item after a sectionDivider */
    .prc_ActionListItem_uq6I7:first-of-type [data-description-variant='inline']::before,
    .prc_Divider_rsZFG + .prc_ActionListItem_uq6I7 [data-description-variant='inline']::before {
      visibility: hidden;
    }
  }

  /* Make sure that the first visible item isn't a divider */
  & .prc_Divider_rsZFG:first-child {
    display: none;
  }
}

/* ActionListItem is a li that handles visual state, while ActionListItemContent controls actual state via button or link */

.prc_ActionListItem_uq6I7 {
  position: relative;
  list-style: none;
  background-color: var(--control-transparent-bgColor-rest);
  border-radius: var(--borderRadius-medium);

  /* apply flex if trailing action exists as an immediate child */
  &:has(> .prc_TrailingAction_RmUk1) {
    display: flex;
    flex-wrap: nowrap;
  }

  /* state */

  &:not(:has([aria-disabled], [disabled]), [aria-disabled='true'], [data-has-subitem='true']) {
    @media (hover: hover) {
      &:hover,
      &:active {
        cursor: pointer;
      }

      &:hover {
        background-color: var(--control-transparent-bgColor-hover);

        &:not([data-active], :focus-visible) {
          /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/