/*

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;
}