/* stylelint-disable primer/spacing */
/* stylelint-disable primer/typography */
/* BorderBox */
/* TODO: Rename to BorderBox to match PVC */
.Box {
  background-color: var(--bgColor-default);
  border-color: var(--borderColor-default);
  border-style: solid;
  border-width: var(--borderWidth-thin);
  border-radius: var(--borderRadius-medium);
}
/* Box padding density options */
.Box--condensed {
  line-height: 1.25;
}
.Box--condensed .Box-header {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }
.Box--condensed .Box-body {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }
.Box--condensed .Box-footer {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }
.btn-octicon:is(.Box--condensed .Box-btn-octicon) {
      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
      line-height: 1.25;
    }
.Box--condensed .Box-row {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }
.Box--spacious .Box-header {
    padding: var(--stack-padding-spacious);
    line-height: 1.25;
  }
.Box--spacious .Box-title {
    font-size: var(--text-title-size-medium);
  }
.Box--spacious .Box-body {
    padding: var(--stack-padding-spacious);
  }
.Box--spacious .Box-footer {
    padding: var(--stack-padding-spacious);
  }
.btn-octicon:is(.Box--spacious .Box-btn-octicon) {
      padding: var(--stack-padding-spacious);
      margin: calc(var(--stack-gap-spacious) * -1);
    }
.Box--spacious .Box-row {
    padding: var(--stack-padding-spacious);
  }
.Box-header {
  padding: var(--stack-padding-normal);
  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;
  background-color: var(--bgColor-muted);
  border-color: var(--borderColor-default);
  border-style: solid;
  border-width: var(--borderWidth-thin);
  border-top-left-radius: var(--borderRadius-medium);
  border-top-right-radius: var(--borderRadius-medium);
}
.Box-title {
  font-size: var(--text-body-size-medium);
  font-weight: var(--base-text-weight-semibold);
}
.Box-body {
  padding: var(--stack-padding-normal);
  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
}
.Box-body:last-of-type {
    margin-bottom: calc(var(--borderWidth-thin) * -1);
    border-bottom-right-radius: var(--borderRadius-medium);
    border-bottom-left-radius: var(--borderRadius-medium);
  }
/* Box rows */
.Box-row {
  padding: var(--stack-padding-normal);
  margin-top: calc(var(--borderWidth-thin) * -1);
  list-style-type: none; /* To account for applying Box component to a list */
  border-top-color: var(--borderColor-muted);
  border-top-style: solid;
  border-top-width: var(--borderWidth-thin);
}
.Box-row:first-of-type {
    border-top-left-radius: var(--borderRadius-medium);
    border-top-right-radius: var(--borderRadius-medium);
  }
.Box-row:last-of-type {
    border-bottom-right-radius: var(--borderRadius-medium);
    border-bottom-left-radius: var(--borderRadius-medium);
  }
/* Adds a blue vertical line to the left of the row
  ** For indicating a row item is unread */
.Box-row.Box-row--unread,.Box-row.unread {
    /* stylelint-disable-next-line primer/box-shadow */
    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
  }
/* Focus styles for when drag icon */
.Box-row.navigation-focus .Box-row--drag-button {
      color: var(--fgColor-accent);
      cursor: grab;
      opacity: 100;
    }
/* Grabbing while row is dragged */
.Box-row.navigation-focus.is-dragging .Box-row--drag-button {
      cursor: grabbing;
    }
/* Row dragging styles */
.Box-row.navigation-focus.sortable-chosen {
      background-color: var(--bgColor-muted);
    }
/* Makes dragging row background gray */
.Box-row.navigation-focus.sortable-ghost {
      background-color: var(--bgColor-muted);
      /* Hides contents of row while dragging so row looks solid gray */
    }
.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide {
        opacity: 0;
      }
.Box-row--focus-gray.navigation-focus {
    background-color: var(--bgColor-muted);
  }
.Box-row--focus-blue.navigation-focus {
    background-color: var(--bgColor-accent-muted);
  }
.Box-row--hover-gray:hover {
    background-color: var(--bgColor-muted);
  }
.Box-row--hover-blue:hover {
    background-color: var(--bgColor-accent-muted);
  }
/* Optional link style
** Makes links on mobile blue since they don't have hover state,
** and links are dark-gray with blue hover on desktop. */
@media (min-width: 768px) {
.Box-row-link {
    color: var(--fgColor-default);
    -webkit-text-decoration: none;
    text-decoration: none;
}
    .Box-row-link:hover {
      color: var(--fgColor-accent);
      -webkit-text-decoration: none;
      text-decoration: none;
    }
  }
/* Optional drag icon styles for reordering items
** Focus styles included in .Box-row above */
.Box-row--drag-button {
  opacity: 0;
}
.Box-footer {
  padding: var(--stack-padding-normal);
  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */
  border-top-color: var(--borderColor-default);
  border-top-style: solid;
  border-top-width: var(--borderWidth-thin);
  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
}
/* Option for a box with scrolling content */
.Box--scrollable {
  max-height: 324px;
  overflow: scroll;
}
/* Box themes */
.Box--blue {
  border-color: var(--borderColor-accent-muted);
}
.Box--blue .Box-header {
    background-color: var(--bgColor-accent-muted);
    border-color: var(--borderColor-accent-muted);
  }
.Box--blue .Box-body {
    border-color: var(--borderColor-accent-muted);
  }
.Box--blue .Box-row {
    border-color: var(--borderColor-accent-muted);
  }
.Box--blue .Box-footer {
    border-color: var(--borderColor-accent-muted);
  }
/* Applies and red border to the outside of the box,
** but not to the border separating rows. */
.Box--danger {
  border-color: var(--borderColor-danger-emphasis);
}
:is(.Box--danger .Box-row):first-of-type {
      border-color: var(--borderColor-danger-emphasis);
    }
:is(.Box--danger .Box-body):last-of-type {
      border-color: var(--borderColor-danger-emphasis);
    }
.Box-header--blue {
  background-color: var(--bgColor-accent-muted);
  border-color: var(--borderColor-accent-muted);
}
/* Box row highlight themes */
.Box-row--yellow {
  background-color: var(--bgColor-attention-muted);
}
.Box-row--blue {
  background-color: var(--bgColor-accent-muted);
}
.Box-row--gray {
  background-color: var(--bgColor-muted);
}
/* Box with btn-octicon */
/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
.Box-btn-octicon.btn-octicon {
    padding: var(--control-medium-paddingInline-spacious);
    margin: calc(var(--controlStack-small-gap-spacious) * -1);
    line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */
  }