spaCy/website/assets/css/_base/_utilities.sass

//- 💫 CSS > BASE > UTILITIES

//- Text

.u-text
    font: 1.5rem/#{1.55} $font-primary

.u-text-small
    font: 1.4rem/#{1.375} $font-primary

.u-text-tiny
    font: 1.1rem/#{1.375} $font-primary


//- Labels & Tags

.u-text-label
    font: normal 600 1.4rem/#{1.5} $font-code
    text-transform: uppercase

    &.u-text-label--dark
        display: inline-block
        background: $color-dark
        box-shadow: inset 1px 1px 1px rgba($color-front, 0.25)
        color: $color-back
        padding: 0 0.75rem
        margin: 1.5rem 0 0 2rem
        border-radius: 2px

.u-text-tag
    display: inline-block
    font: 600 1.1rem/#{1} $font-code
    background: $color-theme
    color: $color-back
    padding: 0.15em 0.25em
    border-radius: 2px
    text-transform: uppercase
    vertical-align: middle

    &.u-text-tag--spaced
        margin-left: 0.75em


//- Headings

.u-heading
    margin-bottom: 2rem

    @include breakpoint(max, md)
        word-wrap: break-word

    &:not(:first-child)
        padding-top: 3.5rem

.u-heading-0
    font: normal bold 7rem/#{1} $font-primary

@each $level, $size in $headings
    .u-heading-#{$level}
        font: normal bold #{$size}rem/#{1.25} $font-primary


//- Links

.u-link
    color: $color-theme
    border-bottom: 1px solid

.u-permalink
    position: relative

    &:target
        display: inline-block
        padding-top: $nav-height * 1.25

        & + *
            margin-top: $nav-height * 1.25

.u-permalink__icon
    @include position(absolute, bottom, left, 0.35em, -2.75rem)
    @include size(1.5rem)
    color: $color-subtle

    .u-permalink:hover &
        color: $color-subtle-dark

    .u-permalink:active &
        color: $color-theme


//- Layout

.u-text-center
    text-align: center

.u-text-right
    text-align: right

.u-padding
    padding: 5rem

.u-padding-small
    padding: 0.5em 0.75em

.u-padding-medium
    padding: 2.5rem

.u-inline-block
    display: inline-block

.u-no-border
    border: none

.u-border
    border: 1px solid $color-subtle
    border-radius: 2px

.u-border-bottom
    border: 1px solid $color-subtle

.u-border-dotted
    border-top: 1px dotted $color-subtle

@each $name, $color in (theme: $color-theme, subtle: $color-subtle-dark, light: $color-back, red: $color-red, green: $color-green, yellow: $color-yellow)
    .u-color-#{$name}
        color: $color

.u-grayscale
    filter: grayscale(100%)
    transition: filter 0.15s ease
    user-select: none

    &:hover
        filter: none

.u-pattern
    background: $pattern


//- Hidden elements

.u-hidden
    display: none

@each $breakpoint in (xs, sm, md)
    .u-hidden-#{$breakpoint}.u-hidden-#{$breakpoint}
        @include breakpoint(max, $breakpoint)
            display: none