/* src/button/src/Button.css */
.o-ui {
  --o-ui-button-height-sm: 2rem;
  --o-ui-button-height-md: var(--o-ui-sz-6);
  --o-ui-button-loading-spinner-background: rgba(256, 256, 256, 0.5);
}
.o-ui-button {
  padding: 0;
  background-color: transparent;
  background-image: none;
  cursor: pointer;
  line-height: 1;
  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(--hop-shape-rounded-md);
  color: inherit;
  font-size: 100%;
}
.o-ui-button > * {
  pointer-events: none;
}
.o-ui-button .o-ui-button-counter {
  color: inherit;
}
.o-ui-button:focus-visible,
.o-ui-button-focus {
  z-index: 2;
  outline: transparent;
}
.o-ui-button:focus-visible:after,
.o-ui-button.o-ui-button-focus:not([disabled]):not(.o-ui-button-loading):after {
  opacity: 1;
}
.o-ui-button:after {
  opacity: 0;
  content: "";
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
  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);
}
.o-ui-button-text {
  line-height: 1;
  font-family: var(--hop-body-sm-medium-font-family);
  font-weight: var(--hop-body-sm-medium-font-weight);
}
a.o-ui-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  text-decoration: none;
}
.o-ui-button-sm {
  min-height: var(--o-ui-button-height-sm);
}
.o-ui-button-sm .o-ui-button-text {
  font-size: var(--hop-body-sm-medium-font-size);
}
.o-ui-button-md {
  min-height: var(--o-ui-button-height-md);
}
.o-ui-button-md .o-ui-button-text {
  font-size: var(--hop-body-md-medium-font-size);
}
.o-ui-button-primary {
  background-color: var(--hop-primary-surface-strong);
  border: 1px solid var(--hop-primary-surface-strong);
  color: var(--hop-primary-text-strong);
}
.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(--hop-primary-surface-strong-hover);
  border-color: transparent;
}
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true],
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true]:active,
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true].o-ui-button-active,
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading)[aria-checked=true],
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading)[aria-checked=true]:active,
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading)[aria-checked=true].o-ui-button-active {
  background-color: var(--hop-primary-surface-selected);
  border-color: var(--hop-primary-border-selected);
  color: var(--hop-primary-text-selected);
}
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):active,
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading).o-ui-button-active {
  background-color: var(--hop-primary-surface-strong-press);
  border-color: transparent;
  color: var(--hop-primary-text-strong);
}
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):focus-visible,
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus {
  background-color: var(--hop-primary-surface-strong-hover);
  border-color: transparent;
}
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading):hover:focus-visible,
.o-ui-button-primary:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover.o-ui-button-focus {
  background-color: var(--hop-primary-surface-strong-hover);
  border-color: transparent;
}
.o-ui-button-upsell {
  background-color: var(--hop-upsell-surface-weak);
  border: 1px solid var(--hop-upsell-surface-weak);
  color: var(--hop-upsell-text);
}
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):hover,
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover {
  background-color: var(--hop-upsell-surface-weak-hover);
  border-color: transparent;
  color: var(--hop-upsell-text-hover);
}
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):focus-visible,
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus {
  background-color: var(--hop-upsell-surface-weak-hover);
  border-color: transparent;
}
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading):active,
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading).o-ui-button-active {
  background-color: var(--hop-upsell-surface-weak-press);
  border-color: transparent;
  color: var(--hop-upsell-text-press);
}
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true],
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true]:active,
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true].o-ui-button-active,
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading)[aria-checked=true],
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading)[aria-checked=true]:active,
.o-ui-button-upsell:not([disabled]):not(.o-ui-button-loading)[aria-checked=true].o-ui-button-active {
  background-color: var(--hop-upsell-surface-selected);
  border-color: var(--hop-upsell-border-selected);
  color: var(--hop-upsell-text-selected);
}
.o-ui-button-secondary {
  background-color: var(--hop-neutral-surface);
  border: 1px solid var(--hop-neutral-border-strong);
  color: var(--hop-neutral-text);
}
.o-ui-button-secondary:after {
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
}
.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(--hop-neutral-surface-hover);
  border-color: var(--hop-neutral-border-strong-hover);
  color: var(--hop-neutral-text-hover);
}
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading):focus-visible,
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus {
  background-color: var(--hop-neutral-surface-hover);
  border-color: var(--hop-neutral-border-strong-hover);
  color: var(--hop-neutral-text-hover);
}
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading):active,
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading).o-ui-button-active {
  background-color: var(--hop-neutral-surface-press);
  border-color: var(--hop-neutral-border-strong);
  color: var(--hop-neutral-text-press);
}
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true],
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true]:active,
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true].o-ui-button-active,
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading)[aria-checked=true],
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading)[aria-checked=true]:active,
.o-ui-button-secondary:not([disabled]):not(.o-ui-button-loading)[aria-checked=true].o-ui-button-active {
  background-color: var(--hop-neutral-surface-selected);
  border-color: transparent;
  color: var(--hop-neutral-text-selected);
}
.o-ui-button-tertiary {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--hop-neutral-text-weak);
}
.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(--hop-neutral-icon-weak);
}
.o-ui-button-tertiary:focus-visible:after,
.o-ui-button-tertiary:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus:after {
  opacity: 1;
  top: -3px;
  left: -3px;
  right: -3px;
  bottom: -3px;
}
.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(--hop-neutral-surface-hover);
  color: var(--hop-neutral-text-weak-hover);
  text-decoration: underline;
}
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading):focus-visible,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading).o-ui-button-focus {
  background-color: var(--hop-neutral-surface-hover);
  color: var(--hop-neutral-text-weak-hover);
  text-decoration: underline;
}
.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).o-ui-button-active {
  background-color: var(--hop-neutral-surface-press);
  color: var(--hop-neutral-text-weak-press);
  text-decoration: underline;
}
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading)[aria-pressed=true],
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading)[aria-pressed=true].o-ui-button-active,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading)[aria-pressed=true]:active,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading)[aria-checked=true],
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading)[aria-checked=true].o-ui-button-active,
.o-ui-button-tertiary:not(.o-ui-button-inherit-style):not([disabled]):not(.o-ui-button-loading)[aria-checked=true]:active {
  background-color: var(--hop-neutral-surface-press);
  color: var(--hop-neutral-text-weak-press);
}
.o-ui-button[disabled].o-ui-button-tertiary,
.o-ui-button-disabled.o-ui-button-tertiary {
  background-color: transparent;
  color: var(--hop-neutral-text-disabled);
}
.o-ui-button-negative {
  background-color: var(--hop-danger-surface-strong);
  border: 1px solid var(--hop-danger-surface-strong);
  color: var(--hop-danger-text-strong);
}
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):hover,
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading).o-ui-button-hover {
  background-color: var(--hop-danger-surface-hover);
  border-color: transparent;
}
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading):focus-visible,
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading).o-ui-button-focus {
  background-color: var(--hop-danger-surface-hover);
  border-color: transparent;
}
.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(--hop-danger-surface-press);
  border-color: transparent;
  color: var(--hop-danger-text-strong-hover);
}
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true],
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true]:active,
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading)[aria-pressed=true].o-ui-button-active,
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading)[aria-checked=true],
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading)[aria-checked=true]:active,
.o-ui-button-negative:not([disabled]):not(.o-ui-button-loading)[aria-checked=true].o-ui-button-active {
  background-color: var(--hop-danger-surface-selected);
  border-color: var(--hop-danger-border-selected);
  color: var(--hop-danger-text-selected);
}
.o-ui-button-fluid {
  width: 100%;
}
.o-ui-button-loading {
  background-color: var(--hop-neutral-surface-disabled);
  color: var(--hop-neutral-text-disabled);
  border-color: transparent;
  cursor: not-allowed;
}
.o-ui-button-loading > * {
  visibility: hidden;
}
.o-ui-button-spinner {
  position: absolute;
  visibility: visible;
}
.o-ui-button-loading.o-ui-button-solid:before {
  border: solid 2px var(--o-ui-button-loading-spinner-background);
  border-top-color: var(--hop-samoyed);
}
.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;
}
.o-ui-button[disabled],
.o-ui-button-disabled {
  background-color: var(--hop-neutral-surface-disabled);
  color: var(--hop-neutral-text-disabled);
  border-color: transparent;
  cursor: not-allowed;
}
.o-ui-button-inherit-style.o-ui-button-counter {
  color: inherit;
}
.o-ui-button-inherit-style.o-ui-button-tertiary {
  color: inherit;
}
.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;
}
.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;
}
.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;
}
.o-ui-button-active:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary,
.o-ui-button-active:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary.o-ui-button-basic,
.o-ui-button-active:hover:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary,
.o-ui-button-active:hover:not(.o-ui-button-loading):not([disabled]).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):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-text,
.o-ui-button-active:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-end-icon,
.o-ui-button-active:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-start-icon,
.o-ui-button-active:not(.o-ui-button-loading):not([disabled]).o-ui-button-inherit-style.o-ui-button-secondary .o-ui-button-counter {
  color: inherit;
}
.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;
}
.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 {
  color: var(--hop-samoyed);
  opacity: .9;
}
.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-text {
  color: var(--hop-samoyed);
  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 {
  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(--hop-samoyed);
}
.o-ui-button-inherit-style.o-ui-button-primary .o-ui-button-counter {
  color: var(--hop-samoyed) !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;
}

/* src/button/src/IconButton.css */
.o-ui {
  --o-ui-icon-button-height-2xs: 1.25rem;
  --o-ui-icon-button-height-xs: 1.5rem;
}
.o-ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  height: max-content;
}
.o-ui-icon-button.o-ui-button-2xs {
  min-height: var(--o-ui-icon-button-height-2xs);
  min-width: 1.25rem;
}
.o-ui-icon-button.o-ui-button-xs {
  min-height: var(--o-ui-icon-button-height-xs);
  min-width: 1.5rem;
}
.o-ui-icon-button.o-ui-button-sm {
  min-width: 2rem;
}
.o-ui-icon-button.o-ui-button-md {
  min-width: 2.5rem;
}
.o-ui-icon-button.o-ui-button-loading.o-ui-button-2xs:before {
  width: 0.75rem;
  height: 0.75rem;
}
.o-ui-icon-button.o-ui-button-loading.o-ui-button-xs:before {
  width: 0.825rem;
  height: 0.825rem;
}
.o-ui-button-inherit.o-ui-button-solid .o-ui-button-icon {
  color: var(--hop-samoyed);
  opacity: .9;
}
.o-ui-icon-button .o-ui-button-icon {
  color: inherit;
}