/* CSS Utility Classes
*
* Contains utility-based classes that should can be
* used on any element without needing or interfering
* with the context of the project itself. If you need
* to add a class, ensure it follows this statement:
*
* "This class is generic and can be used on ANY element."
*
* Note: Every class here starts with "u-" to easily show
*       in the HTML/markup that it is a utility class.
*
* When using utility classes in HTML/markup, put them at the
* end of the class list after the element-specific classes.
* This allows them to be easily found and their intent.
*
* ex) The "header header__text--large" classes can be assumed
*     to come from a stylesheet specific to that element
*
*     <h1 class="header header__text--large u-aside-top--small"></h1>
*
* -- Sizing --
* The following chart is common spacing values used in
* the design mockups. These values have been translated
* into terminology used for declaring different sizes.
* (Going off assumption that 1rem = 16px).
*
* Example usage: "u-aside" class selectors
*
* --- Size Naming Conventions -------
* | fine             8px = 0.5rem   |
* | diminutive      10px = 0.625rem |
* | tiny            16px = 1rem     |
* | small           20px = 1.25rem  |
* | medium          24px = 1.5rem   |
* | large           30px = 1.875rem |
* | huge            34px = 2.125rem |
* | gargantuan      44px = 2.75rem  |
* | colossal        50px = 3.125rem |
* | colossal-plus   64px = 4rem     |
* -----------------------------------
*
*/

/* Spacing Top */
.u-aside-top--fine {
    margin-top: 0.5rem;
}

.u-aside-top--diminutive {
    margin-top: .625rem;
}

.u-aside-top--tiny {
    margin-top: 1rem;
}

.u-aside-top--small {
    margin-top: 1.25rem;
}

.u-aside-top--medium {
    margin-top: 1.5rem;
}

.u-aside-top--large {
    margin-top: 1.875rem;
}

.u-aside-top--huge {
    margin-top: 2.125rem;
}

.u-aside-top--gargantuan {
    margin-top: 2.75rem;
}

.u-aside-top--colossal {
    margin-top: 2.125rem;
}

.u-aside-top--colossal-plus {
    margin-top: 4rem;
}


/* Spacing Right */
.u-aside-right--fine {
    margin-right: .5rem;
}

.u-aside-right--diminutive {
    margin-right: .625rem;
}

.u-aside-right--tiny {
    margin-right: 1rem;
    margin-top: 0.5rem;
}

.u-aside-right--small {
    margin-right: 1.25rem;
}


/* Spacing Bottom */
.u-aside-bottom--fine {
    margin-bottom: .5rem;
}

.u-aside-bottom--diminutive {
    margin-bottom: .625rem;
}

.u-aside-bottom--tiny {
    margin-bottom: 1rem;
}
.u-aside-bottom--large {
    margin-bottom: 1.875rem;
}

.u-aside-bottom--huge {
    margin-bottom: 2.125rem;
}

.u-aside-bottom--gargantuan {
    margin-bottom: 2.75rem;
}

.u-aside-bottom--colossal {
    margin-bottom: 3.125rem;
}

.u-aside-bottom--colossal-plus {
    margin-bottom: 4rem;
}

.u-aside-bottom--small {
    margin-bottom: 1.25rem;
}


/* Spacing Left */
.u-aside-left--fine {
    margin-left: 0.5rem;
}

.u-aside-left--tiny {
    margin-left: 1rem;
}

.u-aside-left--small {
    margin-left: 1.25rem;
}


/* Layout */
.u-flex {
    display: flex;
}

.u-center {
    margin-right: auto;
    margin-left: auto;
}

.u-center--flex {
    justify-content: center;
    align-items: center;
}


/* Visibility */
.u-hidden {
    display: none;
}


/* Text */
.u-text--center {
    text-align: center;
    text-decoration: none;
}

.u-text--clickable {
    cursor: pointer;
}

.u-text-weight--normal {
    font-weight: 400;
}

.u-text-weight--bold {
    font-weight: bold;
}

.u-text--uppercase {
    text-transform: uppercase;
}

/* Remove Spacing */
.u-trim-spacing--top {
    margin-top: 0;
}

.u-trim-spacing--bottom {
    margin-bottom: 0;
}


@media (min-width: 640px) {
    /* Spacing Top */
    .u-aside-top--diminutive--desktop {
        margin-top: .625rem;
    }

    .u-aside-top--small--desktop {
        margin-top: 1.25rem;
    }

    .u-aside-top--colossal--desktop {
        margin-top: 3.125rem;
    }

    .u-aside-top--gargantuan--desktop {
        margin-top: 2.75rem;
    }

    /* Spacing Right */
    .u-aside-right--diminutive--desktop {
        margin-right: .625rem;
    }

    .u-aside-right--gargantuan--desktop {
        margin-right: 2.75rem;
    }

    /* Spacing Bottom */
    .u-aside-bottom--diminutive--desktop {
        margin-bottom: .625rem;
    }

    .u-aside-bottom--small--desktop {
        margin-bottom: 1.25rem;
    }

    .u-aside-bottom--colossal--desktop {
        margin-bottom: 3.125rem;
    }

    .u-aside-bottom--colossal-plus--desktop {
        margin-bottom: 4rem;
    }

    /* Spacing Left */
    .u-aside-left--small--desktop {
        margin-left: 1.25rem;
    }

    /* Remove Spacing */
    .u-trim-spacing--top--desktop {
        margin-top: 0;
    }
}