/*******************************
      Computed Layout
*******************************/

/*
  These variables will most likely not need to be modified but are derived from theming
  variables to handle common layout utilities
*/

:root {
  
  /* -------------------
         Spacing
  -------------------- */

  --padding: var(--spacing);
  --compact-padding: var(--compact-spacing);

  --horizontally-padded: 0rem var(--padding);
  --vertically-padded: var(--padding) 0rem;

  --margin: var(--spacing);
  --vertically-spaced: var(--spacing) 0rem;
  --horizontally-spaced: 0rem var(--spacing);

  --centered: var(--spacing) auto;

  /* -------------------
      Border Radius
  -------------------- */

  /* Attached Borders */
  --top-attached-border-radius: var(--border-radius) var(--border-radius) 0px 0px;
  --right-attached-border-radius: var(--border-radius) 0px 0px var(--border-radius);
  --bottom-attached-border-radius: 0px 0px var(--border-radius) var(--border-radius);
  --left-attached-border-radius: 0px var(--border-radius) var(--border-radius) 0px;

  /* -------------------
         Scrollbar
  -------------------- */

  /* Rendered Scrollbar Width */
  --default-scrollbar-width: 17px;

  /* -------------------
         Loader 
  -------------------- */

  /* Loaders Position Offset */
  --loader-offset: calc(var(--loader-size) / 2 * -1);
  --loader-margin: var(--loader-offset) 0em 0em var(--loader-offset);

  /* -------------------
       Responsive
  -------------------- */

  /* Minimum Mobile Width */
  --page-min-width: 320px;

  /* Responsive */
  --largest-mobile-screen: calc(var(--tablet-breakpoint) - 1px);
  --largest-tablet-screen: calc(var(--computer-breakpoint) - 1px);
  --largest-small-monitor: calc(var(--large-monitor-breakpoint) - 1px);
  --largest-large-monitor: calc(var(--widescreen-monitor-breakpoint) - 1px);

  /* -------------------
       Split Widths
  -------------------- */

  /* Columns */
  --one-wide: calc(1 / var(--column-count) * 100%);
  --two-wide: calc(2 / var(--column-count) * 100%);
  --three-wide: calc(3 / var(--column-count) * 100%);
  --four-wide: calc(4 / var(--column-count) * 100%);
  --five-wide: calc(5 / var(--column-count) * 100%);
  --six-wide: calc(6 / var(--column-count) * 100%);
  --seven-wide: calc(7 / var(--column-count) * 100%);
  --eight-wide: calc(8 / var(--column-count) * 100%);
  --nine-wide: calc(9 / var(--column-count) * 100%);
  --ten-wide: calc(10 / var(--column-count) * 100%);
  --eleven-wide: calc(11 / var(--column-count) * 100%);
  --twelve-wide: calc(12 / var(--column-count) * 100%);
  --thirteen-wide: calc(13 / var(--column-count) * 100%);
  --fourteen-wide: calc(14 / var(--column-count) * 100%);
  --fifteen-wide: calc(15 / var(--column-count) * 100%);
  --sixteen-wide: calc(16 / var(--column-count) * 100%);

  --one-column: calc(1 / 1 * 100%);
  --two-column: calc(1 / 2 * 100%);
  --three-column: calc(1 / 3 * 100%);
  --four-column: calc(1 / 4 * 100%);
  --five-column: calc(1 / 5 * 100%);
  --six-column: calc(1 / 6 * 100%);
  --seven-column: calc(1 / 7 * 100%);
  --eight-column: calc(1 / 8 * 100%);
  --nine-column: calc(1 / 9 * 100%);
  --ten-column: calc(1 / 10 * 100%);
  --eleven-column: calc(1 / 11 * 100%);
  --twelve-column: calc(1 / 12 * 100%);
  --thirteen-column: calc(1 / 13 * 100%);
  --fourteen-column: calc(1 / 14 * 100%);
  --fifteen-column: calc(1 / 15 * 100%);
  --sixteen-column: calc(1 / 16 * 100%);

}