:global(.ui-group) {
  & > :global(.ui-input) {
    flex-grow: 1;
    position: relative;
    &:first-of-type {
      &:before {
        left: 0;
      }
    }
    &:last-of-type {
      &:before {
        right: 0;
      }
    }
    &:before {
      content: '';
      pointer-events: none;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    &:focus-within {
      z-index: var(--z-index-5);
    }
    & :global(.input-container) {
      min-width: 64px;
      & :global(.input-wrapper) {
        & input {
          box-shadow: none !important;
        }
      }
    }
    &[data-spinner] {
      &[data-state~="small"],
      &[data-state~="smaller"] {
        & :global(.spinner-decrease),
        & :global(.spinner-increase) {
          border: none !important;
        }
      }
    }
    &[data-state~="row"] {
      & label {
        color: var(--border-dark-03);
        cursor: text;
        margin-left: var(--cells-05);
      }
    }
    &[data-state~="primary"] {
      &:focus-within {
        &:before {
          box-shadow: inset 0 0 0 1px var(--primary-color), inset 0 0 0 3px var(--primary-fade-02);
        }
      }
    }
    &[data-state~="secondary"] {
      &:focus-within {
        &:before {
          box-shadow: inset 0 0 0 1px var(--secondary-color), inset 0 0 0 3px var(--secondary-fade-02);
        }
      }
    }
    &[data-state~="accent"] {
      &:focus-within {
        &:before {
          box-shadow: inset 0 0 0 1px var(--accent-color), inset 0 0 0 3px var(--accent-fade-02);
        }
      }
    }
    &[data-state~="triadic"] {
      &:focus-within {
        &:before {
          box-shadow: inset 0 0 0 1px var(--triadic-color), inset 0 0 0 3px var(--triadic-fade-02);
        }
      }
    }
    &[data-state~="split"] {
      &:focus-within {
        &:before {
          box-shadow: inset 0 0 0 1px var(--split-color), inset 0 0 0 3px var(--split-fade-02);
        }
      }
    }
    &[data-state~="dark"] {
      &:focus-within {
        &:before {
          box-shadow: inset 0 0 0 1px var(--palette-dark-02), inset 0 0 0 3px var(--border-dark-02);
        }
      }
    }
    &[data-state~="gray"] {
      &:focus-within {
        &:before {
          box-shadow: inset 0 0 0 1px var(--palette-light-00), inset 0 0 0 3px var(--palette-light-04);
        }
      }
    }
  }
}