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

//- 💫 CSS > BASE > UTILITIES

//- Text

.u-text,
.u-text-small,
.u-text-tiny
    font-family: $font-primary

.u-text
    font-size: 1.35rem
    line-height: 1.5

.u-text-small
    font-size: 1.3rem
    line-height: 1.375

.u-text-tiny
    font-size: 1.1rem
    line-height: 1.375

//- Labels & Tags

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

    &.u-text-label--light,
    &.u-text-label--dark
        display: inline-block
        border-radius: 1em
        padding: 0 1rem 0.15rem

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

    &.u-text-label--light
        background: $color-back
        color: $color-theme
        margin-bottom: 1rem

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

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


//- Headings

.u-heading
    margin-bottom: 1em

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

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

    &.u-heading--title:after
        content: ""
        display: block
        width: 10%
        min-width: 6rem
        height: 6px
        background: $color-theme
        margin-top: 3rem

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

    @include breakpoint(max, sm)
        font-size: 6rem


@each $level, $size in $headings
    .u-heading-#{$level}
        font: normal 500 #{$size}rem/#{1.1} $font-secondary

.u-heading__teaser
    margin-top: 2rem
    font-weight: normal


//- Links

.u-link
    color: $color-theme
    border-bottom: 1px solid
    transition: color 0.2s ease

    &:hover
        color: $color-theme-dark

.u-hand
    cursor: pointer

.u-hide-link.u-hide-link
    border: none
    color: inherit

    &:hover
        color: inherit

.u-permalink
    position: relative

    &:before
        content: "\00b6"
        font-size: 0.9em
        font-weight: normal
        color: $color-subtle
        @include position(absolute, top, left, 0.15em, -2.85rem)
        opacity: 0
        transition: opacity 0.2s ease

    &:hover:before
        opacity: 1

    &:active:before
        color: $color-theme

    &:target
        display: inline-block

        &:before
            bottom: 0.15em
            top: initial


[id]:target
    padding-top: $nav-height * 1.25



//- Layout

.u-width-full
    width: 100%

.u-float-left
    float: left
    margin-right: 1rem

.u-float-right
    float: right
    margin-left: 1rem

.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: 1.8rem

.u-padding-top
    padding-top: 2rem

.u-inline-block
    display: inline-block

.u-flex-full
    flex: 1

.u-nowrap
    white-space: nowrap

.u-wrap
    white-space: pre-wrap

.u-break.u-break
    word-wrap: break-word
    white-space: initial

    &.u-break--all
        word-break: break-all

.u-no-border
    border: none

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

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

@each $name, $color in (theme: $color-theme, dark: $color-dark, 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


//- Loaders

.u-loading,
[data-loading]
    $spinner-size: 75px
    $spinner-bar: 8px

    min-height: $spinner-size * 2
    position: relative

    & > *
        opacity: 0.35

    &:before
        @include position(absolute, top, left, 0, 0)
        @include size($spinner-size)
        right: 0
        bottom: 0
        margin: auto
        content: ""
        border: $spinner-bar solid $color-subtle
        border-right: $spinner-bar solid $color-theme
        border-radius: 50%
        animation: rotate 1s linear infinite
        z-index: 10


//- Hidden elements

.u-hidden,
[v-cloak]
    display: none !important

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

//- Transitions

.u-fade-enter-active
    transition: opacity 0.5s

.u-fade-enter
    opacity: 0