/* 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-header {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }

  & .Box-body {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }

  & .Box-footer {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }

  & .Box-btn-octicon {
    &.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-row {
    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
  }
}

.Box--spacious {
  & .Box-header {
    padding: var(--stack-padding-spacious);
    line-height: 1.25;
  }

  & .Box-title {
    font-size: var(--text-title-size-medium);
  }

  & .Box-body {
    padding: var(--stack-padding-spacious);
  }

  & .Box-footer {
    padding: var(--stack-padding-spacious);
  }

  & .Box-btn-octicon {
    &.btn-octicon {
      padding: var(--stack-padding-spacious);
      margin: calc(var(--stack-gap-spacious) * -1);
    }
  }

  & .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 */
  &: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);

  &:first-of-type {
    border-top-left-radius: var(--borderRadius-medium);
    border-top-right-radius: var(--borderRadius-medium);
  }

  &: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--unread,
  /* .unread to be deprecated with .Box-row-unread */
  &.unread {
    /* stylelint-disable-next-line primer/box-shadow */
    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
  }

  &.navigation-focus {
    /* Focus styles for when drag icon */
    & .Box-row--drag-button {
      color: var(--fgColor-accent);
      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(--bgColor-muted);
    }

    /* Makes dragging row background gray */
    &.sortable-ghost {
      background-color: var(--bgColor-muted);

      /* 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(--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. */
.Box-row-link {
  @media (min-width: 768px) {
    color: var(--fgColor-default);
    text-decoration: none;

    &:hover {
      color: var(--fgColor-accent);
      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-header {
    background-color: var(--bgColor-accent-muted);
    border-color: var(--borderColor-accent-muted);
  }

  & .Box-body {
    border-color: var(--borderColor-accent-muted);
  }

  & .Box-row {
    border-color: var(--borderColor-accent-muted);
  }

  & .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);

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

  & .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 */
.Box-btn-octicon {
  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
  &.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 */
  }
}