.ob-btn {
--color-btn: var(--ob-neutral-900);
--bg-btn-primary: var(--ob-primary-500);
--color-btn-primary: var(--ob-primary-900);
--hover-btn-primary: var(--ob-primary-600);
--focus-btn-primary: var(--ob-primary-300);
--color-outline-btn-primary: var(--ob-primary-600);
--hover-outline-btn-primary: var(--ob-primary-700);
--focus-outline-btn-primary: var(--ob-primary-300);
--color-text-btn-primary: var(--ob-primary-600);
--hover-text-btn-primary: var(--ob-primary-700);
--focus-text-btn-primary: var(--ob-primary-300);
--bg-btn-secondary: var(--ob-secondary-500);
--color-btn-secondary: var(--ob-secondary-50);
--hover-btn-secondary: var(--ob-secondary-600);
--focus-btn-secondary: var(--ob-secondary-300);
--color-outline-btn-secondary: var(--ob-secondary-500);
--hover-outline-btn-secondary: var(--ob-secondary-600);
--focus-outline-btn-secondary: var(--ob-secondary-300);
--color-text-btn-secondary: var(--ob-secondary-500);
--hover-text-btn-secondary: var(--ob-secondary-600);
--focus-text-btn-secondary: var(--ob-secondary-300);
--bg-btn-disabled: var(--ob-neutral-100);
--color-btn-disabled: var(--ob-neutral-300);
cursor: pointer;
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
background: 0 0;
color: var(--color-btn);
font-family: var(--ob-font-heading);
font-size: var(--ob-text-base);
line-height: var(--ob-line-height-base);
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
padding: var(--ob-size-2) var(--ob-size-5);
gap: var(--ob-size-2);
border: var(--ob-border-w-0);
border-radius: var(--ob-rounded-none);
height: var(--ob-size-10);
user-select: none;
box-sizing: border-box;
white-space: nowrap
}
.ob-btn :is(.ct-fancy-icon) {
display: inline-flex;
color: inherit!important
}
.ob-btn :is(.ct-fancy-icon) > svg {
width: var(--ob-text-xl);
height: var(--ob-text-xl)
}
.ob-btn.is-primary {
background: var(--bg-btn-primary);
color: var(--color-btn-primary)
}
.ob-btn.is-primary:hover {
background: var(--hover-btn-primary)
}
.ob-btn.is-primary:focus {
background: var(--focus-btn-primary)
}
.ob-btn.is-secondary {
background: var(--bg-btn-secondary);
color: var(--color-btn-secondary)
}
.ob-btn.is-secondary:hover {
background: var(--hover-btn-secondary)
}
.ob-btn.is-secondary:focus {
background: var(--focus-btn-secondary)
}
.ob-btn.is-outline-primary {
border: var(--ob-border-w-2) solid var(--color-outline-btn-primary);
color: var(--color-outline-btn-primary)
}
.ob-btn.is-outline-primary:hover {
color: var(--hover-outline-btn-primary);
border-color: var(--hover-outline-btn-primary)
}
.ob-btn.is-outline-primary:focus {
color: var(--focus-outline-btn-primary);
border-color: var(--focus-outline-btn-primary)
}
.ob-btn.is-outline-secondary {
border: var(--ob-border-w-2) solid var(--color-outline-btn-secondary);
color: var(--color-outline-btn-secondary)
}
.ob-btn.is-outline-secondary:hover {
color: var(--hover-outline-btn-secondary);
border-color: var(--hover-outline-btn-secondary)
}
.ob-btn.is-outline-secondary:focus {
color: var(--focus-outline-btn-secondary);
border-color: var(--focus-outline-btn-secondary)
}
.ob-btn.is-text-primary {
color: var(--color-text-btn-primary)
}
.ob-btn.is-text-primary:hover {
color: var(--hover-text-btn-primary)
}
.ob-btn.is-text-primary:focus {
color: var(--focus-text-btn-primary)
}
.ob-btn.is-text-secondary {
color: var(--color-text-btn-secondary)
}
.ob-btn.is-text-secondary:hover {
color: var(--hover-text-btn-secondary)
}
.ob-btn.is-text-secondary:focus {
color: var(--focus-text-btn-secondary)
}
.ob-btn.is-xl {
padding: var(--ob-size-4) var(--ob-size-10);
font-size: var(--ob-text-2xl);
line-height: var(--ob-line-height-2xl);
height: var(--ob-size-16)
}
.ob-btn.is-xl :is(.ct-fancy-icon) > svg {
width: var(--ob-line-height-2xl);
height: var(--ob-line-height-2xl)
}
.ob-btn.is-lg {
padding: var(--ob-size-2-5) var(--ob-size-6);
font-size: var(--ob-text-lg);
line-height: var(--ob-line-height-lg);
height: var(--ob-size-12)
}
.ob-btn.is-lg :is(.ct-fancy-icon) > svg {
width: var(--ob-text-2xl);
height: var(--ob-text-2xl)
}
.ob-btn.is-sm {
padding: var(--ob-size-1-5) var(--ob-size-4);
font-size: var(--ob-text-sm);
line-height: var(--ob-line-height-sm);
height: var(--ob-size-8)
}
.ob-btn.is-sm :is(.ct-fancy-icon) > svg {
width: var(--ob-text-base);
height: var(--ob-text-base)
}
.ob-btn.with-icon {
padding: var(--ob-size-2-5)
}
.ob-btn.with-icon:is(.is-xl) {
padding: var(--ob-size-4)
}
.ob-btn.with-icon:is(.is-lg) {
padding: var(--ob-size-3)
}
.ob-btn.with-icon:is(.is-sm) {
padding: var(--ob-size-2)
}
.ob-btn.is-disabled,
.ob-btn:disabled,
.ob-btn[disabled] {
pointer-events: none;
background: var(--bg-btn-disabled);
color: var(--color-btn-disabled)
}
.ob-btn.is-outline-primary.is-disabled,
.ob-btn.is-outline-primary:disabled,
.ob-btn.is-outline-primary[disabled],
.ob-btn.is-outline-secondary.is-disabled,
.ob-btn.is-outline-secondary:disabled,
.ob-btn.is-outline-secondary[disabled] {
pointer-events: none;
background: 0 0;
border-color: var(--bg-btn-disabled);
color: var(--color-btn-disabled)
}
.ob-btn.is-text-primary.is-disabled,
.ob-btn.is-text-primary:disabled,
.ob-btn.is-text-primary[disabled],
.ob-btn.is-text-secondary.is-disabled,
.ob-btn.is-text-secondary:disabled,
.ob-btn.is-text-secondary[disabled] {
pointer-events: none;
background: 0 0;
color: var(--color-btn-disabled)
}
[data-theme=dark] .ob-btn {
--color-btn: var(--ob-neutral-50);
--bg-btn-primary: var(--ob-primary-400);
--color-btn-primary: var(--ob-primary-900);
--hover-btn-primary: var(--ob-primary-600);
--focus-btn-primary: var(--ob-primary-200);
--color-outline-btn-primary: var(--ob-primary-400);
--hover-outline-btn-primary: var(--ob-primary-600);
--focus-outline-btn-primary: var(--ob-primary-200);
--color-text-btn-primary: var(--ob-primary-400);
--hover-text-btn-primary: var(--ob-primary-600);
--focus-text-btn-primary: var(--ob-primary-200);
--bg-btn-secondary: var(--ob-secondary-200);
--color-btn-secondary: var(--ob-secondary-500);
--hover-btn-secondary: var(--ob-secondary-300);
--focus-btn-secondary: var(--ob-secondary-50);
--color-outline-btn-secondary: var(--ob-secondary-200);
--hover-outline-btn-secondary: var(--ob-secondary-300);
--focus-outline-btn-secondary: var(--ob-secondary-50);
--color-text-btn-secondary: var(--ob-secondary-200);
--hover-text-btn-secondary: var(--ob-secondary-300);
--focus-text-btn-secondary: var(--ob-secondary-50);
--bg-btn-disabled: var(--ob-neutral-700);
--color-btn-disabled: var(--ob-neutral-500)
}
.ob-link {
--color-link-primary: var(--ob-primary-600);
--hover-link-primary: var(--ob-primary-700);
--color-link-secondary: var(--ob-secondary-500);
--hover-link-secondary: var(--ob-secondary-700);
cursor: pointer;
text-decoration: underline
}
.ob-link.is-primary {
color: var(--color-link-primary)
}
.ob-link.is-primary:hover {
color: var(--hover-link-primary)
}
.ob-link.is-secondary {
color: var(--color-link-secondary)
}
.ob-link.is-secondary:hover {
color: var(--hover-link-secondary)
}
.ob-link.is-hover {
text-decoration: none
}
.ob-link.is-hover:hover {
text-decoration: underline
}
[data-theme=dark] .ob-link {
--color-link-primary: var(--ob-primary-400);
--hover-link-primary: var(--ob-primary-600);
--color-link-secondary: var(--ob-secondary-200);
--hover-link-secondary: var(--ob-secondary-300)
}
.ob-list {
display: flex;
flex-direction: column;
gap: var(--ob-size-2)
}
.ob-list > div {
flex-direction: row;
align-items: center;
gap: var(--ob-size-2)
}
.ob-list > div > .ct-fancy-icon > svg {
width: var(--ob-size-5);
height: var(--ob-size-5)
}
.ob-avatar {
--size-border: var(--ob-border-w-2);
--type-border: solid;
--color-border: var(--ob-white);
--shadow-border: var(--ob-shadow-light-base);
position: relative;
display: inline-flex
}
.ob-avatar > div {
display: block;
aspect-ratio: 1/1;
overflow: hidden;
border-radius: var(--ob-rounded-full);
border: var(--size-border) solid var(--color-border);
box-shadow: var(--shadow-border)
}
.ob-avatar.is-square > div {
border-radius: var(--ob-rounded-none)
}
.ob-avatar.is-placeholder > div {
display: flex;
align-items: center;
justify-content: center
}
[data-theme=dark] .ob-avatar {
--color-border: var(--ob-neutral-600);
--shadow-border: var(--ob-shadow-dark-base)
}
.ob-chip {
--bg-chip: var(--ob-neutral-300);
--color-chip: var(--ob-neutral-900);
--bg-chip-primary: var(--ob-primary-500);
--color-chip-primary: var(--ob-primary-900);
--bg-chip-secondary: var(--ob-secondary-500);
--color-chip-secondary: var(--ob-secondary-50);
display: inline-flex;
font-family: var(--ob-font-heading);
font-size: var(--ob-text-sm);
line-height: var(--ob-line-height-sm);
font-weight: 400;
background: var(--bg-chip);
color: var(--color-chip);
padding: var(--ob-size-1-5) var(--ob-size-5);
gap: var(--ob-size-2);
height: var(--ob-size-8);
border-radius: var(--ob-rounded-full)
}
.ob-chip.is-primary {
background: var(--bg-chip-primary);
color: var(--color-chip-primary)
}
.ob-chip.is-secondary {
background: var(--bg-chip-secondary);
color: var(--color-chip-secondary)
}
[data-theme=dark] .ob-chip {
--bg-chip: var(--ob-neutral-600);
--color-chip: var(--ob-neutral-50);
--bg-chip-primary: var(--ob-primary-400);
--color-chip-primary: var(--ob-primary-900);
--bg-chip-secondary: var(--ob-secondary-200);
--color-chip-secondary: var(--ob-secondary-500)
}
.ob-icon-block {
--color-icon: var(--ob-neutral-900);
--color-icon-primary: var(--ob-primary-500);
--color-icon-secondary: var(--ob-secondary-500);
--color-icon-alt: var(--ob-neutral-50);
--color-icon-primary-alt: var(--ob-primary-900);
--color-icon-secondary-alt: var(--ob-secondary-50);
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
color: var(--color-icon);
width: var(--ob-size-10);
height: var(--ob-size-10)
}
.ob-icon-block > .ct-fancy-icon > svg {
width: var(--ob-size-5);
height: var(--ob-size-5)
}
.ob-icon-block.is-circle {
border-radius: var(--ob-rounded-full)
}
.ob-icon-block.is-lg {
width: var(--ob-size-12);
height: var(--ob-size-12)
}
.ob-icon-block.is-lg > .ct-fancy-icon > svg {
width: var(--ob-size-6);
height: var(--ob-size-6)
}
.ob-icon-block.is-sm {
width: var(--ob-size-8);
height: var(--ob-size-8)
}
.ob-icon-block.is-sm > .ct-fancy-icon > svg {
width: var(--ob-size-4);
height: var(--ob-size-4)
}
.ob-icon-block.is-primary {
color: var(--color-icon-primary)
}
.ob-icon-block.is-secondary {
color: var(--color-icon-secondary)
}
.ob-icon-block.with-bg {
background-color: var(--color-icon);
color: var(--color-icon-alt)
}
.ob-icon-block.with-bg.is-primary {
background-color: var(--color-icon-primary);
color: var(--color-icon-primary-alt)
}
.ob-icon-block.with-bg.is-secondary {
background-color: var(--color-icon-secondary);
color: var(--color-icon-secondary-alt)
}
.ob-icon-block.with-outline {
border: var(--ob-border-w-2) solid var(--color-icon)
}
.ob-icon-block.with-outline.is-primary {
border: var(--ob-border-w-2) solid var(--color-icon-primary);
color: var(--color-icon-primary)
}
.ob-icon-block.with-outline.is-secondary {
border: var(--ob-border-w-2) solid var(--color-icon-secondary);
color: var(--color-icon-secondary)
}
[data-theme=dark] .ob-icon-block {
--color-icon: var(--ob-neutral-50);
--color-icon-primary: var(--ob-primary-400);
--color-icon-secondary: var(--ob-secondary-200);
--color-icon-alt: var(--ob-neutral-900);
--color-icon-primary-alt: var(--ob-primary-900);
--color-icon-secondary-alt: var(--ob-secondary-500)
}
.ob-icon-bar {
--color-icon: var(--ob-primary-500);
--hover-icon: var(--ob-primary-600);
--size-icon: var(--ob-size-6);
--spacing-icon: var(--ob-size-6);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--spacing-icon)
}
.ob-icon-bar > a,
.ob-icon-bar > div {
display: flex;
align-items: center;
justify-content: center;
color: var(--color-icon)
}
.ob-icon-bar > a {
color: var(--color-icon)
}
.ob-icon-bar > a:hover {
color: var(--hover-icon)
}
.ob-icon-bar .ct-fancy-icon > svg {
width: var(--size-icon);
height: var(--size-icon)
}
[data-theme=dark] .ob-icon-bar {
--color-icon: var(--ob-primary-400);
--hover-icon: var(--ob-primary-600)
}
.ob-menu-bar {
--color-link: var(--ob-neutral-500);
--hover-link: var(--ob-neutral-900);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: var(--ob-size-8)
}
.ob-menu-bar.is-vertical {
flex-direction: column;
gap: var(--ob-size-2)
}
.ob-menu-bar-link {
color: var(--color-link);
font-family: var(--ob-font-heading);
font-size: var(--ob-text-base);
line-height: var(--ob-line-height-base);
font-weight: 400;
text-align: center;
text-decoration: none
}
.ob-menu-bar-link:hover {
color: var(--hover-link)
}
[data-theme=dark] .ob-menu-bar {
--color-link: var(--ob-neutral-300);
--hover-link: var(--ob-neutral-50)
}
.ob-divider {
--color-divider: var(--ob-neutral-300);
--size-divider: var(--ob-size-px);
--margin-divider: var(--ob-size-4);
--height-divider: var(--ob-size-4);
display: flex;
flex-direction: row;
align-items: center;
align-self: stretch;
margin-top: var(--margin-divider);
margin-bottom: var(--margin-divider);
height: var(--height-divider);
white-space: nowrap
}
.ob-divider:not(:empty) {
gap: var(--margin-divider)
}
.ob-divider::after,
.ob-divider::before {
content: "";
flex-grow: 1;
height: var(--size-divider);
width: 100%
}
.ob-divider::before {
background-color: var(--color-divider)
}
.ob-divider::after {
background-color: var(--color-divider)
}
.ob-divider.is-horizontal {
flex-direction: column
}
.ob-divider.is-horizontal::before {
height: 100%;
width: var(--size-divider)
}
.ob-divider.is-horizontal::after {
height: 100%;
width: var(--size-divider)
}
flex-direction:row .ob-divider.is-vertical::before {
height: var(--size-divider);
width: 100%
}
.ob-divider.is-vertical::after {
height: var(--size-divider);
width: 100%
}
.ob-divider.is-horizontal {
margin-top: var(--ob-size-0);
margin-bottom: var(--ob-size-0);
margin-left: var(--margin-divider);
margin-right: var(--margin-divider);
height: auto;
width: var(--height-divider)
}
.ob-divider.is-vertical {
margin-left: var(--ob-size-0);
margin-right: var(--ob-size-0);
margin-top: var(--margin-divider);
margin-bottom: var(--margin-divider);
height: var(--height-divider);
width: auto
}
[data-theme=dark] .ob-divider {
--color-divider: var(--ob-neutral-500)
}