// Boxes
//
// Simple box shapes are interface building blocks. 

// Passive box
.box, .boxi {
  //border-top: 1px solid var(--color-shadow-1);
  //border-radius: var(--space-xs);
  //border: var(--border-width) solid var(--border-color, var(--color));
  //outline: 1px solid var(--color-highlight-3);
  //border: 1px solid var(--color-shadow-1);
  //box-shadow: 0 0 0 1px var(--color-shadow-3);
  background-color: var(--color-bg-1, var(--color-main-2));
  position: relative;
  display: block; // just in case
  min-width: 0px; // fix size to match with clip FF

  &:target {
    border-color: currentColor;
    z-index: 1;
  }
  &.ghost {
    background-color: transparent;
  }
}



// Interactive box
a.box, button.box, label.box, .boxi {
  cursor: pointer;
  //background-color: var(--color-bg-1, var(--color-main-2));
  &:hover {
    background-color: var(--color-bg-2, var(--color-prime-1));
    z-index: 3;
     .link { color: var(--color-bg-7, var(--color-prime-7)) }
    //.link { color: var(--color-prime-5)}
  }
  &:focus { @extend .focus; }
}

//.boxi.active {
//  //background-color: var(--color-bg-2, var(--color-prime-2));
//  background-color: var(--color-bg-3, var(--color-prime-3));
//}