// 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
  }
}