/* Box */

@layer components {
  .box {
    /* Add vertical rhythm margins. */
    margin-block: var(--spacing-m);
    padding: var(--spacing-xs);
    border: 5px solid var(--color-border);

    .box__title,
    .title {
      margin-block-start: 0;
    }

    & > * {
      &:first-child {
        margin-block-start: 0;
      }

      &:last-child {
        margin-block-end: 0;
      }
    }
  }

  .box--highlight {
    border-color: var(--color-highlight);
  }

  .box--fit {
    width: fit-content;
  }

  .box--gutter {
    padding-inline: var(--gutters);
  }

  .box--inverted {
    background: var(--color-border);
    color: var(--color-text-bg);

    /* Make sure headings etc. also gets inverted. */
    * {
      color: var(--color-text-bg);
    }

    a {
      &:link {
        color: var(--color-link-inverted);
      }

      &:visited {
        color: var(--color-link-visited-inverted);
      }

      &:hover,
      &:focus {
        color: var(--color-link-hover-inverted);
      }

      &:active {
        color: var(--color-link-active-inverted);
      }
    }
  }
}