// Monolith CSS
// The core of your next front-end project.
// --------------------------------------------------------
// 1. Globals
// 2. Grid
// 3. Typography
// 4. Buttons
// 5. Forms
// --------------------------------------------------------

// 1. Globals
// ----------

// If you have a scope, don't forget to
// uncomment the scope wrapper in monolith.scss
$scope: '';

$global-space: 16px;
$global-ease: ease-out 0.2s;

$global-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;
$global-font-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
$global-monospace: monospace, monospace;
$global-font-size: 16px;
$global-font-weight-normal: normal;
$global-font-weight-bold: bold;
$global-font-style-normal: normal;
$global-font-style-italic: italic;
$global-line-height: 1.5;

$primary-color: goldenrod;
$secondary-color: crimson;
$tertiary-color: teal;
$black: #000111;
$gray100: #111;
$gray200: #222;
$gray400: #444;
$gray600: #666;
$gray800: #888;
$gray900: #ddd;
$white: #ffffff;

$status-palette: (
  warning: khaki,
  success: green,
  destroy: red,
  notice: steelblue
);

$global-border-radius: 4px;
$global-border-width: 2px;
$global-outline: 2px solid $primary-color;

// 2. Grid
// -------

$grid-classes: (
  grid: 'grid',
  row: 'row',
  column: 'column',
);

$grid-widths: (
  fluid: 100%,
  narrow: 768px,
  wide: 1200px,
);

$grid-sections: (
  small: 48px,
  medium: 96px,
  large: 144px,
);

$breakpoints: (
  xsmall: 0,
  small: 576px,
  medium: 768px,
  large: 992px,
  xlarge: 1200px,
);

$grid-gutter: $global-space;
$grid-width: 992px;

$order-threshold: 20;

$columns: 12;
$column-padding-top: 0;
$column-padding-bottom: $global-space;
$column-gutter: $global-space / 2;

$column-offset-classes: true;
$column-order-classes: true;

// 3. Typography
// -------------

// Note: You can't add extra CSS properties here.
//       Do that in a separate stylesheet as
//       a class modifier instead.
$type-header-sizes: (
  xsmall: (
    h1: (
      font-size: 32px,
      margin-bottom: 20px,
    ),
    h2: (
      font-size: 28px,
      margin-bottom: 18px,
    ),
    h3: (
      font-size: 24px,
      margin-bottom: $global-space,
    ),
    h4: (
      font-size: 20px,
      margin-bottom: 14px,
    ),
    h5: (
      font-size: 18px,
      margin-bottom: 12px,
    ),
    h6: (
      font-size: $global-font-size,
      margin-bottom: 10px,
    ),
  ),
  medium: (
    h1: (
      font-size: 48px,
      margin-bottom: 24px,
    ),
    h2: (
      font-size: 42px,
      margin-bottom: 20px,
    ),
    h3: (
      font-size: 36px,
      margin-bottom: 18px,
    ),
    h4: (
      font-size: 30px,
      margin-bottom: $global-space,
    ),
    h5: (
      font-size: 27px,
      margin-bottom: 14px,
    ),
    h6: (
      font-size: 24px,
      margin-bottom: 12px,
    ),
  ),
  large: (
    h1: (
      font-size: 64px,
      margin-bottom: 32px,
    ),
    h2: (
      font-size: 56px,
      margin-bottom: 26px,
    ),
    h3: (
      font-size: 48px,
      margin-bottom: 22px,
    ),
    h4: (
      font-size: 40px,
      margin-bottom: $global-space,
    ),
    h5: (
      font-size: 36px,
      margin-bottom: 12px,
    ),
    h6: (
      font-size: 32px,
      margin-bottom: 10px,
    ),
  ),
);

// Note: You can't add extra CSS properties here.
//       Do that in a separate stylesheet as
//       a class modifier instead.
$type-header-styles: (
  h1: (
    color: $gray200,
    font-style: normal,
    font-weight: bold,
  ),
  h2: (
    color: $gray200,
    font-style: normal,
    font-weight: bold,
  ),
  h3: (
    color: $gray200,
    font-style: normal,
    font-weight: bold,
  ),
  h4: (
    color: $gray200,
    font-style: normal,
    font-weight: bold,
  ),
  h5: (
    color: $gray200,
    font-style: normal,
    font-weight: bold,
  ),
  h6: (
    color: $gray200,
    font-style: normal,
    font-weight: bold,
  ),
);

$type-header-line-height: $global-line-height;

$type-p-color: $gray200;
$type-p-font-size: 16px;
$type-p-font-style: normal;
$type-p-font-weight: normal;
$type-p-line-height: $global-line-height;
$type-p-margin-bottom: 16px;

$type-code-font: $global-monospace;
$type-code-font-size: 1em;
$type-code-color: $black;
$type-code-background: lighten($gray900, 5%);
$type-code-border: none;
$type-code-radius: $global-border-radius;
$type-code-padding: 0 4px;

$type-pre-padding: $global-space;

$type-strong-font-style: normal;
$type-strong-font-weight: bold;

$type-em-font-style: italic;
$type-em-font-weight: normal;

$type-small-font-size: 75%;
$type-small-font-weight: inherit;

$type-mark-padding: 10px;
$type-mark-color: $gray200;
$type-mark-background: status(warning);

$list-padding: 0 0 0 18px;
$list-margin: 0;
$list-font: $global-font-sans;
$list-item-margin: 0;
$list-item-padding: 8px 0;
$ul-list-style: disc;
$ol-list-style: decimal;

// 4. Buttons
// ----------

// Note: You can't add extra CSS properties here.
//       Do that in a separate stylesheet as
//       a class modifier instead.
$button-sizes: (
  small: (
    padding: 8px 14px,
    font-size: 14px,
  ),
  medium: (
    padding: 12px 18px,
    font-size: 16px,
  ),
  large: (
    padding: 16px 22px,
    font-size: 20px,
  ),
  huge: (
    padding: 20px 30px,
    font-size: 24px,
  ),
);

// Default button

$button-padding: 10px $global-space;
$button-margin: 0 0 $global-space 0;
$button-border-radius: $global-border-radius;
$button-border-style: solid;
$button-border-width: $global-border-width;
$button-font-size: $global-font-size;
$button-font-style: normal;
$button-font-weight: normal;
$button-font: $global-font-sans;
$button-decoration: none;
$button-decoration-hover: none;

$button-background: $white;
$button-background-hover: $button-background;
$button-background-active: lighten($gray900, 10%);
$button-background-focus: $button-background;

$button-color: $gray200;
$button-color-hover: $button-color;
$button-color-active: $button-color;
$button-color-focus: $button-color;

$button-border-color: $gray800;
$button-border-color-hover: $gray600;
$button-border-color-active: $gray400;
$button-border-color-focus: $gray600;

$button-box-shadow: none;
$button-box-shadow-hover: $button-box-shadow;
$button-box-shadow-active: $button-box-shadow;
$button-box-shadow-focus: $button-box-shadow;

// Branded & specialized buttons

// Note: You can't add extra CSS properties here.
//       Do that in a separate stylesheet as
//       a class modifier instead.
$button-types: (
  // basic
  primary: (
    background: lighten($primary-color, 5%),
    background-hover: $primary-color,
    background-active: darken($primary-color, 2%),
    background-focus: $primary-color,

    color: $white,
    color-hover: $white,
    color-active: $white,
    color-focus: $white,

    border-color: transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-focus: transparent,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),
  secondary: (
    background: transparent,
    background-hover: transparent,
    background-active: transparent,
    background-focus: transparent,

    color: lighten($primary-color, 5%),
    color-hover: $primary-color,
    color-active: darken($primary-color, 2%),
    color-focus: $primary-color,

    border-color: lighten($primary-color, 5%),
    border-color-hover: $primary-color,
    border-color-active: darken($primary-color, 2%),
    border-color-focus: $primary-color,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),
  tertiary: (
    background: transparent,
    background-hover: rgba($gray900, 0.2),
    background-active: rgba($gray900, 0.3),
    background-focus: rgba($gray900, 0.2),

    color: $primary-color,
    color-hover: $primary-color,
    color-active: $primary-color,
    color-focus: $primary-color,

    border-color: transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-focus: transparent,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),

  // inverted
  inverted: (
    background: lighten($gray900, 5%),
    background-hover: $white,
    background-active: $gray900,
    background-focus: $white,

    color: $gray200,
    color-hover: $gray200,
    color-active: $gray200,
    color-focus: $gray200,

    border-color: transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-focus: transparent,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),
  inverted-outline: (
    background: transparent,
    background-hover: transparent,
    background-active: transparent,
    background-focus: transparent,

    color: $white,
    color-hover: $white,
    color-active: $white,
    color-focus: $white,

    border-color: $gray900,
    border-color-hover: $white,
    border-color-active: darken($gray900, 2%),
    border-color-focus: $white,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),

  // status
  warning: (
    background: darken(status(warning), 5%),
    background-hover: status(warning),
    background-active: darken(status(warning), 2%),
    background-focus: status(warning),

    color: $black,
    color-hover: $black,
    color-active: $black,
    color-focus: $black,

    border-color: transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-focus: transparent,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),
  success: (
    background: darken(status(success), 5%),
    background-hover: status(success),
    background-active: darken(status(success), 2%),
    background-focus: status(success),

    color: $white,
    color-hover: $white,
    color-active: $white,
    color-focus: $white,

    border-color: transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-focus: transparent,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),
  destroy: (
    background: darken(status(destroy), 5%),
    background-hover: status(destroy),
    background-active: darken(status(destroy), 2%),
    background-focus: status(destroy),

    color: $white,
    color-hover: $white,
    color-active: $white,
    color-focus: $white,

    border-color: transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-focus: transparent,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),
  notice: (
    background: darken(status(notice), 5%),
    background-hover: status(notice),
    background-active: darken(status(notice), 2%),
    background-focus: status(notice),

    color: $white,
    color-hover: $white,
    color-active: $white,
    color-focus: $white,

    border-color: transparent,
    border-color-hover: transparent,
    border-color-active: transparent,
    border-color-focus: transparent,

    box-shadow: none,
    box-shadow-hover: none,
    box-shadow-active: none,
    box-shadow-focus: none,
  ),
);

// Text links

$link-color: lighten($primary-color, 10%);
$link-decoration: none;
$link-decoration-hover: underline;
$link-font: $global-font-sans;
$link-style: normal;
$link-weight: normal;
$link-font-size: $global-font-size;
$link-hover: $primary-color;
$link-active: $link-hover;

// 5. Forms
// --------

// Form tag

$form-margin: 0;
$form-padding: 0;
$form-background: transparent;
$form-box-shadow: none;
$form-border: none;
$form-font: $global-font-sans;
$form-radius: $global-border-radius;

// Input + Textarea

$input-font-size: $global-font-size;
$input-font: $form-font;
$input-box-shadow: none;
$input-border: $global-border-width solid $gray800;
$input-padding: 12px;
$input-margin: 8px 0 $global-space 0;
$input-border-radius: $form-radius;
$input-background: $white;
$input-resize: vertical;

// Input + Textarea states

$input-hover-background: $input-background;
$input-hover-border: $global-border-width solid $gray600;
$input-hover-box-shadow: $input-box-shadow;

$input-focus-background: $input-background;
$input-focus-border: $global-border-width solid $primary-color;
$input-focus-box-shadow: $input-box-shadow;

$input-disabled-background: $gray900;
$input-disabled-color: $gray400;
$input-disabled-border: $global-border-width solid $input-disabled-background;
$input-disabled-resize: none;

// Radio and Checkbox

$input-option-row-breakpoint: small;

$input-option-row-padding-bottom: $global-space;
$input-option-column-padding-bottom: $global-space;
$input-option-padding: 0;
$input-option-margin: 0 12px 0 0;
$input-option-label-padding-right: $global-space;
$input-option-label-padding-bottom: $global-space;
$input-option-input-margin-right: $global-space / 2;
$input-option-margin-top: 8px;

// Fieldset

$fieldset-border: $global-border-width solid $gray900;
$fieldset-border-radius: $form-radius;
$fieldset-box-shadow: none;
$fieldset-background: transparent;
$fieldset-margin: 0;
$fieldset-padding: $global-space;

// Fieldset legend

$fieldset-legend-font: $form-font;
$fieldset-legend-font-size: $global-font-size;
$fieldset-legend-padding: 12px 20px;
$fieldset-legend-color: $gray200;
$fieldset-legend-background: $white;
$fieldset-legend-box-shadow: 0 8px 30px $gray800;
$fieldset-legend-border: none;
$fieldset-legend-border-radius: $global-border-radius;