._button_1cbdq_2 {
  /**
  * ====================================================
  * Color transitions
  * ====================================================
  */

  transition: background-color .3s;
&:hover, &:focus-visible {
      transition: none;
}
&:is([aria-pressed=true], [aria-expanded=true], [aria-selected=true], [aria-checked=true]):hover:not(:active){
          transition: background-color .3s;
[ui-nowrap] {
              flex-wrap: nowrap;
              text-wrap: nowrap;
}
[ui-span-all] {
              grid-column: 1 / -1;
}
}

  /**
  * ====================================================
  * Layout
  * ====================================================
  */

  position: relative;

  gap: 8px;

  /* Badge placement */
  --badge-inset: -3px -3px auto auto;
&[ui-block-size='40'] {
  --badge-inset: -4px -4px auto auto;
}
&[ui-block-size='24'] {
  --badge-inset: -10px -10px auto auto;
}
&.shape-circle {
    --badge-inset: -4px -4px auto auto;
&[ui-block-size='40'] {
    padding: 0 4px;
    --badge-inset: -5px -5px auto auto;
}
&[ui-block-size='24'] {
    padding: 0 4px;
    --badge-inset: -9px -9px auto auto;
}
}

  border: 0;

  /**
  * ====================================================
  * Interactivity
  * ====================================================
  */

  /* Add transparent hit area at least 44px squared to satisfy WCAG2 target size requirement AAA: */
&::after {
    content: '';
    position: absolute;

    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: max(48px, 100%);
    height: max(48px, 100%);
}
}

/**
* ====================================================
* Indicate aria-busy
* ====================================================
*/
._button_1cbdq_2[aria-busy="true"] {
  animation: _shimmer_1cbdq_1 1s ease-in-out alternate infinite;
}
@keyframes _shimmer_1cbdq_1 {
from { opacity: 1;
}
to { opacity: .4;
}
}

/**
* ====================================================
* Split buttons: Place several buttons into a <span>
* ====================================================
*/
span:has(._button_1cbdq_2 + ._button_1cbdq_2) {
  display: flex;
  flex-wrap: nowrap;
> ._button_1cbdq_2 {
    min-inline-size: 40px;
}

  /* Reset outer radii for all but first/last */
> ._button_1cbdq_2:not(:first-child) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
> ._button_1cbdq_2:not(:last-child) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

  /**
   * 1. Base Overlay Definition
   * Every button gets an overlay spanning the gap.
   */
> ._button_1cbdq_2::before {
    content: '';
    position: absolute;
    inset: 20% -1px;
    pointer-events: none;

    border-style: solid;
    border-width: 0 2px;

    border-inline-start-color: color-mix(in oklab, currentcolor 20%, transparent);
    border-inline-end-color: color-mix(in oklab, currentcolor 25%, transparent);
}
> ._button_1cbdq_2:is([aria-pressed=true], :active, :hover, [class*="-solid"])::before {
    display: none;
}
> ._button_1cbdq_2:has(+*:is([aria-pressed=true], :active, :hover, [class*="-solid"]))::before, > ._button_1cbdq_2:last-child::before {
    border-inline-end: none;
}
> :is([aria-pressed=true], :active, :hover, [class*="-solid"]) + ._button_1cbdq_2::before, > ._button_1cbdq_2:first-child::before {
    border-inline-start: none;
}
}