@keyframes scale-bounce {
  0% {
    transform: scale(0);
    animation-timing-function: ease-out;
  }
  80% {
    transform: scale(1.07);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: scale(1);
  }
}
.button:global(.carbon) {
  height: 3.5rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: inherit;
  text-indent: inherit;
  font-variant-ligatures: normal;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  vertical-align: middle;
}
.button:global(.carbon) .bg {
  background-color: transparent;
  background-origin: inherit;
  border: 1px solid var(--agate-accent-color, #8fd43a);
  border-radius: 416.625rem;
  color: rgba(255, 255, 255, 0.75);
  background-image: linear-gradient(to bottom left, transparent, #333);
  box-shadow: none;
  transform: none;
}
.button:global(.carbon) .client {
  padding: 1px;
  color: rgba(255, 255, 255, 0.75);
}
.button:global(.carbon) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.carbon) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.carbon) .badge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
  color: #262626;
  background-color: var(--agate-button-badge-bg-color, var(--agate-highlight-color, #6abe0b));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.carbon) .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.carbon).grid .bg {
  border-radius: 0;
}
.button:global(.carbon).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.carbon).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.carbon).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.carbon).minWidth {
  min-width: 10rem;
}
.button:global(.carbon).opaque {
  /* Available for export */
}
.button:global(.carbon).lightOpaque .bg {
  background-color: transparent;
}
.button:global(.carbon).lightOpaque .client {
  color: rgba(255, 255, 255, 0.75);
}
.button:global(.carbon).transparent .bg {
  background-color: transparent;
}
.button:global(.carbon).transparent .client {
  color: rgba(255, 255, 255, 0.75);
}
.button:global(.carbon).iconOnly,
.button:global(.carbon).iconOnly.huge,
.button:global(.carbon).iconOnly.small,
.button:global(.carbon).iconOnly.smallest {
  padding: 0;
}
.button:global(.carbon).iconOnly .client .icon,
.button:global(.carbon).iconOnly.huge .client .icon,
.button:global(.carbon).iconOnly.small .client .icon,
.button:global(.carbon).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.carbon).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.carbon).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.carbon).iconOnly.hasIcon.minWidth .bg {
  border-radius: 416.625rem;
}
.button:global(.carbon).animateOnRender .bg,
.button:global(.carbon).animateOnRender .client,
.button:global(.carbon).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.carbon).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.carbon).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.carbon).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.carbon).joinedLeft,
.button:global(.carbon).joinedCenter {
  margin-right: 0;
}
.button:global(.carbon).joinedLeft .bg,
.button:global(.carbon).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.carbon).joinedRight,
.button:global(.carbon).joinedCenter {
  margin-left: 0;
}
.button:global(.carbon).joinedRight .bg,
.button:global(.carbon).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.carbon).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.33333rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.carbon).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.carbon).small {
  border-radius: inherit;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 1.25rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.carbon).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.carbon).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.carbon).small .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.carbon).small .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.carbon).smallest {
  height: 2rem;
  min-width: 2rem;
  line-height: 1.91667rem;
  font-size: 0.625rem;
  padding: 0 0.625rem;
}
.button:global(.carbon).smallest .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.carbon).smallest .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.carbon).highlighted .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  background-image: linear-gradient(to bottom, hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.5), var(--agate-accent-color, #8fd43a));
  opacity: 1;
}
.button:global(.carbon).highlighted,
.button:global(.carbon).highlighted .client {
  color: #262626;
}
.button:global(.carbon).highlighted.lightOpaque .bg {
  background-color: transparent;
}
.button:global(.carbon).highlighted.lightOpaque .client {
  color: rgba(255, 255, 255, 0.75);
}
.button:global(.carbon).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.carbon).highlighted.transparent .client {
  color: rgba(255, 255, 255, 0.75);
}
.button:global(.carbon).selected .bg {
  background-color: var(--agate-accent-color, #8fd43a);
  border-color: transparent;
}
.button:global(.carbon).selected,
.button:global(.carbon).selected .client {
  color: #262626;
}
.button:global(.carbon).selected.lightOpaque .bg {
  background-color: transparent;
}
.button:global(.carbon).selected.lightOpaque .client {
  color: rgba(255, 255, 255, 0.75);
}
.button:global(.carbon).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.carbon).selected.transparent .client {
  color: rgba(255, 255, 255, 0.75);
}
.button:global(.carbon) .marquee {
  text-align: center;
}
.button:global(.carbon):not(.iconOnly) .marquee,
.button:global(.carbon).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.carbon):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.carbon):global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #6abe0b);
  background-image: linear-gradient(to bottom, hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.5), var(--agate-accent-color, #8fd43a));
  border-color: var(--agate-accent-color, #8fd43a);
}
.button:global(.carbon):global(.spottable):focus,
.button:global(.carbon):global(.spottable):focus .client {
  color: black;
}
.button:global(.carbon):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.carbon):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 1px solid var(--agate-accent-color, #8fd43a);
  opacity: inherit;
}
.button:global(.carbon):global(.spottable):active,
.button:global(.carbon):global(.spottable):active .client {
  color: inherit;
}
.button:global(.carbon):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.cobalt) {
  height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.375rem;
  line-height: inherit;
  text-indent: 0.375rem;
  font-variant-ligatures: none;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  vertical-align: middle;
}
.button:global(.cobalt) .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-origin: inherit;
  border: 0.125rem solid transparent;
  border-radius: 416.625rem;
  color: var(--agate-accent-color, #8c81ff);
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.cobalt) .client {
  padding: 0.125rem;
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.cobalt) .badge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
  color: white;
  background-color: var(--agate-button-badge-bg-color, var(--agate-highlight-color, #fff));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt) .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.cobalt).grid .bg {
  border-radius: 0;
}
.button:global(.cobalt).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.cobalt).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.cobalt).minWidth {
  min-width: 10rem;
}
.button:global(.cobalt).opaque {
  /* Available for export */
}
.button:global(.cobalt).lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.cobalt).lightOpaque .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt).transparent .bg {
  background-color: transparent;
}
.button:global(.cobalt).transparent .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt).iconOnly,
.button:global(.cobalt).iconOnly.huge,
.button:global(.cobalt).iconOnly.small,
.button:global(.cobalt).iconOnly.smallest {
  padding: 0;
}
.button:global(.cobalt).iconOnly .client .icon,
.button:global(.cobalt).iconOnly.huge .client .icon,
.button:global(.cobalt).iconOnly.small .client .icon,
.button:global(.cobalt).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.cobalt).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.cobalt).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.cobalt).iconOnly.hasIcon.minWidth .bg {
  border-radius: 416.625rem;
}
.button:global(.cobalt).animateOnRender .bg,
.button:global(.cobalt).animateOnRender .client,
.button:global(.cobalt).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.cobalt).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.cobalt).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.cobalt).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.cobalt).joinedLeft,
.button:global(.cobalt).joinedCenter {
  margin-right: 0;
}
.button:global(.cobalt).joinedLeft .bg,
.button:global(.cobalt).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.cobalt).joinedRight,
.button:global(.cobalt).joinedCenter {
  margin-left: 0;
}
.button:global(.cobalt).joinedRight .bg,
.button:global(.cobalt).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.cobalt).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.cobalt).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.cobalt).small {
  border-radius: inherit;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 0.875rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.cobalt).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.cobalt).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.cobalt).small .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt).small .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.cobalt).smallest {
  height: 2rem;
  min-width: 2rem;
  line-height: 1.75rem;
  font-size: 0.625rem;
  padding: 0 0.625rem;
}
.button:global(.cobalt).smallest .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt).smallest .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.cobalt).highlighted .bg {
  background-color: var(--agate-accent-color, #8c81ff);
  background-image: none;
  opacity: 1;
}
.button:global(.cobalt).highlighted,
.button:global(.cobalt).highlighted .client {
  color: #fff;
}
.button:global(.cobalt).highlighted.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.cobalt).highlighted.lightOpaque .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.cobalt).highlighted.transparent .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt).selected .bg {
  background-color: var(--agate-accent-color, #8c81ff);
  border-color: transparent;
}
.button:global(.cobalt).selected,
.button:global(.cobalt).selected .client {
  color: white;
}
.button:global(.cobalt).selected.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.cobalt).selected.lightOpaque .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.cobalt).selected.transparent .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt) .marquee {
  text-align: center;
}
.button:global(.cobalt):not(.iconOnly) .marquee,
.button:global(.cobalt).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.cobalt):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.cobalt):global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
  border-color: transparent;
}
.button:global(.cobalt):global(.spottable):focus,
.button:global(.cobalt):global(.spottable):focus .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.cobalt):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0.125rem solid transparent;
  opacity: inherit;
}
.button:global(.cobalt):global(.spottable):active,
.button:global(.cobalt):global(.spottable):active .client {
  color: inherit;
}
.button:global(.cobalt):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.cobalt):global(.night) {
  height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.375rem;
  line-height: inherit;
  text-indent: 0.375rem;
  font-variant-ligatures: none;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  vertical-align: middle;
}
.button:global(.cobalt):global(.night) .bg {
  background-color: #7482bf;
  background-origin: inherit;
  border: 0.125rem solid transparent;
  border-radius: 416.625rem;
  color: var(--agate-highlight-color, #fff);
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.cobalt):global(.night) .client {
  padding: 0.125rem;
  color: var(--agate-highlight-color, #fff);
}
.button:global(.cobalt):global(.night) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt):global(.night) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.cobalt):global(.night) .badge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
  color: white;
  background-color: var(--agate-button-badge-bg-color, var(--agate-highlight-color, #fff));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt):global(.night) .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.cobalt):global(.night).grid .bg {
  border-radius: 0;
}
.button:global(.cobalt):global(.night).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.cobalt):global(.night).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt):global(.night).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.cobalt):global(.night).minWidth {
  min-width: 10rem;
}
.button:global(.cobalt):global(.night).opaque {
  /* Available for export */
}
.button:global(.cobalt):global(.night).lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.cobalt):global(.night).lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.cobalt):global(.night).transparent .bg {
  background-color: transparent;
}
.button:global(.cobalt):global(.night).transparent .client {
  color: #7482bf;
}
.button:global(.cobalt):global(.night).iconOnly,
.button:global(.cobalt):global(.night).iconOnly.huge,
.button:global(.cobalt):global(.night).iconOnly.small,
.button:global(.cobalt):global(.night).iconOnly.smallest {
  padding: 0;
}
.button:global(.cobalt):global(.night).iconOnly .client .icon,
.button:global(.cobalt):global(.night).iconOnly.huge .client .icon,
.button:global(.cobalt):global(.night).iconOnly.small .client .icon,
.button:global(.cobalt):global(.night).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.cobalt):global(.night).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.cobalt):global(.night).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.cobalt):global(.night).iconOnly.hasIcon.minWidth .bg {
  border-radius: 416.625rem;
}
.button:global(.cobalt):global(.night).animateOnRender .bg,
.button:global(.cobalt):global(.night).animateOnRender .client,
.button:global(.cobalt):global(.night).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.cobalt):global(.night).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.cobalt):global(.night).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.cobalt):global(.night).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.cobalt):global(.night).joinedLeft,
.button:global(.cobalt):global(.night).joinedCenter {
  margin-right: 0;
}
.button:global(.cobalt):global(.night).joinedLeft .bg,
.button:global(.cobalt):global(.night).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.cobalt):global(.night).joinedRight,
.button:global(.cobalt):global(.night).joinedCenter {
  margin-left: 0;
}
.button:global(.cobalt):global(.night).joinedRight .bg,
.button:global(.cobalt):global(.night).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.cobalt):global(.night).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.cobalt):global(.night).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.cobalt):global(.night).small {
  border-radius: inherit;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 0.875rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.cobalt):global(.night).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.cobalt):global(.night).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.cobalt):global(.night).small .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt):global(.night).small .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.cobalt):global(.night).smallest {
  height: 2rem;
  min-width: 2rem;
  line-height: 1.75rem;
  font-size: 0.625rem;
  padding: 0 0.625rem;
}
.button:global(.cobalt):global(.night).smallest .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.cobalt):global(.night).smallest .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.cobalt):global(.night).highlighted .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
  opacity: 1;
}
.button:global(.cobalt):global(.night).highlighted,
.button:global(.cobalt):global(.night).highlighted .client {
  color: var(--agate-accent-color, #fc7982);
}
.button:global(.cobalt):global(.night).highlighted.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.cobalt):global(.night).highlighted.lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.cobalt):global(.night).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.cobalt):global(.night).highlighted.transparent .client {
  color: #7482bf;
}
.button:global(.cobalt):global(.night).selected .bg {
  background-color: var(--agate-accent-color, #fc7982);
  border-color: transparent;
}
.button:global(.cobalt):global(.night).selected,
.button:global(.cobalt):global(.night).selected .client {
  color: var(--agate-highlight-color, #fff);
}
.button:global(.cobalt):global(.night).selected.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.cobalt):global(.night).selected.lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.cobalt):global(.night).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.cobalt):global(.night).selected.transparent .client {
  color: #7482bf;
}
.button:global(.cobalt):global(.night) .marquee {
  text-align: center;
}
.button:global(.cobalt):global(.night):not(.iconOnly) .marquee,
.button:global(.cobalt):global(.night).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.cobalt):global(.night):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.cobalt):global(.night):global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
  border-color: transparent;
}
.button:global(.cobalt):global(.night):global(.spottable):focus,
.button:global(.cobalt):global(.night):global(.spottable):focus .client {
  color: var(--agate-accent-color, #fc7982);
}
.button:global(.cobalt):global(.night):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.cobalt):global(.night):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0.125rem solid transparent;
  opacity: inherit;
}
.button:global(.cobalt):global(.night):global(.spottable):active,
.button:global(.cobalt):global(.night):global(.spottable):active .client {
  color: inherit;
}
.button:global(.cobalt):global(.night):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.copper) {
  height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.375rem;
  line-height: inherit;
  text-indent: 0.375rem;
  font-variant-ligatures: none;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  vertical-align: middle;
}
.button:global(.copper) .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-origin: inherit;
  border: 0.125rem solid transparent;
  border-radius: inherit;
  color: #373739;
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.copper) .client {
  padding: 0.125rem;
  color: #373739;
}
.button:global(.copper) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.copper) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.copper) .badge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 0;
  padding: 0 0.25rem;
  font-size: 0.83333rem;
  line-height: 1rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
  color: white;
  background-color: var(--agate-button-badge-bg-color, var(--agate-highlight-color, #fff));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.copper) .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.copper).grid .bg {
  border-radius: 0;
}
.button:global(.copper).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.copper).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.copper).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.copper).minWidth {
  min-width: 10rem;
}
.button:global(.copper).opaque {
  /* Available for export */
}
.button:global(.copper).lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.copper).lightOpaque .client {
  color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper).transparent .bg {
  background-color: transparent;
}
.button:global(.copper).transparent .client {
  color: #373739;
}
.button:global(.copper).iconOnly,
.button:global(.copper).iconOnly.huge,
.button:global(.copper).iconOnly.small,
.button:global(.copper).iconOnly.smallest {
  padding: 0;
}
.button:global(.copper).iconOnly .client .icon,
.button:global(.copper).iconOnly.huge .client .icon,
.button:global(.copper).iconOnly.small .client .icon,
.button:global(.copper).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.copper).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.copper).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.copper).iconOnly.hasIcon.minWidth .bg {
  border-radius: inherit;
}
.button:global(.copper).animateOnRender .bg,
.button:global(.copper).animateOnRender .client,
.button:global(.copper).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.copper).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.copper).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.copper).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.copper).joinedLeft,
.button:global(.copper).joinedCenter {
  margin-right: 0;
}
.button:global(.copper).joinedLeft .bg,
.button:global(.copper).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.copper).joinedRight,
.button:global(.copper).joinedCenter {
  margin-left: 0;
}
.button:global(.copper).joinedRight .bg,
.button:global(.copper).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.copper).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.copper).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.copper).small {
  border-radius: inherit;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 0.875rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.copper).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.copper).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.copper).small .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 0;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.copper).small .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.copper).smallest {
  height: 2rem;
  min-width: 2rem;
  line-height: 1.75rem;
  font-size: 0.625rem;
  padding: 0 0.625rem;
}
.button:global(.copper).smallest .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 0;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.copper).smallest .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.copper).highlighted .bg {
  background-color: var(--agate-accent-color, #a47d66);
  background-image: none;
  opacity: 1;
}
.button:global(.copper).highlighted,
.button:global(.copper).highlighted .client {
  color: #fff;
}
.button:global(.copper).highlighted.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.copper).highlighted.lightOpaque .client {
  color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.copper).highlighted.transparent .client {
  color: #373739;
}
.button:global(.copper).selected .bg {
  background-color: var(--agate-accent-color, #a47d66);
  border-color: transparent;
}
.button:global(.copper).selected,
.button:global(.copper).selected .client {
  color: white;
}
.button:global(.copper).selected.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.copper).selected.lightOpaque .client {
  color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.copper).selected.transparent .client {
  color: #373739;
}
.button:global(.copper) .marquee {
  text-align: center;
}
.button:global(.copper):not(.iconOnly) .marquee,
.button:global(.copper).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.copper):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.copper):global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
  border-color: transparent;
}
.button:global(.copper):global(.spottable):focus,
.button:global(.copper):global(.spottable):focus .client {
  color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.copper):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0.125rem solid transparent;
  opacity: inherit;
}
.button:global(.copper):global(.spottable):active,
.button:global(.copper):global(.spottable):active .client {
  color: inherit;
}
.button:global(.copper):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.copper):global(.night) {
  height: 3.5rem;
  font-weight: 700;
  letter-spacing: 0.375rem;
  line-height: inherit;
  text-indent: 0.375rem;
  font-variant-ligatures: none;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.125rem;
  vertical-align: middle;
}
.button:global(.copper):global(.night) .bg {
  background-color: #424242;
  background-origin: inherit;
  border: 0.125rem solid transparent;
  border-radius: inherit;
  color: var(--agate-accent-color, #e0b094);
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.copper):global(.night) .client {
  padding: 0.125rem;
  color: var(--agate-accent-color, #e0b094);
}
.button:global(.copper):global(.night) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.copper):global(.night) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.copper):global(.night) .badge {
  position: absolute;
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 0;
  padding: 0 0.25rem;
  font-size: 0.83333rem;
  line-height: 1rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
  color: white;
  background-color: var(--agate-button-badge-bg-color, var(--agate-highlight-color, #fff));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.copper):global(.night) .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.copper):global(.night).grid .bg {
  border-radius: 0;
}
.button:global(.copper):global(.night).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.copper):global(.night).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.copper):global(.night).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.copper):global(.night).minWidth {
  min-width: 10rem;
}
.button:global(.copper):global(.night).opaque {
  /* Available for export */
}
.button:global(.copper):global(.night).lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.copper):global(.night).lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.copper):global(.night).transparent .bg {
  background-color: transparent;
}
.button:global(.copper):global(.night).transparent .client {
  color: var(--agate-accent-color, #e0b094);
}
.button:global(.copper):global(.night).iconOnly,
.button:global(.copper):global(.night).iconOnly.huge,
.button:global(.copper):global(.night).iconOnly.small,
.button:global(.copper):global(.night).iconOnly.smallest {
  padding: 0;
}
.button:global(.copper):global(.night).iconOnly .client .icon,
.button:global(.copper):global(.night).iconOnly.huge .client .icon,
.button:global(.copper):global(.night).iconOnly.small .client .icon,
.button:global(.copper):global(.night).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.copper):global(.night).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.copper):global(.night).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.copper):global(.night).iconOnly.hasIcon.minWidth .bg {
  border-radius: inherit;
}
.button:global(.copper):global(.night).animateOnRender .bg,
.button:global(.copper):global(.night).animateOnRender .client,
.button:global(.copper):global(.night).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.copper):global(.night).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.copper):global(.night).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.copper):global(.night).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.copper):global(.night).joinedLeft,
.button:global(.copper):global(.night).joinedCenter {
  margin-right: 0;
}
.button:global(.copper):global(.night).joinedLeft .bg,
.button:global(.copper):global(.night).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.copper):global(.night).joinedRight,
.button:global(.copper):global(.night).joinedCenter {
  margin-left: 0;
}
.button:global(.copper):global(.night).joinedRight .bg,
.button:global(.copper):global(.night).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.copper):global(.night).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.copper):global(.night).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.copper):global(.night).small {
  border-radius: inherit;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 0.875rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.copper):global(.night).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.copper):global(.night).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.copper):global(.night).small .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 0;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.copper):global(.night).small .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.copper):global(.night).smallest {
  height: 2rem;
  min-width: 2rem;
  line-height: 1.75rem;
  font-size: 0.625rem;
  padding: 0 0.625rem;
}
.button:global(.copper):global(.night).smallest .badge {
  top: 0;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 0;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: 0;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.copper):global(.night).smallest .badge {
  top: 0;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.copper):global(.night).highlighted .bg {
  background-color: var(--agate-accent-color, #e0b094);
  background-image: none;
  opacity: 1;
}
.button:global(.copper):global(.night).highlighted,
.button:global(.copper):global(.night).highlighted .client {
  color: white;
}
.button:global(.copper):global(.night).highlighted.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.copper):global(.night).highlighted.lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.copper):global(.night).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.copper):global(.night).highlighted.transparent .client {
  color: var(--agate-accent-color, #e0b094);
}
.button:global(.copper):global(.night).selected .bg {
  background-color: var(--agate-accent-color, #e0b094);
  border-color: transparent;
}
.button:global(.copper):global(.night).selected,
.button:global(.copper):global(.night).selected .client {
  color: white;
}
.button:global(.copper):global(.night).selected.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.copper):global(.night).selected.lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.copper):global(.night).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.copper):global(.night).selected.transparent .client {
  color: var(--agate-accent-color, #e0b094);
}
.button:global(.copper):global(.night) .marquee {
  text-align: center;
}
.button:global(.copper):global(.night):not(.iconOnly) .marquee,
.button:global(.copper):global(.night).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.copper):global(.night):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.copper):global(.night):global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #fff);
  background-image: none;
  border-color: transparent;
}
.button:global(.copper):global(.night):global(.spottable):focus,
.button:global(.copper):global(.night):global(.spottable):focus .client {
  color: #373739;
}
.button:global(.copper):global(.night):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.copper):global(.night):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0.125rem solid transparent;
  opacity: inherit;
}
.button:global(.copper):global(.night):global(.spottable):active,
.button:global(.copper):global(.night):global(.spottable):active .client {
  color: inherit;
}
.button:global(.copper):global(.night):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.electro) {
  height: 3.5rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: inherit;
  text-indent: inherit;
  font-variant-ligatures: normal;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  vertical-align: middle;
}
.button:global(.electro) .bg {
  background-color: var(--agate-accent-color, #0359f0);
  background-origin: inherit;
  border: 0 solid transparent;
  border-radius: 0.75rem;
  color: white;
  background-image: linear-gradient(to top left, transparent, rgba(255, 255, 255, 0.5));
  box-shadow: none;
  transform: skewX(-20deg);
}
.button:global(.electro) .client {
  padding: 0;
  color: white;
}
.button:global(.electro) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.electro) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.electro) .badge {
  position: absolute;
  top: auto;
  right: -0.125rem;
  bottom: -0.25rem;
  left: auto;
  border-radius: 0.125rem;
  padding: 0 0.25rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
  color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
  background-color: var(--agate-button-badge-bg-color, var(--agate-highlight-color, #ff8100));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.electro) .badge {
  top: auto;
  right: auto;
  bottom: -0.25rem;
  left: -0.125rem;
}
.button:global(.electro).grid .bg {
  border-radius: 0.75rem;
}
.button:global(.electro).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.electro).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.electro).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.electro).minWidth {
  min-width: 10rem;
}
.button:global(.electro).opaque {
  /* Available for export */
}
.button:global(.electro).lightOpaque .bg {
  background-color: transparent;
}
.button:global(.electro).lightOpaque .client {
  color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
}
.button:global(.electro).transparent .bg {
  background-color: transparent;
}
.button:global(.electro).transparent .client {
  color: white;
}
.button:global(.electro).iconOnly,
.button:global(.electro).iconOnly.huge,
.button:global(.electro).iconOnly.small,
.button:global(.electro).iconOnly.smallest {
  padding: 0;
}
.button:global(.electro).iconOnly .client .icon,
.button:global(.electro).iconOnly.huge .client .icon,
.button:global(.electro).iconOnly.small .client .icon,
.button:global(.electro).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.electro).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.electro).iconOnly.hasIcon .bg {
  border-radius: 0.75rem;
}
.button:global(.electro).iconOnly.hasIcon.minWidth .bg {
  border-radius: 0.75rem;
}
.button:global(.electro).animateOnRender .bg,
.button:global(.electro).animateOnRender .client,
.button:global(.electro).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.electro).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.electro).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.electro).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.electro).joinedLeft,
.button:global(.electro).joinedCenter {
  margin-right: 0;
}
.button:global(.electro).joinedLeft .bg,
.button:global(.electro).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.electro).joinedRight,
.button:global(.electro).joinedCenter {
  margin-left: 0;
}
.button:global(.electro).joinedRight .bg,
.button:global(.electro).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.electro).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.41667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.electro).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.electro).small {
  border-radius: inherit;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 1.25rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.electro).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.electro).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.electro).small .badge {
  top: auto;
  right: -0.125rem;
  bottom: -0.25rem;
  left: auto;
  border-radius: 0.125rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.electro).small .badge {
  top: auto;
  right: auto;
  bottom: -0.25rem;
  left: -0.125rem;
}
.button:global(.electro).smallest {
  height: 2rem;
  min-width: 2rem;
  line-height: 2rem;
  font-size: 0.625rem;
  padding: 0 0.625rem;
}
.button:global(.electro).smallest .badge {
  top: auto;
  right: -0.125rem;
  bottom: -0.25rem;
  left: auto;
  border-radius: 0.125rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.electro).smallest .badge {
  top: auto;
  right: auto;
  bottom: -0.25rem;
  left: -0.125rem;
}
.button:global(.electro).highlighted .bg {
  background-color: var(--agate-highlight-color, #ff8100);
  background-image: linear-gradient(to bottom right, var(--agate-highlight-color, #ff8100), hsla(var(--agate-highlight-h, 0), var(--agate-highlight-s, 0), var(--agate-highlight-l, 0), 0.5));
  opacity: 1;
}
.button:global(.electro).highlighted,
.button:global(.electro).highlighted .client {
  color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
}
.button:global(.electro).highlighted.lightOpaque .bg {
  background-color: transparent;
}
.button:global(.electro).highlighted.lightOpaque .client {
  color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
}
.button:global(.electro).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.electro).highlighted.transparent .client {
  color: white;
}
.button:global(.electro).selected .bg {
  background-color: hsl( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) );
  border-color: transparent;
}
.button:global(.electro).selected,
.button:global(.electro).selected .client {
  color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
}
.button:global(.electro).selected.lightOpaque .bg {
  background-color: transparent;
}
.button:global(.electro).selected.lightOpaque .client {
  color: hsla(var(--agate-accent-h, 0), var(--agate-accent-s, 0), var(--agate-accent-l, 0), 0.8);
}
.button:global(.electro).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.electro).selected.transparent .client {
  color: white;
}
.button:global(.electro) .marquee {
  text-align: center;
}
.button:global(.electro):not(.iconOnly) .marquee,
.button:global(.electro).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.electro):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.electro):global(.spottable):focus .bg {
  background-color: hsla( calc( var(--agate-accent-h, 218) - 27), calc( var(--agate-accent-s, 98%) - 1%), calc( var(--agate-accent-l, 48%) + 17%) , 0.7);
  background-image: linear-gradient(to top left, transparent, rgba(255, 255, 255, 0.5));
  border-color: transparent;
}
.button:global(.electro):global(.spottable):focus,
.button:global(.electro):global(.spottable):focus .client {
  color: white;
}
.button:global(.electro):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.electro):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0 solid transparent;
  opacity: inherit;
}
.button:global(.electro):global(.spottable):active,
.button:global(.electro):global(.spottable):active .client {
  color: inherit;
}
.button:global(.electro):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.gallium) {
  height: 3.5rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: inherit;
  text-indent: inherit;
  font-variant-ligatures: normal;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  vertical-align: middle;
}
.button:global(.gallium) .bg {
  background-color: #5e5e5e;
  background-origin: inherit;
  border: 0.125rem solid transparent;
  border-radius: 0.25rem;
  color: #ffffff;
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.gallium) .client {
  padding: 0.125rem;
  color: #ffffff;
}
.button:global(.gallium) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.gallium) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.gallium) .badge {
  position: absolute;
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
  color: #ffffff;
  background-color: var(--agate-button-badge-bg-color, var(--agate-accent-color, #8b7efe));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.gallium) .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.gallium).grid .bg {
  border-radius: 0;
}
.button:global(.gallium).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.gallium).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.gallium).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.gallium).minWidth {
  min-width: 10rem;
}
.button:global(.gallium).opaque {
  /* Available for export */
}
.button:global(.gallium).lightOpaque .bg {
  background-color: #ffffff;
}
.button:global(.gallium).lightOpaque .client {
  color: #000000;
}
.button:global(.gallium).transparent .bg {
  background-color: transparent;
}
.button:global(.gallium).transparent .client {
  color: #000000;
}
.button:global(.gallium).iconOnly,
.button:global(.gallium).iconOnly.huge,
.button:global(.gallium).iconOnly.small,
.button:global(.gallium).iconOnly.smallest {
  padding: 0;
}
.button:global(.gallium).iconOnly .client .icon,
.button:global(.gallium).iconOnly.huge .client .icon,
.button:global(.gallium).iconOnly.small .client .icon,
.button:global(.gallium).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.gallium).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.gallium).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.gallium).iconOnly.hasIcon.minWidth .bg {
  border-radius: 0.25rem;
}
.button:global(.gallium).animateOnRender .bg,
.button:global(.gallium).animateOnRender .client,
.button:global(.gallium).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.gallium).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.gallium).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 200ms);
}
.button:global(.gallium).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 400ms);
}
.button:global(.gallium).joinedLeft,
.button:global(.gallium).joinedCenter {
  margin-right: 0;
}
.button:global(.gallium).joinedLeft .bg,
.button:global(.gallium).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.gallium).joinedRight,
.button:global(.gallium).joinedCenter {
  margin-left: 0;
}
.button:global(.gallium).joinedRight .bg,
.button:global(.gallium).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.gallium).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.gallium).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.gallium).small {
  border-radius: inherit;
  height: 2rem;
  min-width: 2rem;
  font-size: 1rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.gallium).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.gallium).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.gallium).small .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.gallium).small .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.gallium).smallest {
  height: 1.25rem;
  min-width: 1.25rem;
  line-height: 1rem;
  font-size: 0.75rem;
  padding: 0 0.625rem;
}
.button:global(.gallium).smallest .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.gallium).smallest .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.gallium).highlighted .bg {
  background-color: var(--agate-highlight-color, #c6c0fe);
  background-image: none;
  opacity: 1;
}
.button:global(.gallium).highlighted,
.button:global(.gallium).highlighted .client {
  color: #ffffff;
}
.button:global(.gallium).highlighted.lightOpaque .bg {
  background-color: #ffffff;
}
.button:global(.gallium).highlighted.lightOpaque .client {
  color: #000000;
}
.button:global(.gallium).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.gallium).highlighted.transparent .client {
  color: #000000;
}
.button:global(.gallium).selected .bg {
  background-color: #5e5e5e;
  border-color: var(--agate-accent-color, #8b7efe);
}
.button:global(.gallium).selected,
.button:global(.gallium).selected .client {
  color: #ffffff;
}
.button:global(.gallium).selected.lightOpaque .bg {
  background-color: #ffffff;
}
.button:global(.gallium).selected.lightOpaque .client {
  color: #000000;
}
.button:global(.gallium).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.gallium).selected.transparent .client {
  color: #000000;
}
.button:global(.gallium) .marquee {
  text-align: center;
}
.button:global(.gallium):not(.iconOnly) .marquee,
.button:global(.gallium).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.gallium):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.gallium):global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
  border-color: transparent;
}
.button:global(.gallium):global(.spottable):focus,
.button:global(.gallium):global(.spottable):focus .client {
  color: #ffffff;
}
.button:global(.gallium):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.gallium):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0.125rem solid transparent;
  opacity: inherit;
}
.button:global(.gallium):global(.spottable):active,
.button:global(.gallium):global(.spottable):active .client {
  color: inherit;
}
.button:global(.gallium):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.gallium):global(.night) {
  height: 3.5rem;
  font-weight: normal;
  letter-spacing: normal;
  line-height: inherit;
  text-indent: inherit;
  font-variant-ligatures: normal;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  vertical-align: middle;
}
.button:global(.gallium):global(.night) .bg {
  background-color: #5e5e5e;
  background-origin: inherit;
  border: 0.125rem solid transparent;
  border-radius: 0.25rem;
  color: #ffffff;
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.gallium):global(.night) .client {
  padding: 0.125rem;
  color: #ffffff;
}
.button:global(.gallium):global(.night) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.gallium):global(.night) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.gallium):global(.night) .badge {
  position: absolute;
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
  color: #ffffff;
  background-color: var(--agate-button-badge-bg-color, var(--agate-accent-color, #8b7efe));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.gallium):global(.night) .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.gallium):global(.night).grid .bg {
  border-radius: 0;
}
.button:global(.gallium):global(.night).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.gallium):global(.night).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.gallium):global(.night).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.gallium):global(.night).minWidth {
  min-width: 10rem;
}
.button:global(.gallium):global(.night).opaque {
  /* Available for export */
}
.button:global(.gallium):global(.night).lightOpaque .bg {
  background-color: #ededed;
}
.button:global(.gallium):global(.night).lightOpaque .client {
  color: #131313;
}
.button:global(.gallium):global(.night).transparent .bg {
  background-color: transparent;
}
.button:global(.gallium):global(.night).transparent .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night).iconOnly,
.button:global(.gallium):global(.night).iconOnly.huge,
.button:global(.gallium):global(.night).iconOnly.small,
.button:global(.gallium):global(.night).iconOnly.smallest {
  padding: 0;
}
.button:global(.gallium):global(.night).iconOnly .client .icon,
.button:global(.gallium):global(.night).iconOnly.huge .client .icon,
.button:global(.gallium):global(.night).iconOnly.small .client .icon,
.button:global(.gallium):global(.night).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.gallium):global(.night).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.gallium):global(.night).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.gallium):global(.night).iconOnly.hasIcon.minWidth .bg {
  border-radius: 0.25rem;
}
.button:global(.gallium):global(.night).animateOnRender .bg,
.button:global(.gallium):global(.night).animateOnRender .client,
.button:global(.gallium):global(.night).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.gallium):global(.night).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.gallium):global(.night).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 200ms);
}
.button:global(.gallium):global(.night).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 400ms);
}
.button:global(.gallium):global(.night).joinedLeft,
.button:global(.gallium):global(.night).joinedCenter {
  margin-right: 0;
}
.button:global(.gallium):global(.night).joinedLeft .bg,
.button:global(.gallium):global(.night).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.gallium):global(.night).joinedRight,
.button:global(.gallium):global(.night).joinedCenter {
  margin-left: 0;
}
.button:global(.gallium):global(.night).joinedRight .bg,
.button:global(.gallium):global(.night).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.gallium):global(.night).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.gallium):global(.night).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.gallium):global(.night).small {
  border-radius: inherit;
  height: 2rem;
  min-width: 2rem;
  font-size: 1rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.gallium):global(.night).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.gallium):global(.night).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.gallium):global(.night).small .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.gallium):global(.night).small .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.gallium):global(.night).smallest {
  height: 1.25rem;
  min-width: 1.25rem;
  line-height: 1rem;
  font-size: 0.75rem;
  padding: 0 0.625rem;
}
.button:global(.gallium):global(.night).smallest .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.gallium):global(.night).smallest .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.gallium):global(.night).highlighted .bg {
  background-color: var(--agate-highlight-color, #c6c0fe);
  background-image: none;
  opacity: 1;
}
.button:global(.gallium):global(.night).highlighted,
.button:global(.gallium):global(.night).highlighted .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night).highlighted.lightOpaque .bg {
  background-color: #ededed;
}
.button:global(.gallium):global(.night).highlighted.lightOpaque .client {
  color: #131313;
}
.button:global(.gallium):global(.night).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.gallium):global(.night).highlighted.transparent .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night).selected .bg {
  background-color: #5e5e5e;
  border-color: var(--agate-accent-color, #8b7efe);
}
.button:global(.gallium):global(.night).selected,
.button:global(.gallium):global(.night).selected .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night).selected.lightOpaque .bg {
  background-color: #ededed;
}
.button:global(.gallium):global(.night).selected.lightOpaque .client {
  color: #131313;
}
.button:global(.gallium):global(.night).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.gallium):global(.night).selected.transparent .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night) .marquee {
  text-align: center;
}
.button:global(.gallium):global(.night):not(.iconOnly) .marquee,
.button:global(.gallium):global(.night).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.gallium):global(.night):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.gallium):global(.night):global(.spottable):focus .bg {
  background-color: var(--agate-accent-color, #8b7efe);
  background-image: none;
  border-color: transparent;
}
.button:global(.gallium):global(.night):global(.spottable):focus,
.button:global(.gallium):global(.night):global(.spottable):focus .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.gallium):global(.night):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0.125rem solid transparent;
  opacity: inherit;
}
.button:global(.gallium):global(.night):global(.spottable):active,
.button:global(.gallium):global(.night):global(.spottable):active .client {
  color: inherit;
}
.button:global(.gallium):global(.night):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.silicon) {
  height: 3.125rem;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.17em;
  text-indent: inherit;
  font-variant-ligatures: normal;
  min-width: 3.125rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  vertical-align: middle;
}
.button:global(.silicon) .bg {
  background-color: #ffffff;
  background-origin: border-box;
  border: 0.125rem solid rgba(0, 0, 0, 0.5);
  border-radius: 1.5625rem;
  color: #000000;
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.silicon) .client {
  padding: 0.125rem;
  color: #000000;
}
.button:global(.silicon) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.silicon) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.silicon) .badge {
  position: absolute;
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
  color: #ffffff;
  background-color: var(--agate-button-badge-bg-color, var(--agate-accent-color, #ff2d55));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.silicon) .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.silicon).grid .bg {
  border-radius: 0;
}
.button:global(.silicon).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.silicon).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.silicon).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.silicon).minWidth {
  min-width: 10rem;
}
.button:global(.silicon).opaque {
  /* Available for export */
}
.button:global(.silicon).lightOpaque .bg {
  background-color: #ffffff;
}
.button:global(.silicon).lightOpaque .client {
  color: #000000;
}
.button:global(.silicon).transparent .bg {
  background-color: transparent;
}
.button:global(.silicon).transparent .client {
  color: #000000;
}
.button:global(.silicon).iconOnly,
.button:global(.silicon).iconOnly.huge,
.button:global(.silicon).iconOnly.small,
.button:global(.silicon).iconOnly.smallest {
  padding: 0;
}
.button:global(.silicon).iconOnly .client .icon,
.button:global(.silicon).iconOnly.huge .client .icon,
.button:global(.silicon).iconOnly.small .client .icon,
.button:global(.silicon).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.silicon).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.silicon).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.silicon).iconOnly.hasIcon.minWidth .bg {
  border-radius: 1.5625rem;
}
.button:global(.silicon).animateOnRender .bg,
.button:global(.silicon).animateOnRender .client,
.button:global(.silicon).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.silicon).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.silicon).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 200ms);
}
.button:global(.silicon).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 400ms);
}
.button:global(.silicon).joinedLeft,
.button:global(.silicon).joinedCenter {
  margin-right: 0;
}
.button:global(.silicon).joinedLeft .bg,
.button:global(.silicon).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.silicon).joinedRight,
.button:global(.silicon).joinedCenter {
  margin-left: 0;
}
.button:global(.silicon).joinedRight .bg,
.button:global(.silicon).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.silicon).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.silicon).huge .bg {
  border-width: 0.125rem;
}
.button:global(.silicon).small {
  border-radius: 1.25rem;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 1.16667rem;
  line-height: 1.17em;
  padding: 0 0.75rem;
}
.button:global(.silicon).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.silicon).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.silicon).small .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.silicon).small .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.silicon).smallest {
  height: 1.625rem;
  min-width: 1.625rem;
  line-height: 1.375rem;
  font-size: 0.75rem;
  padding: 0 0.625rem;
}
.button:global(.silicon).smallest .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.silicon).smallest .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.silicon).highlighted .bg {
  background-color: var(--agate-highlight-color, #9e00d8);
  background-image: none;
  opacity: 1;
}
.button:global(.silicon).highlighted,
.button:global(.silicon).highlighted .client {
  color: #ffffff;
}
.button:global(.silicon).highlighted.lightOpaque .bg {
  background-color: #ffffff;
}
.button:global(.silicon).highlighted.lightOpaque .client {
  color: #000000;
}
.button:global(.silicon).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.silicon).highlighted.transparent .client {
  color: #000000;
}
.button:global(.silicon).selected .bg {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.5);
}
.button:global(.silicon).selected,
.button:global(.silicon).selected .client {
  color: #000000;
}
.button:global(.silicon).selected.lightOpaque .bg {
  background-color: #ffffff;
}
.button:global(.silicon).selected.lightOpaque .client {
  color: #000000;
}
.button:global(.silicon).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.silicon).selected.transparent .client {
  color: #000000;
}
.button:global(.silicon) .marquee {
  text-align: center;
}
.button:global(.silicon):not(.iconOnly) .marquee,
.button:global(.silicon).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.silicon):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.silicon):global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
  border-color: rgba(0, 0, 0, 0.5);
}
.button:global(.silicon):global(.spottable):focus,
.button:global(.silicon):global(.spottable):focus .client {
  color: #ffffff;
}
.button:global(.silicon):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.silicon):global(.spottable):active .bg {
  background-color: #f2f2f2;
  background-image: none;
  border: 0.125rem solid rgba(0, 0, 0, 0.5);
  opacity: 0.75;
}
.button:global(.silicon):global(.spottable):active,
.button:global(.silicon):global(.spottable):active .client {
  color: #000000;
}
.button:global(.silicon):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.silicon):global(.night) {
  height: 3.125rem;
  font-weight: 300;
  letter-spacing: normal;
  line-height: 1.17em;
  text-indent: inherit;
  font-variant-ligatures: normal;
  min-width: 3.125rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  vertical-align: middle;
}
.button:global(.silicon):global(.night) .bg {
  background-color: #eeeeee;
  background-origin: border-box;
  border: 0.125rem solid transparent;
  border-radius: 1.5625rem;
  color: #000000;
  background-image: none;
  box-shadow: none;
  transform: none;
}
.button:global(.silicon):global(.night) .client {
  padding: 0.125rem;
  color: #000000;
}
.button:global(.silicon):global(.night) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.silicon):global(.night) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.silicon):global(.night) .badge {
  position: absolute;
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
  color: #000000;
  background-color: var(--agate-button-badge-bg-color, var(--agate-accent-color, #ff2d55));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.silicon):global(.night) .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.silicon):global(.night).grid .bg {
  border-radius: 0;
}
.button:global(.silicon):global(.night).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.silicon):global(.night).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.silicon):global(.night).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.silicon):global(.night).minWidth {
  min-width: 10rem;
}
.button:global(.silicon):global(.night).opaque {
  /* Available for export */
}
.button:global(.silicon):global(.night).lightOpaque .bg {
  background-color: #ededed;
}
.button:global(.silicon):global(.night).lightOpaque .client {
  color: #000000;
}
.button:global(.silicon):global(.night).transparent .bg {
  background-color: transparent;
}
.button:global(.silicon):global(.night).transparent .client {
  color: #ffffff;
}
.button:global(.silicon):global(.night).iconOnly,
.button:global(.silicon):global(.night).iconOnly.huge,
.button:global(.silicon):global(.night).iconOnly.small,
.button:global(.silicon):global(.night).iconOnly.smallest {
  padding: 0;
}
.button:global(.silicon):global(.night).iconOnly .client .icon,
.button:global(.silicon):global(.night).iconOnly.huge .client .icon,
.button:global(.silicon):global(.night).iconOnly.small .client .icon,
.button:global(.silicon):global(.night).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.silicon):global(.night).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.silicon):global(.night).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.silicon):global(.night).iconOnly.hasIcon.minWidth .bg {
  border-radius: 1.5625rem;
}
.button:global(.silicon):global(.night).animateOnRender .bg,
.button:global(.silicon):global(.night).animateOnRender .client,
.button:global(.silicon):global(.night).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.silicon):global(.night).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.silicon):global(.night).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 200ms);
}
.button:global(.silicon):global(.night).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 400ms);
}
.button:global(.silicon):global(.night).joinedLeft,
.button:global(.silicon):global(.night).joinedCenter {
  margin-right: 0;
}
.button:global(.silicon):global(.night).joinedLeft .bg,
.button:global(.silicon):global(.night).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.silicon):global(.night).joinedRight,
.button:global(.silicon):global(.night).joinedCenter {
  margin-left: 0;
}
.button:global(.silicon):global(.night).joinedRight .bg,
.button:global(.silicon):global(.night).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.silicon):global(.night).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.silicon):global(.night).huge .bg {
  border-width: 0.125rem;
}
.button:global(.silicon):global(.night).small {
  border-radius: 1.25rem;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 1.16667rem;
  line-height: 1.17em;
  padding: 0 0.75rem;
}
.button:global(.silicon):global(.night).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.silicon):global(.night).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.silicon):global(.night).small .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.silicon):global(.night).small .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.silicon):global(.night).smallest {
  height: 1.625rem;
  min-width: 1.625rem;
  line-height: 1.375rem;
  font-size: 0.75rem;
  padding: 0 0.625rem;
}
.button:global(.silicon):global(.night).smallest .badge {
  top: -0.125rem;
  right: 0;
  bottom: auto;
  left: auto;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: none;
}
:global(.enact-locale-right-to-left) .button:global(.silicon):global(.night).smallest .badge {
  top: -0.125rem;
  right: auto;
  bottom: auto;
  left: 0;
}
.button:global(.silicon):global(.night).highlighted .bg {
  background-color: var(--agate-highlight-color, #9e00d8);
  background-image: none;
  opacity: 1;
}
.button:global(.silicon):global(.night).highlighted,
.button:global(.silicon):global(.night).highlighted .client {
  color: #000000;
}
.button:global(.silicon):global(.night).highlighted.lightOpaque .bg {
  background-color: #ededed;
}
.button:global(.silicon):global(.night).highlighted.lightOpaque .client {
  color: #000000;
}
.button:global(.silicon):global(.night).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.silicon):global(.night).highlighted.transparent .client {
  color: #ffffff;
}
.button:global(.silicon):global(.night).selected .bg {
  background-color: #eeeeee;
  border-color: transparent;
}
.button:global(.silicon):global(.night).selected,
.button:global(.silicon):global(.night).selected .client {
  color: #000000;
}
.button:global(.silicon):global(.night).selected.lightOpaque .bg {
  background-color: #ededed;
}
.button:global(.silicon):global(.night).selected.lightOpaque .client {
  color: #000000;
}
.button:global(.silicon):global(.night).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.silicon):global(.night).selected.transparent .client {
  color: #ffffff;
}
.button:global(.silicon):global(.night) .marquee {
  text-align: center;
}
.button:global(.silicon):global(.night):not(.iconOnly) .marquee,
.button:global(.silicon):global(.night).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.silicon):global(.night):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.silicon):global(.night):global(.spottable):focus .bg {
  background-color: transparent;
  background-image: linear-gradient(to right, #9e00d8, #ba0088, #f1304f);
  border-color: transparent;
}
.button:global(.silicon):global(.night):global(.spottable):focus,
.button:global(.silicon):global(.night):global(.spottable):focus .client {
  color: #ffffff;
}
.button:global(.silicon):global(.night):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.silicon):global(.night):global(.spottable):active .bg {
  background-color: #eeeeee;
  background-image: none;
  border: 0.125rem solid transparent;
  opacity: 0.75;
}
.button:global(.silicon):global(.night):global(.spottable):active,
.button:global(.silicon):global(.night):global(.spottable):active .client {
  color: #000000;
}
.button:global(.silicon):global(.night):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
.button:global(.titanium) {
  height: 3.5rem;
  font-weight: 400;
  letter-spacing: normal;
  line-height: inherit;
  text-indent: inherit;
  font-variant-ligatures: normal;
  min-width: 3.5rem;
  max-width: 37.5rem;
  padding: 0 1.125rem;
  margin: 0 0.5rem;
  box-sizing: border-box;
  font-size: 1.5rem;
  vertical-align: middle;
}
.button:global(.titanium) .bg {
  background-color: rgba(255, 255, 255, 0.5);
  background-origin: inherit;
  border: 0.125rem solid var(--agate-accent-color, rgba(0, 0, 0, 0.1));
  border-radius: 416.625rem;
  color: #4d4d4d;
  background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.15), transparent);
  box-shadow: 0 1px 0.125rem var(--agate-accent-color, rgba(0, 0, 0, 0.1));
  transform: none;
}
.button:global(.titanium) .client {
  padding: 0.125rem;
  color: #4d4d4d;
}
.button:global(.titanium) .client .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
:global(.enact-locale-right-to-left) .button:global(.titanium) .client .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
.button:global(.titanium) .badge {
  position: absolute;
  top: auto;
  right: auto;
  bottom: -18%;
  left: 50%;
  border-radius: 41.625rem;
  padding: 0 0.625rem;
  font-size: 0.83333rem;
  line-height: 1.5rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: translate3d(-50%, -50%, 0);
  color: #262626;
  background-color: var(--agate-button-badge-bg-color, var(--agate-highlight-color, #2a48ca));
  z-index: 1;
}
:global(.enact-locale-right-to-left) .button:global(.titanium) .badge {
  top: auto;
  right: auto;
  bottom: -18%;
  left: 50%;
}
.button:global(.titanium).grid .bg {
  border-radius: 0;
}
.button:global(.titanium).iconAfter .client {
  flex-direction: row-reverse;
}
.button:global(.titanium).iconAfter .icon {
  margin-left: 0.5rem;
  margin-right: 0;
}
:global(.enact-locale-right-to-left) .button:global(.titanium).iconAfter .icon {
  margin-left: 0;
  margin-right: 0.5rem;
}
.button:global(.titanium).minWidth {
  min-width: 10rem;
}
.button:global(.titanium).opaque {
  /* Available for export */
}
.button:global(.titanium).lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.titanium).lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.titanium).transparent .bg {
  background-color: transparent;
}
.button:global(.titanium).transparent .client {
  color: #4d4d4d;
}
.button:global(.titanium).iconOnly,
.button:global(.titanium).iconOnly.huge,
.button:global(.titanium).iconOnly.small,
.button:global(.titanium).iconOnly.smallest {
  padding: 0;
}
.button:global(.titanium).iconOnly .client .icon,
.button:global(.titanium).iconOnly.huge .client .icon,
.button:global(.titanium).iconOnly.small .client .icon,
.button:global(.titanium).iconOnly.smallest .client .icon {
  margin: 0;
}
.button:global(.titanium).iconOnly.hasIcon {
  text-indent: 0;
}
.button:global(.titanium).iconOnly.hasIcon .bg {
  border-radius: 41.625rem;
}
.button:global(.titanium).iconOnly.hasIcon.minWidth .bg {
  border-radius: 416.625rem;
}
.button:global(.titanium).animateOnRender .bg,
.button:global(.titanium).animateOnRender .client,
.button:global(.titanium).animateOnRender .badge {
  animation-fill-mode: backwards;
  animation-duration: 500ms;
  animation-name: scale-bounce;
}
.button:global(.titanium).animateOnRender .bg {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms);
}
.button:global(.titanium).animateOnRender .client {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.titanium).animateOnRender .badge {
  animation-delay: calc(var(--agate-button-animation-delay, 0) * 1ms + 0);
}
.button:global(.titanium).joinedLeft,
.button:global(.titanium).joinedCenter {
  margin-right: 0;
}
.button:global(.titanium).joinedLeft .bg,
.button:global(.titanium).joinedCenter .bg {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.button:global(.titanium).joinedRight,
.button:global(.titanium).joinedCenter {
  margin-left: 0;
}
.button:global(.titanium).joinedRight .bg,
.button:global(.titanium).joinedCenter .bg {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.button:global(.titanium).huge {
  height: 10.41667rem;
  min-width: 10.41667rem;
  line-height: 10.16667rem;
  font-size: 1.875rem;
  padding: 0 1.5rem;
}
.button:global(.titanium).huge .bg {
  border-width: 0.41667rem;
}
.button:global(.titanium).small {
  border-radius: inherit;
  height: 2.5rem;
  min-width: 2.5rem;
  font-size: 1.25rem;
  line-height: inherit;
  padding: 0 0.75rem;
}
.button:global(.titanium).small.minWidth {
  min-width: 7.5rem;
}
.button:global(.titanium).small .client::before {
  bottom: 0.5rem;
  left: 0.75rem;
  right: 0.75rem;
}
.button:global(.titanium).small .badge {
  top: auto;
  right: auto;
  bottom: -18%;
  left: 50%;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.75rem;
  line-height: 0.875rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: translate3d(-50%, -50%, 0);
}
:global(.enact-locale-right-to-left) .button:global(.titanium).small .badge {
  top: auto;
  right: auto;
  bottom: -18%;
  left: 50%;
}
.button:global(.titanium).smallest {
  height: 2rem;
  min-width: 2rem;
  line-height: 1.75rem;
  font-size: 0.625rem;
  padding: 0 0.625rem;
}
.button:global(.titanium).smallest .badge {
  top: auto;
  right: auto;
  bottom: -18%;
  left: 50%;
  border-radius: 41.625rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  line-height: 0.75rem;
  letter-spacing: normal;
  text-indent: inherit;
  transform: translate3d(-50%, -50%, 0);
}
:global(.enact-locale-right-to-left) .button:global(.titanium).smallest .badge {
  top: auto;
  right: auto;
  bottom: -18%;
  left: 50%;
}
.button:global(.titanium).highlighted .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
  opacity: 1;
}
.button:global(.titanium).highlighted,
.button:global(.titanium).highlighted .client {
  color: #262626;
}
.button:global(.titanium).highlighted.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.titanium).highlighted.lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.titanium).highlighted.transparent .bg {
  background-color: transparent;
}
.button:global(.titanium).highlighted.transparent .client {
  color: #4d4d4d;
}
.button:global(.titanium).selected .bg {
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
  border-color: transparent;
}
.button:global(.titanium).selected,
.button:global(.titanium).selected .client {
  color: #262626;
}
.button:global(.titanium).selected.lightOpaque .bg {
  background-color: rgba(0, 0, 0, 0.3);
}
.button:global(.titanium).selected.lightOpaque .client {
  color: #4d4d4d;
}
.button:global(.titanium).selected.transparent .bg {
  background-color: transparent;
}
.button:global(.titanium).selected.transparent .client {
  color: #4d4d4d;
}
.button:global(.titanium) .marquee {
  text-align: center;
}
.button:global(.titanium):not(.iconOnly) .marquee,
.button:global(.titanium).minWidth .marquee {
  flex-grow: 1;
}
.button:global(.titanium):global(.spottable):focus {
  background-color: transparent;
  background-image: none;
}
.button:global(.titanium):global(.spottable):focus .bg {
  background-color: var(--agate-highlight-color, #2a48ca);
  background-image: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.15) 14%, transparent);
  border-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.button:global(.titanium):global(.spottable):focus,
.button:global(.titanium):global(.spottable):focus .client {
  color: white;
}
.button:global(.titanium):global(.spottable):focus.highlighted .bg {
  opacity: 1;
}
.button:global(.titanium):global(.spottable):active .bg {
  background-color: inherit;
  background-image: inherit;
  border: 0.125rem solid var(--agate-accent-color, rgba(0, 0, 0, 0.1));
  opacity: inherit;
}
.button:global(.titanium):global(.spottable):active,
.button:global(.titanium):global(.spottable):active .client {
  color: inherit;
}
.button:global(.titanium):global(.spottable):active.highlighted .bg {
  opacity: 1;
}
