@jobber/components 8.20.2 → 8.21.1

package/dist/styles.css

@@ -4149,6 +4149,773 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   line-height: 0;
 }
 
+.qWsLxPjCBI8- {
+  display: inline-block;
+  margin-bottom: 4px;
+  margin-bottom: var(--space-smaller);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  line-height: 1.25;
+  line-height: var(--typography--lineHeight-base);
+}
+
+.EySvIEsW9Q4-,
+.F94vaco3HkM-,
+.IYgNfHHPVFY- {
+  --comboboxPrimitive-field-height: calc(var(--base-unit) * 2.5);
+  --comboboxPrimitive-control-height: calc(
+    var(--comboboxPrimitive-field-height) - (var(--border-base) * 2)
+  );
+  --comboboxPrimitive-field-line-height: calc(var(--base-unit) * 1.25);
+  --comboboxPrimitive-field-padding-inline: var(--space-slim);
+  --comboboxPrimitive-field-padding-block: calc(
+    (
+        var(--comboboxPrimitive-field-height) -
+          var(--comboboxPrimitive-field-line-height) - (var(--border-base) * 2)
+      ) / 2
+  );
+}
+
+.EySvIEsW9Q4- {
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+  min-height: var(--comboboxPrimitive-field-height);
+  box-sizing: border-box;
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border--interactive);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.EySvIEsW9Q4- * {
+  box-sizing: border-box;
+}
+
+.EySvIEsW9Q4-:has(.L-KgsoDZ360-:focus-visible):not([data-popup-open]) {
+  z-index: 1;
+  z-index: var(--elevation-base);
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+}
+
+.EySvIEsW9Q4-[data-invalid],
+.EySvIEsW9Q4-[data-invalid]:focus-within {
+  border-color: hsl(6, 64%, 51%);
+  border-color: var(--color-critical);
+}
+
+.EySvIEsW9Q4-:not([data-disabled]):not(:has(.L-KgsoDZ360-:focus-visible)):hover {
+  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
+}
+
+.EySvIEsW9Q4-:not([data-disabled])[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
+  border-color: hsl(198, 35%, 21%);
+  border-color: var(--color-interactive--subtle);
+}
+
+.EySvIEsW9Q4-[data-invalid]:not([data-disabled]):not(
+    :has(.L-KgsoDZ360-:focus-visible)
+  ):hover,
+.EySvIEsW9Q4-[data-invalid]:not([data-disabled])[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
+  border-color: hsl(6, 64%, 51%);
+  border-color: var(--color-critical);
+}
+
+.EySvIEsW9Q4-[data-disabled] {
+  border-color: hsl(200, 13%, 87%);
+  border-color: var(--color-border);
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+}
+
+.EySvIEsW9Q4-[data-disabled] :disabled {
+  -webkit-text-fill-color: hsl(0, 0%, 58%);
+  -webkit-text-fill-color: var(--color-disabled);
+  opacity: 1;
+}
+
+.L-KgsoDZ360- {
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  width: 100%;
+  min-width: 0;
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--comboboxPrimitive-field-padding-inline);
+  border: none;
+  border-radius: inherit;
+  outline: none;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--comboboxPrimitive-field-line-height);
+  background: transparent;
+  -webkit-appearance: none;
+          appearance: none;
+}
+
+.L-KgsoDZ360-::-webkit-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-:-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-::-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.input::-webkit-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.input:-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.input::-ms-input-placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-::placeholder {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.L-KgsoDZ360-[data-disabled]::-webkit-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.L-KgsoDZ360-[data-disabled]:-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.L-KgsoDZ360-[data-disabled]::-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.input[data-disabled]::-webkit-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.input[data-disabled]:-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.input[data-disabled]::-ms-input-placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.L-KgsoDZ360-[data-disabled]::placeholder {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+}
+
+.F94vaco3HkM- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: justify;
+      justify-content: space-between;
+  width: 100%;
+  min-height: var(--comboboxPrimitive-field-height);
+  box-sizing: border-box;
+  padding: var(--comboboxPrimitive-field-padding-block)
+    var(--comboboxPrimitive-field-padding-inline);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border--interactive);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+  font-family: inherit;
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  line-height: var(--comboboxPrimitive-field-line-height);
+  text-align: left;
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  cursor: pointer;
+  gap: 8px;
+  gap: var(--space-small);
+}
+
+.F94vaco3HkM-[data-placeholder] {
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.KBJi5F0wWc0- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  color: currentColor;
+  line-height: 0;
+}
+
+.IYgNfHHPVFY- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  min-width: var(--comboboxPrimitive-control-height);
+  min-height: var(--comboboxPrimitive-control-height);
+  padding: 0 8px;
+  padding: 0 var(--space-small);
+  border: none;
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+  background: transparent;
+  cursor: pointer;
+}
+
+.EySvIEsW9Q4- > .F94vaco3HkM- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-pack: center;
+      justify-content: center;
+  width: auto;
+  min-width: var(--comboboxPrimitive-control-height);
+  min-height: var(--comboboxPrimitive-control-height);
+  box-sizing: border-box;
+  padding: 0 8px;
+  padding: 0 var(--space-small);
+  border: none;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+  text-align: center;
+  background: transparent;
+}
+
+.F94vaco3HkM-:hover,
+.IYgNfHHPVFY-:hover {
+  color: hsl(197, 90%, 12%);
+  color: var(--color-heading);
+}
+
+.F94vaco3HkM-:focus-visible:not([data-popup-open]) {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.EySvIEsW9Q4- > .F94vaco3HkM-:focus-visible,
+.IYgNfHHPVFY-:focus-visible {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  outline: none;
+}
+
+.IYgNfHHPVFY-:has(+ .F94vaco3HkM-) {
+  min-width: 24px;
+  min-width: var(--space-large);
+  margin-right: 4px;
+  margin-right: var(--space-smaller);
+  padding: 0;
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+}
+
+/* Standalone triggers own field border/shadow states; InputGroup owns them when the trigger is embedded. */
+
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-))[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(198, 35%, 21%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-interactive--subtle);
+  border-color: hsl(198, 35%, 21%);
+  border-color: var(--color-interactive--subtle);
+}
+
+.F94vaco3HkM-:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not([data-disabled]):not(
+    :focus-visible
+  ):hover {
+  box-shadow: inset 0 0 0 1px hsl(200, 13%, 87%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-border--interactive);
+}
+
+.F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
+    [data-disabled]
+  ):not(:focus-visible):hover,
+.F94vaco3HkM-[data-invalid]:not(:where(.EySvIEsW9Q4- > .F94vaco3HkM-)):not(
+    [data-disabled]
+  )[data-popup-open] {
+  box-shadow: inset 0 0 0 1px hsl(6, 64%, 51%);
+  box-shadow: inset 0 0 0 var(--border-base) var(--color-critical);
+  border-color: hsl(6, 64%, 51%);
+  border-color: var(--color-critical);
+}
+
+.F94vaco3HkM-[data-disabled] {
+  --comboboxPrimitive-field-border-width: var(--border-base);
+
+  border-color: hsl(200, 13%, 87%);
+
+  border-color: var(--color-border);
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+  cursor: default;
+}
+
+.EySvIEsW9Q4- > .F94vaco3HkM-[data-disabled],
+.IYgNfHHPVFY-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background: transparent;
+  cursor: default;
+}
+
+.qfx6EynKdsk- {
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  width: var(--anchor-width);
+  max-width: var(--available-width);
+}
+
+.LOetsPPEwOk- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+      flex-direction: column;
+  max-height: min(calc(16px * 18), var(--available-height));
+  max-height: min(calc(var(--base-unit) * 18), var(--available-height));
+  min-width: calc(16px * 12.5);
+  min-width: calc(var(--base-unit) * 12.5);
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1), 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--shadow-base);
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--space-small);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border);
+  border-radius: 8px;
+  border-radius: var(--radius-base);
+  outline: none;
+  overflow: hidden;
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.LOetsPPEwOk-[data-starting-style],
+.LOetsPPEwOk-[data-ending-style] {
+  opacity: 0;
+  -webkit-transform: scale(0.98);
+          transform: scale(0.98);
+}
+
+.LOetsPPEwOk-[data-instant] {
+  transition-duration: 0ms;
+}
+
+.LOetsPPEwOk-:has(> .L-KgsoDZ360-) {
+  padding: var(--space-none);
+}
+
+.LOetsPPEwOk- > .L-KgsoDZ360- {
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  padding: 16px
+    16px;
+  padding: var(--space-base)
+    var(--components-popup-input-padding, var(--space-base));
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border--interactive);
+  border-radius: var(--radius-none);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.TCtrYZwnZYo- {
+  display: grid;
+  max-height: inherit;
+  min-height: 0;
+  padding: var(--space-none);
+  overflow: auto;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  grid-template-columns: 1fr;
+  -webkit-overflow-scrolling: touch;
+}
+
+.TCtrYZwnZYo-:empty {
+  padding: var(--space-none);
+}
+
+.LOetsPPEwOk- > .L-KgsoDZ360- + .TCtrYZwnZYo- {
+  padding: 8px;
+  padding: var(--space-small);
+}
+
+.M166bxiQs88-:not(:empty) {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  min-height: calc(16px * 2.5);
+  min-height: calc(var(--base-unit) * 2.5);
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--space-small);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.Cm53I7O4mMw- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  width: 100%;
+  min-height: calc(16px * 2.5);
+  min-height: calc(var(--base-unit) * 2.5);
+  box-sizing: border-box;
+  padding: 8px;
+  padding: var(--space-small);
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  outline: transparent;
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  font-weight: 600;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+      user-select: none;
+  cursor: pointer;
+  transition: background-color 200ms ease-out,
+    box-shadow 200ms ease-out;
+  transition: background-color var(--timing-base) ease-out,
+    box-shadow var(--timing-base) ease-out;
+  -webkit-touch-callout: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.jvrxEbmYGpM- {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+  width: 100%;
+  gap: 8px;
+  grid-gap: 8px;
+  grid-gap: var(--space-small);
+  gap: var(--space-small);
+}
+
+.Cm53I7O4mMw-:hover,
+.Cm53I7O4mMw-[data-highlighted] {
+  background-color: hsl(43, 18%, 92%);
+  background-color: var(--color-surface--hover);
+}
+
+.Cm53I7O4mMw-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  cursor: default;
+}
+
+.Cm53I7O4mMw-[data-disabled]:hover {
+  background-color: transparent;
+}
+
+.Cm53I7O4mMw-:focus-visible {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+}
+
+.GwotZ3R-quw- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+}
+
+.u5M1OKpKSWw- {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+.u5M1OKpKSWw-:not(:first-child) {
+  margin-top: 8px;
+  margin-top: var(--space-small);
+}
+
+.mpkTjdLrAUI- + .u5M1OKpKSWw- {
+  margin-top: var(--space-none);
+}
+
+._6UKKWI-irfo- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: center;
+      align-items: center;
+  padding: 8px 8px 4px;
+  padding: var(--space-small) var(--space-small) var(--space-smaller);
+  color: hsl(197, 21%, 36%);
+  color: var(--color-text--secondary);
+}
+
+.UnM-udfURI4- {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1001;
+  z-index: var(--elevation-modal);
+  background-color: rgba(0, 0, 0, 0.32);
+  background-color: var(--color-overlay);
+}
+
+.RZ4T5-BjTDY- {
+  width: 8px;
+  width: var(--space-small);
+  height: 8px;
+  height: var(--space-small);
+  border-top: 1px solid hsl(200, 13%, 87%);
+  border-top: var(--border-base) solid var(--color-border);
+  border-left: 1px solid hsl(200, 13%, 87%);
+  border-left: var(--border-base) solid var(--color-border);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+  -webkit-transform: rotate(45deg);
+          transform: rotate(45deg);
+}
+
+.pkc7PhhfCuk- {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex: 1 1 auto;
+      flex: 1 1 auto;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  -ms-flex-align: center;
+      align-items: center;
+  min-width: 0;
+  padding: 8px;
+  padding: var(--space-small);
+  gap: 4px;
+  gap: var(--space-smaller);
+}
+
+.pkc7PhhfCuk- .L-KgsoDZ360- {
+  width: auto;
+  height: calc(16px * 1.5);
+  height: calc(var(--base-unit) * 1.5);
+  min-width: 0;
+  padding: 0;
+  line-height: 1.25;
+  -ms-flex: 1 1 0px;
+      flex: 1 1 0;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-:-ms-input-placeholder {
+  color: transparent;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-::-ms-input-placeholder {
+  color: transparent;
+}
+
+.chips:has(.chip) .input::-webkit-input-placeholder {
+  color: transparent;
+}
+
+.chips:has(.chip) .input:-ms-input-placeholder {
+  color: transparent;
+}
+
+.chips:has(.chip) .input::-ms-input-placeholder {
+  color: transparent;
+}
+
+.pkc7PhhfCuk-:has(.fdKYm3GTKwk-) .L-KgsoDZ360-::placeholder {
+  color: transparent;
+}
+
+.fdKYm3GTKwk- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  min-height: calc(16px * 1.5);
+  min-height: calc(var(--base-unit) * 1.5);
+  box-sizing: border-box;
+  padding: 0 8px;
+  padding: 0 var(--space-small);
+  border: 1px solid hsl(200, 13%, 87%);
+  border: var(--border-base) solid var(--color-border--interactive);
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  font-size: 14px;
+  font-size: var(--typography--fontSize-base);
+  line-height: 1.25;
+  background-color: hsl(35, 20%, 97%);
+  background-color: var(--color-surface--background--subtle);
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  gap: 2px;
+  gap: var(--space-smallest);
+}
+
+.fdKYm3GTKwk-:focus-visible {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.fdKYm3GTKwk-:has(.vzuaMzxA96M-:hover) {
+  background-color: hsl(40, 9%, 85%);
+  background-color: var(--color-surface--background--subtle--hover);
+}
+
+.fdKYm3GTKwk-[data-disabled] {
+  border-color: hsl(200, 13%, 87%);
+  border-color: var(--color-border);
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  background-color: hsl(0, 0%, 93%);
+  background-color: var(--color-disabled--secondary);
+}
+
+.fdKYm3GTKwk-:has(.vzuaMzxA96M-[aria-disabled="true"]):not([data-disabled]) {
+  border-color: hsl(200, 13%, 87%);
+  border-color: var(--color-border);
+  color: hsl(198, 35%, 21%);
+  color: var(--color-text);
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
+.vzuaMzxA96M- {
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -ms-flex: 0 0 auto;
+      flex: 0 0 auto;
+  -ms-flex-align: center;
+      align-items: center;
+  -ms-flex-pack: center;
+      justify-content: center;
+  width: 16px;
+  width: var(--space-base);
+  height: 16px;
+  height: var(--space-base);
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  border-radius: var(--radius-small);
+  color: hsl(198, 12%, 57%);
+  color: var(--color-icon--secondary);
+  line-height: 1;
+  background: transparent;
+  cursor: pointer;
+}
+
+.vzuaMzxA96M- svg {
+  display: block;
+}
+
+.vzuaMzxA96M-:hover {
+  color: hsl(198, 35%, 21%);
+  color: var(--color-icon);
+}
+
+.vzuaMzxA96M-:focus-visible {
+  box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 1), 0px 0px 0px 4px hsl(198, 12%, 57%);
+  box-shadow: var(--shadow-focus);
+  outline: none;
+}
+
+.vzuaMzxA96M-[data-disabled] {
+  color: hsl(0, 0%, 58%);
+  color: var(--color-disabled);
+  cursor: default;
+}
+
+.fdKYm3GTKwk-[data-disabled] .vzuaMzxA96M-,
+.vzuaMzxA96M-[aria-disabled="true"] {
+  display: none;
+}
+
+.mpkTjdLrAUI- {
+  margin: 8px 0;
+  margin: var(--space-small) 0;
+  border-bottom: 1px solid hsl(200, 13%, 87%);
+  border-bottom: var(--border-base) solid var(--color-border);
+  grid-column: 1 / -1;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .LOetsPPEwOk- {
+    transition: opacity 200ms ease-out,
+      -webkit-transform 200ms ease-out;
+    transition: opacity var(--timing-base) ease-out,
+      -webkit-transform var(--timing-base) ease-out;
+    transition: opacity 200ms ease-out,
+      transform 200ms ease-out;
+    transition: opacity var(--timing-base) ease-out,
+      transform var(--timing-base) ease-out;
+    transition: opacity 200ms ease-out,
+      transform 200ms ease-out,
+      -webkit-transform 200ms ease-out;
+    transition: opacity var(--timing-base) ease-out,
+      transform var(--timing-base) ease-out,
+      -webkit-transform var(--timing-base) ease-out;
+    -webkit-transform-origin: var(--transform-origin);
+            transform-origin: var(--transform-origin);
+  }
+}
+
 ._6HZLFIOZh4s- {
   width: 100%;
 }