/*

Core

The core of Cutestrap is a large set of Custom Properties. Some are set on an
`html {}` ruleset and will be inherited by all children. Others are set on an
`* {}` ruleset and are used as mixins, which are special because they rely on
formulas. The only explicit styling performed here is setting `font-size` and
`line-height` on a `body {}` ruleset.

Markup:
<p>
    Example paragraph
</p>

Styleguide 1.0

*/

* {
    --rhythm: 2rem;
    --rhythm-quadruple: calc(4 * var(--rhythm));
    --rhythm-triple: calc(3 * var(--rhythm));
    --rhythm-double: calc(2 * var(--rhythm));
    --rhythm-half: calc((1/2) * var(--rhythm));
    --rhythm-third: calc((1/3) * var(--rhythm));
    --rhythm-fourth: calc((1/4) * var(--rhythm));
    --rhythm-sixth: calc((1/6) * var(--rhythm));
    --rhythm-eighth: calc((1/8) * var(--rhythm));
    --rhythm-twelfth: calc((1/12) * var(--rhythm));
    --rhythm-sixteenth: calc((1/16) * var(--rhythm));
    --line-height: var(--sub-rhythm, var(--rhythm));
    --line-height-ratio: 1.4;
    --font-size: calc(var(--line-height) / var(--line-height-ratio));
}

html {
    --border-radius: 4px;
    --color-primary-tint1: hsl(350, 80%, 60%);
    --color-primary: hsl(350, 80%, 45%);
    --color-primary-shade1: hsl(350, 80%, 35%);
    --color-accent-tint1: hsl(170, 80%, 60%);
    --color-accent: hsl(170, 80%, 45%);
    --color-accent-shade1: hsl(170, 80%, 35%);
    --color-link: hsl(230, 60%, 50%);
    --color-link-visited: hsl(290, 60%, 50%);
    --color-link-hover: hsl(230, 80%, 60%);
    --color-link-active: hsl(350, 60%, 50%);
    --color-neutral-tint4: hsl(170, 10%, 98%);
    --color-neutral-tint3: hsl(170, 10%, 94%);
    --color-neutral-tint2: hsl(170, 10%, 85%);
    --color-neutral-tint1: hsl(170, 10%, 68%);
    --color-neutral: hsl(170, 10%, 55%);
    --color-neutral-shade1: hsl(170, 10%, 41%);
    --color-neutral-shade2: hsl(170, 10%, 30%);
    --color-neutral-shade3: hsl(170, 10%, 18%);
    --color-neutral-shade4: hsl(170, 10%, 2%);
    --focus-outline: var(--rhythm-twelfth) dotted var(--color-primary-tint1);
    --focus-outline-offset: var(--rhythm-twelfth);
    --font-family: 'Avenir', 'Avenir Next', 'Helvetica Neue', 'Segoe UI', 'Verdana', sans-serif;
    --font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
    --font-heading: var(--font-family);
    --font-body: var(--font-family);
}

body {
    font-size: var(--font-size);
    line-height: var(--line-height);
}

/*

Base

The base stylesheet requires `core.css` and uses it to set all html elements
to adhere to the Baseline Grid and gives them default styles.

Markup:
<div>
  <h1>Headline 1</h1>
  <p>
    Paragraph
  </p>
  <h2>Headline 2</h2>
  <ul>
    <li>Unordered item</li>
    <li>Unordered item</li>
  </ul>
  <h3>Headline 3</h3>
  <ol>
    <li>Ordered item</li>
    <li>Ordered item</li>
  </ol>
  <h4>Headline 4</h4>
<pre>
  Preformatted
</pre>
  <h5>Headline 5</h5>
  <blockquote>
    Blockquote
  </blockquote>
  <h6>Headline 6</h6>
  <table>
    <tr>
      <th>Table Header</th>
      <th>Table Header</th>
    </tr>
    <tr>
      <td>Table Cell</td>
      <td>Table Cell</td>
    </tr>
  </table>
</div>

Styleguide 2.0

*/

* {
    border: 0;
    font: inherit;
    margin: 0;
    padding: 0;
    text-rendering: geometricPrecision;
}

:focus {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

html {
    overflow-x: hidden;
}

html,
body {
    box-sizing: border-box;
    min-height: 100%;
}

body {
    background-color: var(--color-neutral-tint4);
    color: var(--color-neutral-shade4);
    font-family: var(--font-body);
    position: relative;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-size: var(--font-size);
    line-height: var(--line-height);
    margin: var(--rhythm) 0;
}

h1 {
    --line-height-ratio: 1.1;
    --sub-rhythm: var(--rhythm-triple);

    font-weight: 700;
    margin-bottom: var(--rhythm-double);
}

h2 {
    --line-height-ratio: 1.2;
    --sub-rhythm: var(--rhythm-triple);
}

h3 {
    --line-height-ratio: 1.3;
    --sub-rhythm: var(--rhythm-double);

    font-weight: 700;
}

h4 {
    --sub-rhythm: var(--rhythm-double);
}

h5 {
    font-weight: 700;
}

p {
    margin-bottom: var(--rhythm);
}

form {
    margin: var(--rhythm) 0;
}

pre,
code,
samp,
kbd {
    background-color: var(--color-neutral-tint3);
    font-size: var(--font-size);
    color: var(--color-primary-shade1);
    font-family: var(--font-mono);
    line-height: 1;
}

code,
samp,
kbd {
    border-radius: var(--border-radius);
    overflow-y: hidden;
    overflow-x: auto;
    padding: var(--rhythm-sixth);
}

pre {
    border-radius: var(--border-radius);
    line-height: var(--line-height);
    overflow-y: hidden;
    overflow-x: auto;
    padding: var(--rhythm-half);
    margin: 0 0 var(--rhythm);
}

pre code,
pre samp,
pre kbd {
    background-color: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
}

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

a:visited {
    color: var(--color-link-visited);
}

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

a:active {
    color: var(--color-link-active);
}

img,
video {
    max-width: 100%;
    vertical-align: top;
}

hr {
    height: var(--rhythm-double);
    margin-bottom: var(--rhythm);
    position: relative;
}

hr::before {
    background-color: var(--color-neutral-tint1);
    content: '';
    height: 1px;
    left: 0;
    position: absolute;
    top: 50%;
    width: 100%;
}

ol,
ul {
    margin: 0 0 var(--rhythm) var(--rhythm);
}

ol {
    list-style-type: decimal;
}

ol ol {
    margin-bottom: 0;
}

ul {
    list-style-type: disc;
}

ul ul {
    margin-bottom: 0;
}

dt {
    font-style: italic;
}

dd {
    margin-left: var(--rhythm);
}

blockquote {
    margin: 0 0 var(--rhythm) var(--rhythm-half);
    border-left: var(--rhythm-eighth) solid var(--color-neutral-tint1);
    padding: var(--rhythm) var(--rhythm-half);
}

blockquote p:last-child {
    margin-bottom: 0;
}

figure {
    margin: 0 auto var(--rhythm);
}

small,
sub,
sup,
caption,
figcaption {
    font-size: calc(2 * var(--rhythm-third));
    vertical-align: top;
}

sub,
sup {
    position: relative;
}

sub {
    top: var(--rhythm-third);
}

sup {
    bottom: var(--rhythm-third);
}

caption,
figcaption {
    font-style: italic;
    text-align: center;
}

em,
cite,
i {
    font-style: italic;
}

strong,
var,
b {
    font-weight: bold;
}

q::before {
    content: "'";
}

q::after {
    content: "'";
}

q > q {
    font-style: italic;
}

dfn,
abbr {
    border-bottom: var(--rhythm-sixteenth) dotted var(--color-neutral-shade2);
    cursor: default;
}

table {
    border-radius: var(--border-radius);
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--rhythm);
    width: 100%;
}

table th {
    text-align: left;
}

table th,
table td {
    padding: 0 var(--rhythm-fourth);
}

input,
label,
select,
button,
textarea {
    color: var(--color-neutral-shade4);
    display: block;
    padding: var(--rhythm-half);
    resize: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Firefox detection for keeping exact rhythm */
@-moz-document url-prefix() {
    select {
        line-height: calc(var(--rhythm) - 2px);
    }
}

label {
    color: var(--color-neutral-shade1);
    padding: 0;
}

/*

Buttons

Buttons and their variations

Markup:
<button class="button {{modifier_class}}">Button</button>

.-secondary - A button with secondary colors
.-outlined - An outlined button
.-link - A button that looks like a link
.-block - Block level button
.-large - A large button
.-small - A small button
.-small.-outlined - A small, outlined button

Styleguide 3.0

*/

.button {
    --border-color: transparent;
    --border-color-hover: transparent;
    --border-thickness: var(--rhythm-twelfth);
    --background-color: var(--color-primary);
    --background-color-hover: var(--color-primary-shade1);
    --text-color: var(--color-neutral-tint4);
    --text-color-hover: var(--color-neutral-tint4);

    align-items: center;
    align-content: center;
    background-color: var(--background-color);
    border: var(--border-thickness) solid var(--border-color);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    color: var(--text-color);
    cursor: pointer;
    display: inline-block;
    font-size: var(--font-size);
    justify-content: center;
    line-height: var(--rhythm);
    max-width: 100%;
    min-height: calc(2 * var(--rhythm));
    padding: calc(5 * var(--rhythm-twelfth)) var(--rhythm);
    text-align: center;
    transition-duration: 250ms;
    transition-property: all;
    user-select: none;
    width: auto;
    vertical-align: middle;
}

.button::-moz-focus-inner {
    border: 0;
}

.button:link,
.button:visited {
    color: var(--text-color);
    text-decoration: none;
}

.button:focus,
.button:hover {
    background-color: var(--background-color-hover);
    border-color: var(--border-color-hover);
    color: var(--text-color-hover);
}

.button:active {
    background-color: var(--background-color);
    color: var(--text-color);
}

.button:disabled {
    opacity: .5;
    pointer-events: none;
}

.button.-outlined {
    --background-color: transparent;
    --background-color-hover: var(--color-primary-shade1);
    --border-color: var(--color-primary);
    --border-color-hover: var(--color-primary-shade1);
    --text-color: var(--color-primary);
}

.button.-secondary {
    --background-color: var(--color-neutral-tint2);
    --background-color-hover: var(--color-neutral-tint1);
    --border-color: var(--color-neutral-tint2);
    --border-color-hover: var(--color-neutral-tint1);
    --text-color: var(--color-neutral-shade3);
    --text-color-hover: var(--color-neutral-shade3);
}

.button.-link {
    --background-color: transparent;
    --background-color-hover: transparent;
    --border-color: transparent;
    --border-color-hover: transparent;
    --text-color: var(--color-link);
    --text-color-hover: var(--color-link-hover);

    text-decoration: underline;
}

.button.-block {
    display: block;
    width: 100%;
}

.button.-small {
    --sub-rhythm: calc(14 * var(--rhythm-sixteenth));
    --border-thickness: var(--rhythm-sixteenth);

    font-size: var(--font-size);
    line-height: var(--line-height);
    margin-top: calc(-2 * var(--rhythm-sixteenth));
    min-height: var(--sub-rhythm);
    padding: 0 var(--rhythm-half);
}

.button.-large {
    --sub-rhythm: calc(1.5 * var(--rhythm));
    --border-thickness: var(--rhythm-eighth);

    font-size: var(--font-size);
    line-height: var(--line-height);
    min-height: calc(3 * var(--rhythm));
    padding: calc(3 * var(--rhythm-eighth)) calc(2 * var(--rhythm));
}

/*

Forms

Markup:
<form>
    <label class="field">
        <input type="text" />
        <span class="label">Name</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Cone</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" />
        <span class="label">Bowl</span>
    </label>
    <label for="select" class="field">
        <select name="select">
            <option disabled="disabled" selected="selected">Flavors</option>
            <option>Chocolate</option>
            <option>Vanilla</option>
        </select>
        <span class="label">Favorite Ice Cream</span>
    </label>
    <label class="field">
        <textarea></textarea>
        <span class="label">Comments</span>
    </label>
    <label class="field">
        <input type="checkbox" />
        <span class="label">
            I consent to my ice cream flavors being saved into a database for
            eternity and understand and acknowledge this will have consequences
            for all of my decendants for decades to come.
        </span>
    </label>
</form>

Styleguide 4.0

*/

.field [disabled] + *,
[disabled] {
    cursor: default;
    opacity: .5;
    pointer-events: none;
}

.field {
    display: flex;
    margin-bottom: var(--rhythm);
    position: relative;
    text-align: left;
}

.field .label {
    z-index: 2;
}

.field [type=checkbox] + .label,
.field [type=radio] + .label {
    color: var(--color-neutral-shade4);
    cursor: pointer;
    display: inline-block;
    padding-left: var(--rhythm);
}

.field *:not([type=radio]):not([type=checkbox]) + .label {
    font-size: var(--rhythm-half);
    position: absolute;
    left: var(--rhythm-sixteenth);
    line-height: 1;
    padding: var(--rhythm-fourth) var(--rhythm-fourth) 0;
    right: var(--rhythm-sixteenth);
    top: 0;
}

.field input,
.field textarea,
.field select {
    background-color: var(--color-neutral-tint4);
    border: 1px solid var(--color-neutral-shade1);
    border-radius: var(--border-radius);
    box-sizing: border-box;
    margin-top: -2px;
    padding: calc(7 * var(--rhythm-eighth)) var(--rhythm-fourth) var(--rhythm-eighth);
    position: relative;
    width: 100%;
}

.field select {
    z-index: 1;
}

/*

Select

Markup:
<label class="field {{modifier_class}}">
    <select>
        <option disabled="disabled" selected="selected">Select</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
    <span class="label">Select Label</span>
</label>

Styleguide 4.1

*/

.field select + .label::after {
    content: '';
    border-left: var(--rhythm-fourth) solid transparent;
    border-right: var(--rhythm-fourth) solid transparent;
    border-top: var(--rhythm-fourth) solid var(--color-neutral-shade1);
    bottom: calc(-2 * var(--rhythm-third));
    height: 0;
    pointer-events: none;
    position: absolute;
    right: var(--rhythm-half);
    width: 0;
}

.field option[disabled] {
    background-color: var(--color-neutral-tint3);
    color: var(--color-neutral-shade2);
}

.field.-inline {
    display: inline-block;
    margin-right: var(--rhythm-half);
}

.field [type=checkbox],
.field [type=radio] {
    opacity: 0;
    position: absolute;
    z-index: 0;
}

.field [type=checkbox] + .label::before,
.field [type=radio] + .label::before {
    background-color: var(--color-neutral-tint4);
    border: 2px solid var(--color-neutral-shade1);
    content: '';
    height: var(--rhythm-half);
    left: 0;
    position: absolute;
    top: var(--rhythm-eighth);
    transform: translateY(var(--rhythm-sixteenth));
    width: var(--rhythm-half);
}

.field [type=checkbox] + .label::after,
.field [type=radio] + .label::after {
    background-color: var(--color-primary);
    border: 2px solid transparent;
    color: var(--color-neutral-tint4);
    height: var(--rhythm-fourth);
    left: var(--rhythm-eighth);
    position: absolute;
    top: var(--rhythm-fourth);
    transform: translateY(var(--rhythm-sixteenth));
    width: var(--rhythm-fourth);
}

/*

Checkbox

Markup:
<label class="field {{modifier_class}}">
    <input type="checkbox" />
    <span class="label">Checkbox</span>
</label>

Styleguide 4.2

*/

.field [type=checkbox] + .label::before,
.field [type=checkbox] + .label::after {
    border-radius: var(--border-radius);
}

/*

Radio

Markup:
<label class="field {{modifier_class}}">
    <input type="radio" />
    <span class="label">Radio</span>
</label>

Styleguide 4.3

*/

.field [type=radio] + .label::before,
.field [type=radio] + .label::after {
    border-radius: var(--rhythm);
}

.field [type=radio]:focus + .label::before,
.field [type=checkbox]:focus + .label::before {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-offset);
}

.field [type=checkbox]:checked + .label::after,
.field [type=radio]:checked + .label::after {
    content: '';
}

/*

Input and text areas

Markup:
<label class="field {{modifier_class}}">
    <input type="text" />
    <span class="label">Input</span>
</label>
<label class="field {{modifier_class}}">
    <textarea></textarea>
    <span class="label">Textarea</span>
</label>

Styleguide 4.4

*/

.field textarea {
    margin-top: 0;
    min-height: calc(4 * var(--rhythm));
}

/*

Disabled Fields

Markup:
<form>
    <label class="field">
        <input type="text" value="Someone" disabled />
        <span class="label">Name</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" disabled />
        <span class="label">Cone</span>
    </label>
    <label class="field -inline">
        <input type="radio" name="example" disabled />
        <span class="label">Bowl</span>
    </label>
    <label for="select" class="field">
        <select name="select" disabled>
            <option disabled="disabled" selected="selected">Flavors</option>
            <option>Chocolate</option>
            <option>Vanilla</option>
        </select>
        <span class="label">Favorite Ice Cream</span>
    </label>
    <label class="field">
        <textarea disabled>I am some comments</textarea>
        <span class="label">Comments</span>
    </label>
    <label class="field">
        <input type="checkbox" disabled />
        <span class="label">
            I consent to my ice cream flavors being saved into a database for
            eternity and understand and acknowledge this will have consequences
            for all of my decendants for decades to come.
        </span>
    </label>
</form>

Styleguide 4.5

*/

/*

Grid

A simple grid with automatic columns

Markup:
<div class="grid {{modifier_class}}">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

.-medium - start at 45rem
.-large - start at 80rem

Styleguide 5.0

*/

.grid {
    --columns: auto-fit;

    display: grid;
    column-gap: var(--rhythm);
    grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
}

@media (max-width: 45rem) {
    .grid.-medium {
        display: block;
    }
}

@media (max-width: 80rem) {
    .grid.-large {
        display: block;
    }
}

/*

Columns

Manually set column widths (Note: the syntax is passing a custom property with
a number value. KSS Docs only support modified classes, so ignore the term
[modifier class] and the dot before the number in the examples below).

Markup:
<div class="grid" style="--columns: {{modifier_class}}">
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
    <div>Column</div>
</div>

.2 - Two columns
.3 - Three columns
.4 - Four columns

Styleguide 5.1

*/

/*

Wrappers

Elements with max widths and paddings that can be used to separate content

Markup:
<div class="wrapper {{modifier_class}}">
    Wrapper
</div>

.-thin - A max-width of 45rem
.-wide - A max-width of 80rem
.-flush - No vertical or horizontal spacing

Styleguide 6.0

*/

.wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 60rem;
    padding: var(--rhythm-double) var(--rhythm-half);
    width: 100%;
}

.wrapper.-thin {
    max-width: 45rem;
    padding: var(--rhythm) var(--rhythm-half);
}

.wrapper.-wide {
    max-width: 80rem;
    padding: var(--rhythm-triple) var(--rhythm-half);
}

.wrapper.-flush {
    padding: 0 var(--rhythm-half);
}

/*

Utilities

These utility classes have one or two CSS properties that are meant to save you from creating several identical classes to do the same thing, like just centering some text.

Markup:
<div class="{{modifier_class}}">
    Example Text
</div>

.disabled                - Disable an Element
.clearfix                - Clear floats to keep the parent container in shape
.f-none                  - float: none;
.f-left                  - float: left;
.f-right                 - float: right;
.ta-left                 - text-align: left;
.ta-center               - text-align: center;
.ta-right                - text-align: right;

Styleguide 7.0

*/

.disabled {
    cursor: default;
    opacity: .5;
    pointer-events: none;
}

.f-none {
    float: none;
}

.f-left {
    float: left;
}

.f-right {
    float: right;
}

.clearfix {
    clear: both;
    overflow: hidden;
}

.ta-left {
    text-align: left;
}

.ta-center {
    text-align: center;
}

.ta-right {
    text-align: right;
}

/*

Type Utilities

These are specific typography related utilities

Markup:
<div class="type {{modifier_class}}">
    The quick<br />
    brown fox<br />
    jumps over<br />
    the lazy dog.
</div>

.fw-light            - Changes the type to be 300 weight
.fw-normal           - Changes the type to be 400 weight
.fw-bold             - Changes the type to be 700 weight
.fs-small            - Small font-size
.fs-base             - Base font-size
.fs-large            - Large font-size

Styleguide 7.1

*/

.fw-light {
    font-weight: 300;
}

.fw-normal {
    font-weight: 400;
}

.fw-bold {
    font-weight: 700;
}

.fs-small,
.fs-base,
.fs-large {
    font-size: var(--font-size);
    line-height: var(--line-height);
}

.fs-small {
    --sub-rhythm: calc(.75 * var(--rhythm));
}

.fs-base {
    --sub-rhythm: initial;
}

.fs-large {
    --sub-rhythm: calc(1.25 * var(--rhythm));
}

/*

Margin Utilities

These utilities allow you to easily remove margins that you don't want

Markup:
<h1 class="{{modifier_class}}">
    Do you like margins?
</h1>

.m-zero - Remove margins
.mt-zero - Remove top margin only
.mb-zero - Remove bottom margin only

Styleguide 7.2

*/

.m-zero {
    margin: 0;
}

.mt-zero {
    margin-top: 0;
}

.mb-zero {
    margin-bottom: 0;
}