/* BorderBox */

/* TODO: Rename to BorderBox to match YVC */

.Box {
  background-color: var(--color-canvas-default);
  border-color: var(--color-border-default);
  border-style: solid;
  border-width: var(--yattho-borderWidth-thin, 1px);
  border-radius: var(--yattho-borderRadius-medium, 6px);
}

/* Box padding density options */

.Box--condensed {
  line-height: 1.25;
}

.Box--condensed .Box-header {
    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
  }

.Box--condensed .Box-body {
    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
  }

.Box--condensed .Box-footer {
    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
  }

.Box--condensed .Box-btn-octicon.btn-octicon {
      padding: var(--yattho-control-medium-paddingInline-condensed, 8px) var(--yattho-control-medium-paddingInline-spacious, 16px);
      margin: calc(var(--yattho-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);
      line-height: 1.25;
    }

.Box--condensed .Box-row {
    padding: var(--yattho-stack-padding-condensed, 8px) var(--yattho-stack-padding-normal, 16px);
  }

.Box--spacious .Box-header {
    padding: var(--yattho-stack-padding-spacious, 24px);
    line-height: 1.25;
  }

.Box--spacious .Box-title {
    font-size: var(--yattho-text-title-size-medium, 20px);
  }

.Box--spacious .Box-body {
    padding: var(--yattho-stack-padding-spacious, 24px);
  }

.Box--spacious .Box-footer {
    padding: var(--yattho-stack-padding-spacious, 24px);
  }

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

.Box--spacious .Box-row {
    padding: var(--yattho-stack-padding-spacious, 24px);
  }

.Box-header {
  padding: var(--yattho-stack-padding-normal, 16px);
  margin: calc(var(--yattho-borderWidth-thin, 1px) * -1) calc(var(--yattho-borderWidth-thin, 1px) * -1) 0;
  background-color: var(--color-canvas-subtle);
  border-color: var(--color-border-default);
  border-style: solid;
  border-width: var(--yattho-borderWidth-thin, 1px);
  border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
  border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
}

.Box-title {
  font-size: var(--yattho-text-body-size-medium, 14px);
  font-weight: var(--base-text-weight-semibold, 600);
}

.Box-body {
  padding: var(--yattho-stack-padding-normal, 16px);
  border-bottom: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-default);

  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
}

.Box-body:last-of-type {
    margin-bottom: calc(var(--yattho-borderWidth-thin, 1px) * -1);
    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
  }

/* Box rows */

.Box-row {
  padding: var(--yattho-stack-padding-normal, 16px);
  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1);
  list-style-type: none; /* To account for applying Box component to a list */
  border-top-color: var(--color-border-muted);
  border-top-style: solid;
  border-top-width: var(--yattho-borderWidth-thin, 1px);
}

.Box-row:first-of-type {
    border-top-left-radius: var(--yattho-borderRadius-medium, 6px);
    border-top-right-radius: var(--yattho-borderRadius-medium, 6px);
  }

.Box-row:last-of-type {
    border-bottom-right-radius: var(--yattho-borderRadius-medium, 6px);
    border-bottom-left-radius: var(--yattho-borderRadius-medium, 6px);
  }

/* 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 {
    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
  }

/* Focus styles for when drag icon */

.Box-row.navigation-focus .Box-row--drag-button {
      color: var(--color-accent-fg);
      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(--color-canvas-subtle);
    }

/* Makes dragging row background gray */

.Box-row.navigation-focus.sortable-ghost {
      background-color: var(--color-canvas-subtle);

      /* 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(--color-canvas-subtle);
  }

.Box-row--focus-blue.navigation-focus {
    background-color: var(--color-accent-subtle);
  }

.Box-row--hover-gray:hover {
    background-color: var(--color-canvas-subtle);
  }

.Box-row--hover-blue:hover {
    background-color: var(--color-accent-subtle);
  }

/* 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(--color-fg-default);
    text-decoration: none;
}

    .Box-row-link:hover {
      color: var(--color-accent-fg);
      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(--yattho-stack-padding-normal, 16px);
  margin-top: calc(var(--yattho-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
  border-top-color: var(--color-border-default);
  border-top-style: solid;
  border-top-width: var(--yattho-borderWidth-thin, 1px);
  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);
}

/* Option for a box with scrolling content */

.Box--scrollable {
  max-height: 324px;
  overflow: scroll;
}

/* Box themes */

.Box--blue {
  border-color: var(--color-accent-muted);
}

.Box--blue .Box-header {
    background-color: var(--color-accent-subtle);
    border-color: var(--color-accent-muted);
  }

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

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

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

/* Applies and red border to the outside of the box,
** but not to the border separating rows. */

.Box--danger {
  border-color: var(--color-danger-emphasis);
}

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

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

.Box-header--blue {
  background-color: var(--color-accent-subtle);
  border-color: var(--color-accent-muted);
}

/* Box row highlight themes */

.Box-row--yellow {
  background-color: var(--color-attention-subtle);
}

.Box-row--blue {
  background-color: var(--color-accent-subtle);
}

.Box-row--gray {
  background-color: var(--color-canvas-subtle);
}

/* 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(--yattho-control-medium-paddingInline-spacious, 16px) var(--yattho-control-medium-paddingInline-spacious, 16px);
    margin: calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1) calc(var(--yattho-controlStack-small-gap-spacious, 16px) * -1);
    line-height: 1.5; /* override btn-octicon line-height */
  }