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

//- 💫 CSS > BASE > OBJECTS

//- Main container

.o-main
    padding: $nav-height 0 0 0
    max-width: 100%
    min-height: 100vh

    @include breakpoint(min, md)
        &.o-main--sidebar
            margin-left: $sidebar-width

        &.o-main--aside
            margin-right: $aside-width
            position: relative

            &:after
                @include position(absolute, top, left, 0, 100%)
                @include size($aside-width, 100%)
                content: ""
                display: block
                background: $pattern
                z-index: -1
                min-height: 100vh


//- Content container

.o-content
    padding: 3rem 7.5rem
    margin: 0 auto
    width: $content-width
    max-width: 100%

    @include breakpoint(max, sm)
        padding: 3rem


//- Footer

.o-footer
    position: relative
    padding: 2.5rem 0
    overflow: auto
    background: $color-subtle-light

    .o-main &
        border-top-left-radius: $border-radius


//- Blocks

.o-section
    width: 100%
    max-width: 100%

    &:not(:last-child)
        margin-bottom: 7rem
        padding-bottom: 4rem
        border-bottom: 1px dotted $color-subtle

    &.o-section--small
        overflow: auto

        &:not(:last-child)
            margin-bottom: 3.5rem
            padding-bottom: 2rem

.o-block
    margin-bottom: 4rem

.o-block-small
    margin-bottom: 2rem

.o-no-block.o-no-block
    margin-bottom: 0

.o-card
    background: $color-back
    border-radius: $border-radius
    box-shadow: $box-shadow


//- Accordion

.o-accordion
    &:not(:last-child)
        margin-bottom: 2rem

.o-accordion__content
    margin-top: 3rem

.o-accordion__button
    font: inherit
    border-radius: $border-radius
    width: 100%
    padding: 1.5rem 2rem
    background: $color-subtle-light

    &[aria-expanded="true"]
        border-bottom: 3px solid $color-subtle
        border-bottom-left-radius: 0
        border-bottom-right-radius: 0

        .o-accordion__hide
            display: none

    &:focus:not([aria-expanded="true"])
        background: $color-subtle

.o-accordion__icon
    @include size(2.5rem)
    background: $color-theme
    color: $color-back
    border-radius: 50%
    padding: 0.35rem
    pointer-events: none

//- Box

.o-box
    background: $color-subtle-light
    padding: 2rem
    border-radius: $border-radius

.o-box__logos
    padding-bottom: 1rem


//- Icons

.o-icon
    vertical-align: middle

    &.o-icon--inline
        margin: 0 0.5rem 0 0.1rem

    &.o-icon--tag
        vertical-align: bottom
        height: 100%
        position: relative
        top: 1px

.o-emoji
    margin-right: 0.75rem
    vertical-align: text-bottom

.o-badge
    border-radius: 1em

.o-thumb
    @include size(100px)
    overflow: hidden
    border-radius: 50%

    &.o-thumb--small
        @include size(35px)


//- SVG

.o-svg
    height: auto


//- Inline List

.o-inline-list > *
    display: inline

    &:not(:last-child)
        margin-right: 3rem


//- Logo

.o-logo
    @include size($logo-width, $logo-height)
    fill: currentColor
    vertical-align: middle
    margin: 0 0.5rem


//- Embeds

.o-chart
    max-width: 100%

.cp_embed_iframe
    border: 1px solid $color-subtle
    border-radius: $border-radius


//- Responsive Video embeds

.o-video
    position: relative
    height: 0

    @each $ratio1, $ratio2 in (16, 9), (4, 3)
        &.o-video--#{$ratio1}x#{$ratio2}
            padding-bottom: (100% * $ratio2 / $ratio1)

.o-video__iframe
    @include position(absolute, top, left, 0, 0)
    @include size(100%)
    border-radius: var(--border-radius)


//- Form fields

.o-field
    background: $color-back
    padding: 0 0.25em
    border-radius: 2em
    border: 1px solid $color-subtle
    margin-bottom: 0.25rem

.o-field__input,
.o-field__button
    padding: 0 0.35em

.o-field__input
    width: 100%

.o-field__select
     background: transparent
     color: $color-dark
     height: 1.4em
     border: none
     text-align-last: center
     width: 100%

//- Abbreviations

.o-abbr
    +breakpoint(min, md)
        cursor: help
        border-bottom: 2px dotted $color-theme
        padding-bottom: 3px

    +breakpoint(max, sm)
        &[data-tooltip]:before
            content: none

        &:after
            content: " (" attr(aria-label) ")"
            color: $color-subtle-dark