// Box // Intended to replace simple-box, boxed-group, and table-list

.Box {

background-color: var(--color-bg-primary);
border-color: var(--color-border-primary);
border-style: $border-style;
border-width: $border-width;
border-radius: $border-radius;

}

// Box padding density options .Box–condensed {

line-height: $lh-condensed;

.Box-header {
  padding: $spacer-2 $spacer-3;
}

.Box-body {
  padding: $spacer-2 $spacer-3;
}

.Box-footer {
  padding: $spacer-2 $spacer-3;
}

.Box-btn-octicon {
  &.btn-octicon {
    padding: $spacer-2 $spacer-3;
    // stylelint-disable-next-line primer/spacing
    margin: (-$spacer-2) (-$spacer-3);
    line-height: $lh-condensed;
  }
}

.Box-row {
  padding: $spacer-2 $spacer-3;
}

}

.Box–spacious {

.Box-header {
  padding: $spacer-4;
  line-height: $lh-condensed;
}

.Box-title {
  font-size: $h3-size;
}

.Box-body {
  padding: $spacer-4;
}

.Box-footer {
  padding: $spacer-4;
}

.Box-btn-octicon {
  &.btn-octicon {
    padding: $spacer-4;
    // stylelint-disable-next-line primer/spacing
    margin: (-$spacer-4) (-$spacer-4);
  }
}

.Box-row {
  padding: $spacer-4;
}

}

.Box-header {

padding: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin: (-$border-width) (-$border-width) 0;
background-color: var(--color-bg-tertiary);
border-color: var(--color-border-primary);
border-style: $border-style;
border-width: $border-width;
border-top-left-radius: $border-radius;
border-top-right-radius: $border-radius;

}

.Box-title {

font-size: $body-font-size;
font-weight: $font-weight-bold;

}

.Box-body {

padding: $spacer-3;
border-bottom: $border-width $border-style var(--color-border-primary);

// Ensures bottom-border doesn't poke out when .Box-body used without box-footer
&:last-of-type {
  // stylelint-disable-next-line primer/spacing
  margin-bottom: -$border-width;
  border-bottom-right-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
}

}

// Box rows .Box-row {

padding: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin-top: -1px;
list-style-type: none; // To account for applying Box component to a list
border-top-color: var(--color-border-secondary);
border-top-style: $border-style;
border-top-width: $border-width;

&:first-of-type {
  border-top-left-radius: $border-radius;
  border-top-right-radius: $border-radius;
}

&:last-of-type {
  border-bottom-right-radius: $border-radius;
  border-bottom-left-radius: $border-radius;
}

// Adds a blue vertical line to the left of the row
// For indicating a row item is unread
&.Box-row--unread,
// .unread to be deprecated with .Box-row-unread
&.unread {
  // stylelint-disable-next-line primer/box-shadow
  box-shadow: inset 2px 0 0 var(--color-border-info);
}

&.navigation-focus {
  // Focus styles for when drag icon
  .Box-row--drag-button {
    color: var(--color-text-link);
    cursor: grab;
    opacity: 100;
  }

  // Grabbing while row is dragged
  &.is-dragging .Box-row--drag-button {
    cursor: grabbing;
  }

  // Row dragging styles
  &.sortable-chosen {
    background-color: var(--color-bg-secondary);
  }

  // Makes dragging row background gray
  &.sortable-ghost {
    background-color: var(--color-bg-tertiary);

    // Hides contents of row while dragging so row looks solid gray
    .Box-row--drag-hide {
      opacity: 0;
    }
  }
}

}

.Box-row–focus-gray {

&.navigation-focus {
  background-color: var(--color-bg-tertiary);
}

}

.Box-row–focus-blue {

&.navigation-focus {
  background-color: var(--color-box-row-blue-bg);
}

}

.Box-row–hover-gray {

&:hover {
  background-color: var(--color-bg-tertiary);
}

}

.Box-row–hover-blue {

&:hover {
  background-color: var(--color-box-row-blue-bg);
}

}

// 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. .Box-row-link {

@include breakpoint(md) {
  color: var(--color-text-primary);
  text-decoration: none;

  &:hover {
    color: var(--color-text-link);
    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: $spacer-3;
// stylelint-disable-next-line primer/spacing
margin-top: -1px; // prevents double border when used with .Box-body
border-top-color: var(--color-border-primary);
border-top-style: $border-style;
border-top-width: $border-width;
border-radius: 0 0 $border-radius $border-radius;

}

// Option for a box with scrolling content .Box–scrollable {

max-height: 324px;
overflow: scroll;

}

// Box themes

.Box–blue {

border-color: var(--color-box-blue-border);

.Box-header {
  background-color: var(--color-bg-info);
  border-color: var(--color-box-blue-border);
}

.Box-body {
  border-color: var(--color-box-blue-border);
}

.Box-row {
  border-color: var(--color-box-blue-border);
}

.Box-footer {
  border-color: var(--color-box-blue-border);
}

}

// Applies and red border to the outside of the box, // but not to the border separating rows. .Box–danger {

border-color: var(--color-border-danger);

.Box-row {
  &:first-of-type {
    border-color: var(--color-border-danger);
  }
}

.Box-body {
  &:last-of-type {
    border-color: var(--color-border-danger);
  }
}

}

.Box-header–blue {

background-color: var(--color-box-header-blue-bg);
border-color: var(--color-box-header-blue-border);

}

// Box row highlight themes

.Box-row–yellow {

background-color: var(--color-box-row-yellow-bg);

}

.Box-row–blue {

background-color: var(--color-box-row-blue-bg);

}

.Box-row–gray {

background-color: var(--color-bg-tertiary);

}

//Box with btn-octicon .Box-btn-octicon {

// Increase specificity when btn-octicon is used because comes after .Box in the cascade
&.btn-octicon {
  padding: $spacer-3 $spacer-3;
  // stylelint-disable-next-line primer/spacing
  margin: (-$spacer-3) (-$spacer-3);
  line-height: $lh-default; // override btn-octicon line-height
}

}