/*********************
 * Setup outlines *
 * Useful for all outline transitions and animations
 *********************/

@utility outline-scaffold {
  outline: var(--outline-width) var(--outline-style)
    var(--outline-color, transparent);
  outline-offset: var(--outline-offset);

  &:focus-visible {
    outline-color: var(--outline-focus-color);
  }
}

@utility focus-within {
  outline: var(--outline-width) var(--outline-style) transparent;
  outline-offset: var(--outline-offset);

  &:focus-within {
    outline-color: var(--outline-focus-color);
  }

  /* Removes all outlines within the element */
  * {
    --outline-focus-color: transparent;
  }
}

/* Maybe Blog about this.
  These three properties used to preserve outlines, because overflow cuts off outlines. Content-box is necessary. If not, box will cut on the right side. (in Flex environments). */
/* These preserve outlines on scrollable elements that use a flex display *
 * Notes: 
  - content-box is necessary, if not present, box will be cut on the right side
 *********************/
@utility preserve-outlines {
  box-sizing: content-box;
  margin: calc(var(--outline-width) * -1);
  padding: calc(var(--outline-width));
}