.o-ui {
    --o-ui-button-height-sm: var(--o-ui-sz-5);
    --o-ui-button-height-md: var(--o-ui-sz-6);
    --o-ui-button-loading-spinner-background: rgba(256, 256, 256, 0.5);
}

/* SHARED */
.o-ui-button {
    padding: 0;
    background-color: transparent;
    background-image: none;
    cursor: pointer;
    line-height: var(--o-ui-lh-1);
    font-variation-settings: "wght" 500;
    transition: all var(--o-ui-easing-duration-2) var(--o-ui-easing-productive);
    border: none;
    text-align: center;
    position: relative;
    width: max-content;
    border-radius: var(--o-ui-br-2);
    color: inherit;
    font-family: inherit;
    font-size: 100%;
}

/* View https://css-tricks.com/slightly-careful-sub-elements-clickable-things */
.o-ui-button > * {
    pointer-events: none;
}

/* COUNTER */
.o-ui-button .o-ui-button-counter {
    color: inherit;
}

/* STATES | FOCUS */
.o-ui-button:focus-visible,
.o-ui-button-focus {
    z-index: 2;
    outline: transparent;
}

.o-ui-button:focus-visible:after {
    opacity: 1;
}

/* STATES | FOCUS | FOCUS RING */
.o-ui-button:after {
    opacity: 0;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    position: absolute;
    box-shadow: 0 0 0 var(--o-ui-focus-ring-thickness-md) var(--o-ui-focus-ring-color-alias-default);
    border-radius: inherit;
    transition: var(--o-ui-focus-ring-transition);
}

/* TEXT */
.o-ui-button-text {
    flex-grow: 1;
    line-height: 1;
}

/* ANCHOR */
a.o-ui-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-decoration: none;
}

/* SIZES */
.o-ui-button-sm {
    min-height: var(--o-ui-button-height-sm);
}

.o-ui-button-md {
    min-height: var(--o-ui-button-height-md);
}

/* PRIMARY */
.o-ui-button-primary {
    color: var(--o-ui-text-alias-static-white);
    background-color: var(--o-ui-bg-alias-accent);
}

/* PRIMARY | HOVER */
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):hover,
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover {
    background-color: var(--o-ui-bg-alias-accent-hover);
}

/* PRIMARY | HOVER | ACTIVE */
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):hover:active,
.o-ui-button-primary:not([disabled]).o-ui-button-hover.o-ui-button-active {
    background-color: var(--o-ui-bg-alias-accent-active);
}

/* PRIMARY | FOCUS */
.o-ui-button-primary:not([disabled]):focus-visible,
.o-ui-button-primary:not([disabled]).o-ui-button-focus {
    background-color: var(--o-ui-bg-alias-accent);
}

/* PRIMARY | HOVER | FOCUS */
.o-ui-button-primary:hover:focus-visible,
.o-ui-button-primary.o-ui-button-hover.o-ui-button-focus {
    background-color: var(--o-ui-bg-alias-accent-hover);
}

/* PRIMARY | ACTIVE | FOCUS */
.o-ui-button-primary.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):active:focus-visible,
.o-ui-button-primary:not([disabled]).o-ui-button-active.o-ui-button-focus {
    background-color: var(--o-ui-bg-alias-accent-active);
}

/* PRIMARY | ACTIVE */
.o-ui-button-primary:not(.o-ui-button-loading):not([disabled]):active,
:not([disabled]).o-ui-button-primary.o-ui-button-active {
    background-color: var(--o-ui-bg-alias-accent-active);
}

/* SECONDARY */
.o-ui-button-secondary {
    border: 1px solid var(--o-ui-b-alias-mid-break);
    color: var(--o-ui-text-alias-primary);
}

.o-ui-button-secondary:after {
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
}

/* SECONDARY | HOVER */
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading):hover,
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover {
    background-color: var(--o-ui-bg-alias-accent-transparent-hover);
    color: var(--o-ui-text-alias-accent-hover);
}

/* SECONDARY | ACTIVE */
.o-ui-button-secondary:not(.o-ui-button-loading):not([disabled]):active,
.o-ui-button-secondary:not(.o-ui-button-loading):not([disabled]):active:hover,
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading).o-ui-button-active {
    background-color: var(--o-ui-bg-alias-accent-transparent-active);
    border-color: var(--o-ui-b-alias-accent-active);
    color: var(--o-ui-text-alias-accent-active);
}

/* TERTIARY */
.o-ui-button-tertiary {
    background-color: var(--o-ui-transparent);
    border: 1px solid transparent;
    color: var(--o-ui-text-alias-primary);
}

.o-ui-button-tertiary:not(.o-ui-button-inherit-style) .o-ui-button-start-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style) .o-ui-button-end-icon {
    color: var(--o-ui-icon-alias-accent);
}

/* TERTIARY | FOCUS */
.o-ui-button-tertiary:after {
    top: calc(var(--o-ui-focus-ring-outset-inner-offset));
    left: calc(var(--o-ui-focus-ring-outset-inner-offset));
    right: calc(var(--o-ui-focus-ring-outset-inner-offset));
    bottom: calc(var(--o-ui-focus-ring-outset-inner-offset));
}

.o-ui-button-tertiary:focus-visible:after,
.o-ui-button-tertiary:not([disabled]).o-ui-button-focus:after {
    opacity: 1;
}

/* TERTIARY | HOVER */
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):hover,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-hover {
    background-color: var(--o-ui-bg-alias-accent-transparent-hover);
    color: var(--o-ui-text-alias-accent-hover);
}

.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):hover .o-ui-button-start-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-hover .o-ui-button-start-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):hover .o-ui-button-end-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-hover .o-ui-button-end-icon {
    color: var(--o-ui-icon-alias-accent-hover);
}

/* TERTIARY | ACTIVE */
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):active,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):active:hover,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active {
    background-color: var(--o-ui-bg-alias-accent-transparent-active);
    color: var(--o-ui-text-alias-accent-active);
}

.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active .o-ui-button-start-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active:hover .o-ui-button-start-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active .o-ui-button-start-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active .o-ui-button-end-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active:hover .o-ui-button-end-icon,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active .o-ui-button-end-icon {
    color: var(--o-ui-icon-alias-accent-active);
}

.o-ui-dark .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active,
.o-ui-dark .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not(.o-ui-button-loading):active:hover,
.o-ui-dark .o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-active {
    border-color: var(--o-ui-b-alias-accent-active);
}

/* NEGATIVE */
.o-ui-button-negative {
    background-color: var(--o-ui-bg-alias-alert);
    color: var(--o-ui-text-alias-static-white);
}

/* NEGATIVE | HOVER */
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):hover,
.o-ui-button-negative:not([disabled]).o-ui-button-hover {
    background-color: var(--o-ui-bg-alias-alert-hover);
}

/* NEGATIVE | ACTIVE */
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):active,
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading).o-ui-button-active {
    background-color: var(--o-ui-bg-alias-alert-active);
}

/* FLUID */
.o-ui-button-fluid {
    width: 100%;
}

/* LOADING */
.o-ui-button-loading {
    opacity: var(--o-ui-disabled-opacity);
    cursor: not-allowed;
}

.o-ui-button-loading > * {
    visibility: hidden;
}

.o-ui-button-spinner {
    position: absolute;
    visibility: visible;
}

/* LOADING | SOLID */
.o-ui-button-loading.o-ui-button-solid:before {
    border: solid 2px var(--o-ui-button-loading-spinner-background);
    border-top-color: var(--o-ui-white);
}

/* LOADING | SIZES */
.o-ui-button-loading.o-ui-button-sm:before {
    width: 1.25rem;
    height: 1.25rem;
}

.o-ui-button-loading.o-ui-button-md:before {
    width: 1.5rem;
    height: 1.5rem;
}

/* DISABLED */
.o-ui-button[disabled],
.o-ui-button-disabled {
    opacity: var(--o-ui-disabled-opacity);
    cursor: not-allowed;
}

/* INHERIT */
/* INHERIT | COUNTER */
.o-ui-button-inherit-style.o-ui-button-counter {
    color: inherit;
}

/* INHERIT | TERTIARY */
.o-ui-button-inherit-style.o-ui-button-tertiary {
    color: inherit;
}

/* INHERIT | TERTIARY | HOVER */
.o-ui-button-tertiary.o-ui-button-inherit-style:not([disabled]):not(.o-ui-button-loading):hover,
.o-ui-button-tertiary.o-ui-button-inherit-style:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.o-ui-button-inherit-style.o-ui-button-loading.o-ui-button-tertiary::before {
    border-color: hsla(0, 0%, 0%, 0.25);
    border-top-color: currentColor;
}

/* TERTIARY | INHERIT | ACTIVE */
.o-ui-button-tertiary:not(.o-ui-button-loading).o-ui-button-inherit-style:active,
.o-ui-button-tertiary:not(.o-ui-button-loading).o-ui-button-inherit-style:active:hover,
.o-ui-button-tertiary:not([disabled]):not(.o-ui-button-loading).o-ui-button-active.o-ui-button-inherit-style {
    background-color: rgba(0, 0, 0, 0.15);
    color: inherit;
}

/* INHERIT | SECONDARY */
.o-ui-button-inherit-style.o-ui-button-secondary {
    color: inherit;
    border: 1px solid currentColor;
}

.o-ui-button:hover:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary,
.o-ui-button-hover:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary {
    background-color: rgba(0, 0, 0, 0.1);
    color: inherit;
    border: 1px solid currentColor;
}

/* INHERIT | SECONDARY | ACTIVE */
.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary,
.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary,
.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic,
.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic,
.o-ui-button:active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary,
.o-ui-button-active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary,
.o-ui-button:active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic,
.o-ui-button-active:hover:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic {
    background-color: rgba(0, 0, 0, 0.15);
    color: inherit;
    border: 1px solid currentColor;
}

.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-text,
.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-text,
.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-end-icon,
.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-end-icon,
.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-start-icon,
.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-start-icon,
.o-ui-button-active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-counter,
.o-ui-button:active:not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-counter {
    color: inherit;
}

/* INHERIT | SECONDARY | LOADING */
.o-ui-button-inherit-style.o-ui-button-loading.o-ui-button-secondary::before {
    border-color: rgba(0, 0, 0, 0.25);
    border-top-color: currentColor;
}

/* INHERIT | SOLID */
.o-ui-button-inherit-style.o-ui-button-primary {
    color: inherit;
    background-color: currentColor;
}

.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-start-icon,
.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-end-icon {
    fill: var(--o-ui-white);
    color: var(--o-ui-white);
    opacity: .9;
}

.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-text {
    color: var(--o-ui-white);
    opacity: .9;
}

.o-ui-button:hover:not([disabled]):not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-primary,
.o-ui-button-hover:not([disabled]):not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-primary {
    background-color: currentColor;
}

.o-ui-button:hover.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-text,
.o-ui-button-hover.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-text,
.o-ui-button:hover.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-start-icon,
.o-ui-button-hover.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-start-icon,
.o-ui-button:hover.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-end-icon,
.o-ui-button-hover.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-end-icon {
    opacity: 1;
}

.o-ui-button:active:not([disabled]):not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-primary,
.o-ui-button-active:not([disabled]):not(.o-ui-button-loading).o-ui-button-inherit-style.o-ui-button-primary {
    background-color: currentColor;
}

.o-ui-button-inherit-style.o-ui-button-loading.o-ui-button-primary::before {
    border-color: rgba(255, 255, 255, 0.1);
    border-top-color: var(--o-ui-white);
}

/* INHERIT | PRIMARY | COUNTER */
.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-counter {
    color: var(--o-ui-white) !important;
    opacity: .9;
}

.o-ui-button:hover.o-ui-button-primary .o-ui-button-counter,
.o-ui-button-hover:not([disabled]).o-ui-button-primary .o-ui-button-counter {
    opacity: 1;
}