Box: Orange

// We need to add this one in order to raise the specificity of the boxes 
// that will be used inside the Prose module. 
// Prose elements (headings, ul, p) are at 0011 and 
// the regular .box is at 0010. With the ".prose .box" we raise 
// the specificity to 0020 applying the proper overrides.

.prose .box,
.box {
  --box-bg-hsl: var(--base-hsl);
  --box-text-hsl: var(--base-hsl);
  background-color: hsla(var(--box-bg-hsl), .1);
  position: relative;
  padding: 24px 24px 24px 24px;

  &:before {
    background-color: hsla(var(--box-bg-hsl), 1);
    content: "";
    position: absolute;
    height: 100%;
    width: 4px;
    left: 0;
    top: 0;

    @media print {
      display: none;
    }
  }

  h3, 
  &__heading {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
    color: hsla(var(--box-text-hsl), 1);
  }

  a {
    color: hsla(var(--box-text-hsl), 1);
    font-weight: 500;
    text-decoration: underline;
    text-underline-position: under;
  
    &:hover {
      background-color: hsl(var(--box-bg-hsl), 0.1);
    }
  }

  @media print {
    break-inside: avoid;
    padding-left: 0;
    padding-right: 0;
    border-top: 4px solid hsl(var(--box-bg-hsl), 1);
    border-bottom: 4px solid hsl(var(--box-bg-hsl), 1);
  }
}

// Check explanation at the top of this file
.prose .box:only-child { margin-top: 0; }

.prose .box.box--teal,
.box--teal {
  --box-bg-hsl: var(--teal-hsl);
  --box-text-hsl: var(--teal-dark-hsl);
}

.prose .box.box--orange,
.box--orange {
  --box-bg-hsl: var(--orange-hsl);
  --box-text-hsl: var(--orange-dark-hsl);
}

.prose .box.box--yellow,
.box--yellow {
  --box-bg-hsl: var(--yellow-hsl);
  --box-text-hsl: var(--yellow-dark-hsl);
}

.prose .box.box--red,
.box--red {
  --box-bg-hsl: var(--red-hsl);
  --box-text-hsl: var(--red-hsl);
}