grommet/grommet

View on GitHub
src/js/components/Button/__tests__/__snapshots__/Button-kind-test.js.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Button kind badge should align to button container if specified in theme 1`] = `
.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  background-color: #7D4CDB;
  color: #f8f8f8;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 24px;
}

.c1 {
  position: relative;
}

.c2 {
  position: relative;
  display: block;
}

.c4 {
  position: absolute;
  top: 0;
  right: 0;
}

.c6 {
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  font-weight: normal;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
  .c5 {
    border-radius: 12px;
  }
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    <div
      class="c2"
    >
      <button
        aria-label="Button, alert"
        class="c3"
        type="button"
      >
        Button
      </button>
    </div>
    <div
      class="c4"
      style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
    >
      <div
        class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
        style="min-height: 24px; min-width: 24px;"
      >
        <span
          class="c6"
        >
          2
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`Button kind badge should apply background 1`] = `
.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  background-color: #00C781;
  color: #444444;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 24px;
}

.c1 {
  position: relative;
}

.c2 {
  position: relative;
  display: block;
}

.c4 {
  position: absolute;
  top: 0;
  right: 0;
}

.c6 {
  font-size: 14px;
  line-height: 20px;
  color: #000000;
  font-weight: normal;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0, 0, 0, 0.33);
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
  .c5 {
    border-radius: 12px;
  }
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    <div
      class="c2"
    >
      <button
        aria-label="Button, 100 unread alerts"
        class="c3"
        type="button"
      >
        Button
      </button>
    </div>
    <div
      class="c4"
      style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
    >
      <div
        class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
        style="min-height: 24px; min-width: 24px;"
      >
        <span
          class="c6"
        >
          9+
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`Button kind badge should be offset from top-right corner 1`] = `
.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  background-color: #7D4CDB;
  color: #f8f8f8;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 24px;
}

.c1 {
  position: relative;
}

.c2 {
  position: relative;
  display: block;
}

.c4 {
  position: absolute;
  top: 0;
  right: 0;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0, 0, 0, 0.33);
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
  .c5 {
    border-radius: 12px;
  }
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    <div
      class="c2"
    >
      <button
        aria-label="Button, alert"
        class="c3"
        type="button"
      >
        Button
      </button>
    </div>
    <div
      class="c4"
      style="top: 0px; right: 0px; transform: translate(25%, -25%); transform-origin: 100% 0%;"
    >
      <div
        class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
        style="min-height: 12px; min-width: 12px;"
      />
    </div>
  </div>
</div>
`;

exports[`Button kind badge should display "+" when number is greater than max 1`] = `
.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  background-color: #7D4CDB;
  color: #f8f8f8;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 24px;
}

.c1 {
  position: relative;
}

.c2 {
  position: relative;
  display: block;
}

.c4 {
  position: absolute;
  top: 0;
  right: 0;
}

.c6 {
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  font-weight: normal;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0, 0, 0, 0.33);
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
  .c5 {
    border-radius: 12px;
  }
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    <div
      class="c2"
    >
      <button
        aria-label="Button, 100 unread alerts"
        class="c3"
        type="button"
      >
        Button
      </button>
    </div>
    <div
      class="c4"
      style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
    >
      <div
        class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
        style="min-height: 24px; min-width: 24px;"
      >
        <span
          class="c6"
        >
          9+
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`Button kind badge should display number content 1`] = `
.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  background-color: #7D4CDB;
  color: #f8f8f8;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 24px;
}

.c1 {
  position: relative;
}

.c2 {
  position: relative;
  display: block;
}

.c4 {
  position: absolute;
  top: 0;
  right: 0;
}

.c6 {
  font-size: 14px;
  line-height: 20px;
  color: #FFFFFF;
  font-weight: normal;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0, 0, 0, 0.33);
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
  .c5 {
    border-radius: 12px;
  }
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    <div
      class="c2"
    >
      <button
        aria-label="Button, 2 unread alerts"
        class="c3"
        type="button"
      >
        Button
      </button>
    </div>
    <div
      class="c4"
      style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
    >
      <div
        class="c5 Badge__StyledBadgeContainer-sc-1es4ws1-0"
        style="min-height: 24px; min-width: 24px;"
      >
        <span
          class="c6"
        >
          2
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`Button kind badge should render custom element 1`] = `
.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
}

.c1 {
  position: relative;
}

.c2 {
  position: relative;
  display: block;
}

.c4 {
  position: absolute;
  top: 0;
  right: 0;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  border-style: solid;
  border-width: 2px;
  border-color: rgba(0, 0, 0, 0.33);
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <div
    class="c1"
  >
    <div
      class="c2"
    >
      <button
        aria-label="Button, Add user alert"
        class="c3"
        type="button"
      >
        Button
      </button>
    </div>
    <div
      class="c4"
      style="top: 0px; right: 0px; transform: translate(50%, -50%); transform-origin: 100% 0%;"
    >
      <div
        class="c5"
      >
        <svg
          aria-label="Add"
          class="c6"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
      </div>
    </div>
  </div>
</div>
`;

exports[`Button kind badge should render relative to contents when button has no 
  border or background 1`] = `
.c4 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c4 g {
  fill: inherit;
  stroke: inherit;
}

.c4 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c4 *[stroke*='#'],
.c4 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c4 *[fill-rule],
.c4 *[FILL-RULE],
.c4 *[fill*='#'],
.c4 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c6 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  background-color: #7D4CDB;
  color: #f8f8f8;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  flex: 0 0 auto;
  justify-content: center;
  border-radius: 24px;
}

.c2 {
  position: relative;
}

.c3 {
  position: relative;
  display: block;
}

.c5 {
  position: absolute;
  top: 0;
  right: 0;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
  .c6 {
    border-radius: 12px;
  }
}

<div
  class="c0"
>
  <button
    aria-label="Button, Add user alert"
    class="c1"
    type="button"
  >
    <div
      class="c2"
    >
      <div
        class="c3"
      >
        <svg
          aria-label="Add"
          class="c4"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
      </div>
      <div
        class="c5"
        style="top: 0px; right: 0px; transform: translate(25%, -25%); transform-origin: 100% 0%;"
      >
        <div
          class="c6 Badge__StyledBadgeContainer-sc-1es4ws1-0"
          style="min-height: 12px; min-width: 12px;"
        />
      </div>
    </div>
  </button>
</div>
`;

exports[`Button kind border on default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  border-style: solid;
  border-width: 2px;
  border-color: green;
  padding: 2px 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind button icon colors 1`] = `
.c2 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c2 g {
  fill: inherit;
  stroke: inherit;
}

.c2 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 0;
  background-color: #000;
  border-color: #666666;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    <svg
      aria-label="Add"
      class="c2"
      viewBox="0 0 24 24"
    >
      <path
        d="M12 22V2M2 12h20"
        fill="none"
        stroke="#000"
        stroke-width="2"
      />
    </svg>
  </button>
</div>
`;

exports[`Button kind button with icon and align 1`] = `
.c2 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c2 g {
  fill: inherit;
  stroke: inherit;
}

.c2 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 0;
  text-align: start;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    <svg
      aria-label="Add"
      class="c2"
      viewBox="0 0 24 24"
    >
      <path
        d="M12 22V2M2 12h20"
        fill="none"
        stroke="#000"
        stroke-width="2"
      />
    </svg>
  </button>
</div>
`;

exports[`Button kind button with transparent background 1`] = `
<DocumentFragment>
  .c1 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: flex-start;
  background-color: rgba(28, 28, 28, 1);
  color: #FFFFFF;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 48px;
}

.c5 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: flex-start;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 48px;
}

.c3 {
  flex: 0 0 auto;
  align-self: stretch;
  height: 24px;
}

.c2 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 2em;
  padding: 6px 18px;
  font-size: 18px;
  line-height: 24px;
  background-color: #FFFFFF0F;
  color: #FFFFFF;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  font-size: 19px;
  line-height: 24px;
}

.c2:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c2:focus >circle,
.c2:focus >ellipse,
.c2:focus >line,
.c2:focus >path,
.c2:focus >polygon,
.c2:focus >polyline,
.c2:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c2:focus ::-moz-focus-inner {
  border: 0;
}

.c2:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c2:focus:not(:focus-visible) >circle,
.c2:focus:not(:focus-visible) >ellipse,
.c2:focus:not(:focus-visible) >line,
.c2:focus:not(:focus-visible) >path,
.c2:focus:not(:focus-visible) >polygon,
.c2:focus:not(:focus-visible) >polyline,
.c2:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c2:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: #FFFFFF0F;
  color: #FFFFFF;
  border: none;
  border-radius: 2em;
  padding: 6px 18px;
  font-size: 18px;
  line-height: 24px;
  background-color: #FFFFFF0F;
  color: #FFFFFF;
  background-color: rgba(255, 255, 255, 0.058823529411764705);
  color: #FFFFFF;
  color: #FFFFFF;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  font-size: 19px;
  line-height: 24px;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c6 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 2em;
  padding: 6px 18px;
  font-size: 18px;
  line-height: 24px;
  background-color: #0000000A;
  color: #333333;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  font-size: 19px;
  line-height: 24px;
}

.c6:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c6:focus >circle,
.c6:focus >ellipse,
.c6:focus >line,
.c6:focus >path,
.c6:focus >polygon,
.c6:focus >polyline,
.c6:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c6:focus ::-moz-focus-inner {
  border: 0;
}

.c6:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c6:focus:not(:focus-visible) >circle,
.c6:focus:not(:focus-visible) >ellipse,
.c6:focus:not(:focus-visible) >line,
.c6:focus:not(:focus-visible) >path,
.c6:focus:not(:focus-visible) >polygon,
.c6:focus:not(:focus-visible) >polyline,
.c6:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c6:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c7 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  background-color: #0000000A;
  color: #555555;
  border: none;
  border-radius: 2em;
  padding: 6px 18px;
  font-size: 18px;
  line-height: 24px;
  background-color: #0000000A;
  color: #333333;
  background-color: rgba(0, 0, 0, 0.0392156862745098);
  color: #333333;
  color: #333333;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  font-size: 19px;
  line-height: 24px;
}

.c7:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c7:focus >circle,
.c7:focus >ellipse,
.c7:focus >line,
.c7:focus >path,
.c7:focus >polygon,
.c7:focus >polyline,
.c7:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #00E8CF;
}

.c7:focus ::-moz-focus-inner {
  border: 0;
}

.c7:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c7:focus:not(:focus-visible) >circle,
.c7:focus:not(:focus-visible) >ellipse,
.c7:focus:not(:focus-visible) >line,
.c7:focus:not(:focus-visible) >path,
.c7:focus:not(:focus-visible) >polygon,
.c7:focus:not(:focus-visible) >polyline,
.c7:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c7:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-family: 'Metric',Arial,sans-serif;
  font-size: 18px;
  line-height: 24px;
  background-color: #FFFFFF;
  color: #555555;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
  .c1 {
    padding: 24px;
  }
}

@media only screen and (max-width: 768px) {
  .c5 {
    padding: 24px;
  }
}

@media only screen and (max-width: 768px) {
  .c3 {
    height: 12px;
  }
}

<div
    class="c0"
  >
    <div
      class="c1"
    >
      <button
        class="c2"
        type="button"
      >
        Test button
      </button>
      <div
        class="c3"
      />
      <button
        class="c4"
        type="button"
      >
        Active Test button
      </button>
    </div>
    <div
      class="c5"
    >
      <button
        class="c6"
        type="button"
      >
        Test button
      </button>
      <div
        class="c3"
      />
      <button
        class="c7"
        type="button"
      >
        Active Test button
      </button>
    </div>
  </div>
</DocumentFragment>
`;

exports[`Button kind default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 18px;
  line-height: 24px;
  padding: 6px 12px;
  color: #444444;
  font-weight: 700;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:hover {
  background-color: rgba(51, 51, 51, 0.06274509803921569);
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  />
</div>
`;

exports[`Button kind disabled with hoverIndicator should not hover 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  opacity: 0.3;
  text-align: center;
  opacity: 0.3;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    disabled=""
    type="button"
  >
    Button
  </button>
</div>
`;

exports[`Button kind disabled with hoverIndicator should not hover 2`] = `
<div
  class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
  <button
    class="StyledButtonKind-sc-1vhfpnt-0 kYiMTz"
    disabled=""
    type="button"
  >
    Button
  </button>
</div>
`;

exports[`Button kind extend on default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  color: green;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind fill 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
  height: 100%;
  max-width: none;
  flex: 1 0 auto;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c2 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  height: 100%;
}

.c2:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c2:focus >circle,
.c2:focus >ellipse,
.c2:focus >line,
.c2:focus >path,
.c2:focus >polygon,
.c2:focus >polyline,
.c2:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c2:focus ::-moz-focus-inner {
  border: 0;
}

.c2:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c2:focus:not(:focus-visible) >circle,
.c2:focus:not(:focus-visible) >ellipse,
.c2:focus:not(:focus-visible) >line,
.c2:focus:not(:focus-visible) >path,
.c2:focus:not(:focus-visible) >polygon,
.c2:focus:not(:focus-visible) >polyline,
.c2:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c2:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
  width: 100%;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
  <button
    class="c2"
    type="button"
  >
    Test
  </button>
  <button
    class="c3"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind font on button default 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  line-height: 20px;
  font-weight: 700;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind font undefined 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind hover on default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  outline: none;
  border: none;
  padding: 0;
  text-align: inherit;
  color: inherit;
}

.c1:hover {
  background-color: rgba(221, 221, 221, 0.4);
  color: #444444;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind hover secondary with color and background 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  background-color: skyblue;
  color: #FFFFFF;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:hover {
  background-color: orange;
  color: green;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Button
  </button>
</div>
`;

exports[`Button kind hover secondary with color and background 2`] = `
<div
  class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
  <button
    class="StyledButtonKind-sc-1vhfpnt-0 cbqgVk"
    type="button"
  >
    Button
  </button>
</div>
`;

exports[`Button kind hoverIndicator with color and background 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:hover {
  background-color: pink;
  color: #FFFFFF;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Button
  </button>
</div>
`;

exports[`Button kind hoverIndicator with color and background 2`] = `
<div
  class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
  <button
    class="StyledButtonKind-sc-1vhfpnt-0 ebMzsf"
    type="button"
  >
    Button
  </button>
</div>
`;

exports[`Button kind icon only pad should apply when icon but no label 1`] = `
<DocumentFragment>
  .c2 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c2 g {
  fill: inherit;
  stroke: inherit;
}

.c2 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 5px 5px;
  font-size: 14px;
  line-height: 0;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 5px 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c4 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 0;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c4 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c4:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c4:focus ::-moz-focus-inner {
  border: 0;
}

.c4:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c4:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 8px 18px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c5:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus ::-moz-focus-inner {
  border: 0;
}

.c5:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c6 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 24px;
  padding: 18px 18px;
  font-size: 22px;
  line-height: 0;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c6 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c6:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c6:focus >circle,
.c6:focus >ellipse,
.c6:focus >line,
.c6:focus >path,
.c6:focus >polygon,
.c6:focus >polyline,
.c6:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c6:focus ::-moz-focus-inner {
  border: 0;
}

.c6:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c6:focus:not(:focus-visible) >circle,
.c6:focus:not(:focus-visible) >ellipse,
.c6:focus:not(:focus-visible) >line,
.c6:focus:not(:focus-visible) >path,
.c6:focus:not(:focus-visible) >polygon,
.c6:focus:not(:focus-visible) >polyline,
.c6:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c6:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c7 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 24px;
  padding: 18px 24px;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c7:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c7:focus >circle,
.c7:focus >ellipse,
.c7:focus >line,
.c7:focus >path,
.c7:focus >polygon,
.c7:focus >polyline,
.c7:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c7:focus ::-moz-focus-inner {
  border: 0;
}

.c7:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c7:focus:not(:focus-visible) >circle,
.c7:focus:not(:focus-visible) >ellipse,
.c7:focus:not(:focus-visible) >line,
.c7:focus:not(:focus-visible) >path,
.c7:focus:not(:focus-visible) >polygon,
.c7:focus:not(:focus-visible) >polyline,
.c7:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c7:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
    class="c0"
  >
    <button
      class="c1"
      type="button"
    >
      <svg
        aria-label="Add"
        class="c2"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 22V2M2 12h20"
          fill="none"
          stroke="#000"
          stroke-width="2"
        />
      </svg>
    </button>
    <button
      class="c3"
      type="button"
    >
      Add
    </button>
    <button
      class="c4"
      type="button"
    >
      <svg
        aria-label="Add"
        class="c2"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 22V2M2 12h20"
          fill="none"
          stroke="#000"
          stroke-width="2"
        />
      </svg>
    </button>
    <button
      class="c5"
      type="button"
    >
      Add
    </button>
    <button
      class="c6"
      type="button"
    >
      <svg
        aria-label="Add"
        class="c2"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 22V2M2 12h20"
          fill="none"
          stroke="#000"
          stroke-width="2"
        />
      </svg>
    </button>
    <button
      class="c7"
      type="button"
    >
      Add
    </button>
  </div>
</DocumentFragment>
`;

exports[`Button kind match icon size to size prop when theme.icon.matchSize is true 1`] = `
<DocumentFragment>
  .c3 {
  display: inline-block;
  flex: 0 0 auto;
  width: NaNxsmall;
  height: NaNxsmall;
  fill: #666666;
  stroke: #666666;
}

.c3 g {
  fill: inherit;
  stroke: inherit;
}

.c3 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c3 *[stroke*='#'],
.c3 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c3 *[fill-rule],
.c3 *[FILL-RULE],
.c3 *[fill*='#'],
.c3 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c6 {
  display: inline-block;
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  fill: #666666;
  stroke: #666666;
}

.c6 g {
  fill: inherit;
  stroke: inherit;
}

.c6 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c8 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c8 g {
  fill: inherit;
  stroke: inherit;
}

.c8 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c8 *[stroke*='#'],
.c8 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c8 *[fill-rule],
.c8 *[FILL-RULE],
.c8 *[fill*='#'],
.c8 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c10 {
  display: inline-block;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  fill: #666666;
  stroke: #666666;
}

.c10 g {
  fill: inherit;
  stroke: inherit;
}

.c10 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c10 *[stroke*='#'],
.c10 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c10 *[fill-rule],
.c10 *[FILL-RULE],
.c10 *[fill*='#'],
.c10 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c12 {
  display: inline-block;
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  fill: #666666;
  stroke: #666666;
}

.c12 g {
  fill: inherit;
  stroke: inherit;
}

.c12 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c12 *[stroke*='#'],
.c12 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c12 *[fill-rule],
.c12 *[FILL-RULE],
.c12 *[fill*='#'],
.c12 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  justify-content: center;
}

.c4 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 12px;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c5 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c5:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus ::-moz-focus-inner {
  border: 0;
}

.c5:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c7 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c7 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c7:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c7:focus >circle,
.c7:focus >ellipse,
.c7:focus >line,
.c7:focus >path,
.c7:focus >polygon,
.c7:focus >polyline,
.c7:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c7:focus ::-moz-focus-inner {
  border: 0;
}

.c7:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c7:focus:not(:focus-visible) >circle,
.c7:focus:not(:focus-visible) >ellipse,
.c7:focus:not(:focus-visible) >line,
.c7:focus:not(:focus-visible) >path,
.c7:focus:not(:focus-visible) >polygon,
.c7:focus:not(:focus-visible) >polyline,
.c7:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c7:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c9 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 24px;
  padding: 8px 32px;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c9 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c9:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c9:focus ::-moz-focus-inner {
  border: 0;
}

.c9:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c9:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c11 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 26px;
  line-height: 32px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c11 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c11:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c11:focus ::-moz-focus-inner {
  border: 0;
}

.c11:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c11:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
    class="c0"
  >
    <button
      class="c1"
      type="button"
    >
      <div
        class="c2"
      >
        <svg
          aria-label="Add"
          class="c3"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
        <div
          class="c4"
        />
        Label
      </div>
    </button>
    <button
      class="c5"
      type="button"
    >
      <div
        class="c2"
      >
        <svg
          aria-label="Add"
          class="c6"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
        <div
          class="c4"
        />
        Label
      </div>
    </button>
    <button
      class="c7"
      type="button"
    >
      <div
        class="c2"
      >
        <svg
          aria-label="Add"
          class="c8"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
        <div
          class="c4"
        />
        Label
      </div>
    </button>
    <button
      class="c9"
      type="button"
    >
      <div
        class="c2"
      >
        <svg
          aria-label="Add"
          class="c10"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
        <div
          class="c4"
        />
        Label
      </div>
    </button>
    <button
      class="c11"
      type="button"
    >
      <div
        class="c2"
      >
        <svg
          aria-label="Add"
          class="c12"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
        <div
          class="c4"
        />
        Label
      </div>
    </button>
  </div>
</DocumentFragment>
`;

exports[`Button kind mouseOver and mouseOut events 1`] = `
.c3 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #f8f8f8;
  stroke: #f8f8f8;
}

.c3 g {
  fill: inherit;
  stroke: inherit;
}

.c3 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c3 *[stroke*='#'],
.c3 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c3 *[fill-rule],
.c3 *[FILL-RULE],
.c3 *[fill*='#'],
.c3 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  justify-content: center;
}

.c4 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 12px;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  background-color: #000;
  color: #f8f8f8;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    <div
      class="c2"
    >
      <svg
        aria-label="Add"
        class="c3"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 22V2M2 12h20"
          fill="none"
          stroke="#000"
          stroke-width="2"
        />
      </svg>
      <div
        class="c4"
      />
      label
    </div>
  </button>
</div>
`;

exports[`Button kind mouseOver and mouseOut events 2`] = `
<div
  class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
  <button
    class="StyledButtonKind-sc-1vhfpnt-0 hkuGsg"
    type="button"
  >
    <div
      class="StyledBox-sc-13pk1d4-0 jfWJaj"
    >
      <svg
        aria-label="Add"
        class="StyledIcon-sc-ofa7kd-0 iaGRUY"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 22V2M2 12h20"
          fill="none"
          stroke="#000"
          stroke-width="2"
        />
      </svg>
      <div
        class="StyledBox__StyledBoxGap-sc-13pk1d4-1 gLYlhX"
      />
      label
    </div>
  </button>
</div>
`;

exports[`Button kind no border on default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  border: none;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind no padding on default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  padding: 0px;
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind opacity on default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  opacity: 0.4;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind padding on default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  padding: 6px 12px;
  background-color: green;
  color: #444444;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind plain with icon 1`] = `
<DocumentFragment>
  .c2 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c2 g {
  fill: inherit;
  stroke: inherit;
}

.c2 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  outline: none;
  border: none;
  padding: 0;
  text-align: inherit;
  color: inherit;
  line-height: 0;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
    class="c0"
  >
    <button
      class="c1"
      type="button"
    >
      <svg
        aria-label="Add"
        class="c2"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 22V2M2 12h20"
          fill="none"
          stroke="#000"
          stroke-width="2"
        />
      </svg>
    </button>
  </div>
</DocumentFragment>
`;

exports[`Button kind primary button 1`] = `
.c2 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #000000;
  stroke: #000000;
}

.c2 g {
  fill: inherit;
  stroke: inherit;
}

.c2 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c2 *[stroke*='#'],
.c2 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c2 *[fill-rule],
.c2 *[FILL-RULE],
.c2 *[fill*='#'],
.c2 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c4 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: red;
  stroke: red;
}

.c4 g {
  fill: inherit;
  stroke: inherit;
}

.c4 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c4 *[stroke*='#'],
.c4 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c4 *[fill-rule],
.c4 *[FILL-RULE],
.c4 *[fill*='#'],
.c4 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 18px;
  line-height: 24px;
  padding: 6px 12px;
  background-color: green;
  color: #000000;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 18px;
  line-height: 24px;
  padding: 6px 12px;
  background-color: green;
  color: #000000;
  background-color: transparent;
  color: #555555;
  opacity: 1;
  padding: 4px 10px;
  border-style: solid;
  border-width: 2px;
  border-color: #555555;
  text-align: center;
  opacity: 1;
  cursor: default;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    <svg
      aria-label="FormNextLink"
      class="c2"
      viewBox="0 0 24 24"
    >
      <path
        d="M6 12.4h12M12.6 7l5.4 5.4-5.4 5.4"
        fill="none"
        stroke="#000"
        stroke-width="2"
      />
    </svg>
  </button>
  <button
    class="c3"
    disabled=""
    type="button"
  >
    <svg
      aria-label="FormNextLink"
      class="c4"
      viewBox="0 0 24 24"
    >
      <path
        d="M6 12.4h12M12.6 7l5.4 5.4-5.4 5.4"
        fill="none"
        stroke="#000"
        stroke-width="2"
      />
    </svg>
  </button>
</div>
`;

exports[`Button kind render of children 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  outline: none;
  border: none;
  padding: 0;
  text-align: inherit;
  color: inherit;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;

exports[`Button kind secondary button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 18px;
  line-height: 24px;
  padding: 4px 10px;
  color: #444444;
  border-style: solid;
  border-width: 2px;
  border-color: green;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:hover {
  padding: 3px 9px;
  border-style: solid;
  border-width: 3px;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  />
</div>
`;

exports[`Button kind should apply kind direction 1`] = `
<DocumentFragment>
  .c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  justify-content: center;
}

.c3 {
  flex: 0 0 auto;
  align-self: stretch;
  height: 12px;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  font-size: 12px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
    class="c0"
  >
    <button
      class="c1"
      type="button"
    >
      <div
        class="c2"
      >
        <svg />
        <div
          class="c3"
        />
        Button
      </div>
    </button>
  </div>
</DocumentFragment>
`;

exports[`Button kind should apply styling according to theme size definitions 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c2 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c2:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c2:focus >circle,
.c2:focus >ellipse,
.c2:focus >line,
.c2:focus >path,
.c2:focus >polygon,
.c2:focus >polyline,
.c2:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c2:focus ::-moz-focus-inner {
  border: 0;
}

.c2:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c2:focus:not(:focus-visible) >circle,
.c2:focus:not(:focus-visible) >ellipse,
.c2:focus:not(:focus-visible) >line,
.c2:focus:not(:focus-visible) >path,
.c2:focus:not(:focus-visible) >polygon,
.c2:focus:not(:focus-visible) >polyline,
.c2:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c2:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c3 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 22px;
  line-height: 28px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c3:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus >circle,
.c3:focus >ellipse,
.c3:focus >line,
.c3:focus >path,
.c3:focus >polygon,
.c3:focus >polyline,
.c3:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c3:focus ::-moz-focus-inner {
  border: 0;
}

.c3:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) >circle,
.c3:focus:not(:focus-visible) >ellipse,
.c3:focus:not(:focus-visible) >line,
.c3:focus:not(:focus-visible) >path,
.c3:focus:not(:focus-visible) >polygon,
.c3:focus:not(:focus-visible) >polyline,
.c3:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c3:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Button
  </button>
  <button
    class="c2"
    type="button"
  >
    Button
  </button>
  <button
    class="c2"
    type="button"
  >
    Button
  </button>
  <button
    class="c3"
    type="button"
  >
    Button
  </button>
</div>
`;

exports[`Button kind should render pad 1`] = `
<DocumentFragment>
  .c3 {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  fill: #666666;
  stroke: #666666;
}

.c3 g {
  fill: inherit;
  stroke: inherit;
}

.c3 *:not([stroke])[fill='none'] {
  stroke-width: 0;
}

.c3 *[stroke*='#'],
.c3 *[STROKE*='#'] {
  stroke: inherit;
  fill: none;
}

.c3 *[fill-rule],
.c3 *[FILL-RULE],
.c3 *[fill*='#'],
.c3 *[FILL*='#'] {
  fill: inherit;
  stroke: none;
}

.c2 {
  display: flex;
  box-sizing: border-box;
  max-width: 100%;
  align-items: center;
  min-width: 0;
  min-height: 0;
  flex-direction: row;
  justify-content: center;
}

.c4 {
  flex: 0 0 auto;
  align-self: stretch;
  width: 12px;
}

.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  padding: 96px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c5 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 18px;
  padding: 4px 22px;
  font-size: 18px;
  line-height: 24px;
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 6px;
  padding-bottom: 6px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c5 >svg {
  display: flex;
  align-self: center;
  vertical-align: middle;
}

.c5:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c5:focus ::-moz-focus-inner {
  border: 0;
}

.c5:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c5:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c6 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  outline: none;
  border: none;
  padding: 0;
  text-align: inherit;
  color: inherit;
}

.c6:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c6:focus >circle,
.c6:focus >ellipse,
.c6:focus >line,
.c6:focus >path,
.c6:focus >polygon,
.c6:focus >polyline,
.c6:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c6:focus ::-moz-focus-inner {
  border: 0;
}

.c6:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c6:focus:not(:focus-visible) >circle,
.c6:focus:not(:focus-visible) >ellipse,
.c6:focus:not(:focus-visible) >line,
.c6:focus:not(:focus-visible) >path,
.c6:focus:not(:focus-visible) >polygon,
.c6:focus:not(:focus-visible) >polyline,
.c6:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c6:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
    class="c0"
  >
    <button
      class="c1"
      data-testid="string-pad"
      type="button"
    >
      <div
        class="c2"
      >
        <svg
          aria-label="Add"
          class="c3"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
        <div
          class="c4"
        />
        String pad
      </div>
    </button>
    <button
      class="c5"
      data-testid="object-pad"
      type="button"
    >
      <div
        class="c2"
      >
        <svg
          aria-label="Add"
          class="c3"
          viewBox="0 0 24 24"
        >
          <path
            d="M12 22V2M2 12h20"
            fill="none"
            stroke="#000"
            stroke-width="2"
          />
        </svg>
        <div
          class="c4"
        />
        Object pad
      </div>
    </button>
    <button
      class="c6"
      data-testid="child-pad"
      type="button"
    >
      <svg
        aria-label="Add"
        class="c3"
        viewBox="0 0 24 24"
      >
        <path
          d="M12 22V2M2 12h20"
          fill="none"
          stroke="#000"
          stroke-width="2"
        />
      </svg>
    </button>
  </div>
</DocumentFragment>
`;

exports[`Button kind size of default button 1`] = `
.c1 {
  display: inline-block;
  box-sizing: border-box;
  cursor: pointer;
  font: inherit;
  text-decoration: none;
  margin: 0;
  background: transparent;
  overflow: visible;
  text-transform: none;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  transition-property: color,background-color,border-color,box-shadow;
  transition-duration: 0.1s;
  transition-timing-function: ease-in-out;
}

.c1:focus {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus >circle,
.c1:focus >ellipse,
.c1:focus >line,
.c1:focus >path,
.c1:focus >polygon,
.c1:focus >polyline,
.c1:focus >rect {
  outline: none;
  box-shadow: 0 0 2px 2px #6FFFB0;
}

.c1:focus ::-moz-focus-inner {
  border: 0;
}

.c1:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) >circle,
.c1:focus:not(:focus-visible) >ellipse,
.c1:focus:not(:focus-visible) >line,
.c1:focus:not(:focus-visible) >path,
.c1:focus:not(:focus-visible) >polygon,
.c1:focus:not(:focus-visible) >polyline,
.c1:focus:not(:focus-visible) >rect {
  outline: none;
  box-shadow: none;
}

.c1:focus:not(:focus-visible) ::-moz-focus-inner {
  border: 0;
}

.c0 {
  font-size: 18px;
  line-height: 24px;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

<div
  class="c0"
>
  <button
    class="c1"
    type="button"
  >
    Test
  </button>
</div>
`;