._tokens_1wvzi_2 {
    background: var(--color-background);
    color: var(--color);
    padding: 0 0;
    position: relative;
&[ui-sunken] {
        background: var(--color-150);
}
&:hover {
      outline: 3px var(--color-350);
      outline-offset: -3px;
}
}
._pillActions_1wvzi_18 {
    position: absolute;
    z-index: 1;
    inset: -32px 0 auto auto;
}

/* Responsive Input (Firefox compatible) */
._inputSizer_1wvzi_26 {
  display: inline-grid;
  position: relative;
&:has(>._gap_1wvzi_30) {
      padding: 0 8px;
      margin: 0 -8px;
}
}
._inputSizer_1wvzi_26::after, ._inputSizer_1wvzi_26>input {
  grid-area: 1 / 1;
  padding: inherit;
  font: inherit;
}
._inputSizer_1wvzi_26::after {
  content: attr(data-value) "\200B";
  visibility: hidden;
  white-space: pre;
  padding: inherit;
}
._inputSizer_1wvzi_26 > input {
    /* FIREFOX FIX: */
    /* Minimum inline-size of an input */
    inline-size: 0;
    /* Stretch to fill grid cell */
    min-inline-size: 100%;
}
input[aria-invalid="true"] {
  text-decoration: line-through;
}
input._gap_1wvzi_30 {
    background: transparent;
    border: none;
    z-index: 1;
    color: var(--color-foreground);
&:focus:not([aria-invalid]) {
        outline: none;
}
&:focus[aria-invalid="true"] {
        opacity: 0.8;
        outline-color: transparent;
}

    /*&:focus[value=""] {
        outline: 4px solid var(--color-background-editing);
        outline-offset: -8px;
        animation: flash .3s steps(1, end) 2 reverse
    }*/
}
input._pill_1wvzi_18 {
    position: relative;
    background: transparent;
    border: none;
    /* Minimal inline-size for very short pills */
    inline-size: 24px;
    text-align: center;
}
input:focus {
  anchor-name: var(--b3a6197e);
}

/* Extend the last gap if tokens control is wider than its contained pills */
:has(>._gap_1wvzi_30):last-of-type {
    flex-grow: 1;
}
:has(>._pill_1wvzi_18) {
    position: relative;

      /* Visual pill shape (encroaches into gaps) */
&::before {
        content: '';
        position: absolute;
        inset: 0 -10px;
        border-radius: 999px;
        z-index: 0;
}

      /* Input field */
> ._pill_1wvzi_18 {
          color: var(--color-foreground);
}
}

/* Add visual cutout (Default LTR: cutout on the left) */
._tokens_1wvzi_2:where([state="idle"], [state="selecting-pills"]) :has(>._pill_1wvzi_18)~:has(>._pill_1wvzi_18:not([aria-selected="true"]))::before {
    -webkit-mask: radial-gradient(15px circle at -8px center, #0000 99.5%, #000 100%);
            mask: radial-gradient(15px circle at -8px center, #0000 99.5%, #000 100%);
}

/* RTL override (cutout on the right) */
._tokens_1wvzi_2:where([state="idle"], [state="selecting-pills"]):dir(rtl) :has(>._pill_1wvzi_18)~:has(>._pill_1wvzi_18:not([aria-selected="true"]))::before {
    -webkit-mask: radial-gradient(15px circle at calc(100% + 8px) center, #0000 99.5%, #000 100%);
            mask: radial-gradient(15px circle at calc(100% + 8px) center, #0000 99.5%, #000 100%);
}
:has(>._pill_1wvzi_18[aria-selected=true]) {
&::before {
        background-color: var(--color-background-selected);
}
> ._pill_1wvzi_18 {
        color: var(--color-foreground-selected);
}
}
:has(>._pill_1wvzi_18:focus) {
::-moz-selection {
        background: var(--color-background-editing);
        color: var(--color-foreground-editing)
}
::selection {
        background: var(--color-background-editing);
        color: var(--color-foreground-editing)
}
&::before {
        outline: 2px var(--color-focus);
}
> ._pill_1wvzi_18 {
        outline: none;
        color: var(--color-foreground);
}
&::before {
        background-color: var(--color-150);
}
}
:has(>._pill_1wvzi_18) {
&::before {
      background-color: var(--color-250);
}
}
[state="idle"] :has(>._pill_1wvzi_18) {
&::before {
        background-color: var(--color-250);
}
> ._pill_1wvzi_18 {
        color: var(--color-foreground);
}
&:has(>._pill_1wvzi_18:hover)::before {
        background-color: var(--color-300);
}
}
:is(._pill_1wvzi_18, ._gap_1wvzi_30):not(:focus):hover {
    /* TODO: Add visible hover indicator for editable gaps and pills */
}
._dropdown_1wvzi_175 {
    position: fixed;
    z-index: 1;
    box-shadow: 0px 2px 8px 0px var(--color-shadow);

    /* Reset native popover defaults */
    border: none;
    margin: 0;
    padding: 0;
    overflow: visible;

    position-area: block-end span-inline-end;
    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;

    background: var(--color-200);
    width: -moz-max-content;
    width: max-content;
    padding: 0;
    margin: 0;

    /* Sever inherited flexbox cross-axis alignment */
        align-self: start !important;

        /* If the row is also applying inline/main-axis alignment (justify-content: center),
           sever that too just to be safe: */
        justify-self: start !important;
> li {
        list-style-type: none;
        padding: 0 8px;
        min-width: 64px;
&::before{
            content: '';
}
&:first-child {
            padding-block-start: 8px;
            border-start-start-radius: 8px;
            border-start-end-radius: 8px;
}
&:last-child {
            padding-block-end: 8px;
            border-end-start-radius: 8px;
            border-end-end-radius: 8px;
}
}
> li:hover {
        background: var(--color-background-hover);
        color: var(--color-foreground-hover)
}
> li[aria-selected] {
        background: var(--color-background-selected);
        color: var(--color-foreground-selected)
}
}
._toolbar_1wvzi_233 {
    position: absolute;
    inset-block-end: -32px;
    inset-inline-end: 0;
}

/* Confirmation animation */
@keyframes _flash_1wvzi_1 {
50% {
    opacity: .5;
}
}

/* DEBUG */
._debug_1wvzi_248 {
    display:none;
}
._debug_1wvzi_248:nth-child(odd){
    background-color:brown;
    color: white;
}