hstack {
    display: flex;
    align-self: stretch;
    align-items: center;
    flex-direction: row
}

hstack[spacing=xl] > * {
    margin-right: 40px
}

hstack[spacing=l] > * {
    margin-right: 28px
}

hstack[spacing=m] > * {
    margin-right: 20px
}

hstack[spacing=s] > * {
    margin-right: 15px
}

hstack[spacing=xs] > * {
    margin-right: 10px
}

hstack[spacing=xxs] > * {
    margin-right: 6px
}

hstack[spacing] > :last-child {
    margin-right: 0
}

hstack[align-y=top] {
    align-items: flex-start
}

hstack[align-y=center] {
    align-items: center
}

hstack[align-y=bottom] {
    align-items: flex-end
}

hstack[align-x=left] {
    justify-content: flex-start
}

hstack[align-x=center] {
    justify-content: center
}

hstack[align-x=right] {
    justify-content: flex-end
}

vstack {
    display: flex;
    align-self: stretch;
    flex: 1 1 auto;
    flex-direction: column
}

vstack[spacing=xl] > * {
    margin-bottom: 40px
}

vstack[spacing=l] > * {
    margin-bottom: 28px
}

vstack[spacing=m] > * {
    margin-bottom: 20px
}

vstack[spacing=s] > * {
    margin-bottom: 15px
}

vstack[spacing=xs] > * {
    margin-bottom: 10px
}

vstack[spacing=xxs] > * {
    margin-bottom: 6px
}

vstack[spacing] > :last-child {
    margin-bottom: 0
}

vstack[align-x=left] {
    align-items: flex-start
}

vstack[align-x=center] {
    align-items: center
}

vstack[align-x=right] {
    align-items: flex-end
}

vstack[align-y=top] {
    justify-content: flex-start
}

vstack[align-y=center] {
    justify-content: center
}

vstack[align-y=bottom] {
    justify-content: flex-end
}

list {
    display: flex;
    align-self: stretch;
    flex: 1 1 auto;
    flex-direction: column
}

list > * {
    border-bottom: 1px solid #d9ddde
}

list > *, list vstack {
    margin: 0
}

list > :last-child {
    border-bottom: none
}

list[spacing=xl] > * {
    padding: 40px 0
}

list[spacing=l] > * {
    padding: 28px 0
}

list[spacing=m] > * {
    padding: 20px 0
}

list[spacing=s] > * {
    padding: 15px 0
}

list[spacing=xs] > * {
    padding: 10px 0
}

list[spacing=xxs] > * {
    padding: 6px 0
}

list[align-x=left] {
    align-items: flex-start
}

list[align-x=center] {
    align-items: center
}

list[align-x=right] {
    align-items: flex-end
}

list[align-y=top] {
    justify-content: flex-start
}

list[align-y=center] {
    justify-content: center
}

list[align-y=bottom] {
    justify-content: flex-end
}

spacer {
    flex: 1
}

divider {
    background-color: #d9ddde;
    align-self: stretch
}

vstack > divider {
    margin: 10px 0;
    height: 1px
}

vstack[spacing] > divider {
    margin-top: 0
}

hstack > divider {
    margin: 0 10px;
    width: 1px
}

hstack[spacing] > divider {
    margin-left: 0
}

divider + list {
    margin-top: calc(-1 * 10px)
}

text {
    line-height: auto
}

text[font=title] {
    font-size: 24px;
    font-weight: 600
}

text[font=caption] {
    color: #999;
    font-size: 13px
}

text[bold] {
    font-weight: 700
}

text[underline=true], text[underline] {
    text-decoration: underline
}

text[underline=false] {
    text-decoration: none
}

view {
    display: flex;
    height: 100%
}

.pylon {
    height: 100%;
    padding: 0;
    margin: 0
}

[debug] * {
    outline: 1px solid #009ddc !important
}

[stretch] {
    align-self: stretch;
    flex: 1 1 auto
}

vstack[stretch] {
    height: 100%
}