.button {
  display: -webkit-inline-box;
  display: inline-flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  box-sizing: border-box;
  height: 2.5rem;
  padding: 0 1.5rem;
  color: var(--manifold-color-gray);
  font-size: var(--manifold-font-d1);
  font-family: var(--manifold-font-family);
  font-family: var(--theme-font-family, var(--manifold-font-family));
  line-height: 2.5;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  background: var(--manifold-grayscale-100i);
  border-color: var(--manifold-grayscale-20);
  border-style: solid;
  border-width: 1px;
  border-radius: var(--manifold-radius);
  outline: none;
  box-shadow: var(--manifold-shadow-default);
  cursor: pointer;
  -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
  -webkit-transition-duration: 150ms;
          transition-duration: 150ms;
  -webkit-transition-property: background-color, border-color, color, box-shadow, -webkit-filter;
  transition-property: background-color, border-color, color, box-shadow, -webkit-filter;
  transition-property: background-color, border-color, color, box-shadow, filter;
  transition-property: background-color, border-color, color, box-shadow, filter, -webkit-filter
}
.button:focus,
  .button:hover {
    -webkit-filter: saturate(130%);
            filter: saturate(130%);
  }
.button:active {
    -webkit-transform: translateY(1px);
            transform: translateY(1px);
    -webkit-filter: brightness(90%);
            filter: brightness(90%);
  }
.button[data-color='black'] {
    color: var(--manifold-grayscale-95i);
    background: var(--manifold-grayscale-100);
    border: transparent
  }
.button[data-color='black']:active {
      color: var(--manifold-grayscale-90i);
    }
.button[data-color='black']:focus,
    .button[data-color='black']:hover {
      background: var(--manifold-grayscale-90);
    }
.button[data-color='gray'] {
    color: var(--manifold-color-gray);
    background: var(--manifold-color-gray10);
    border-color: var(--manifold-color-gray40);
    box-shadow: none
  }
.button[data-color='gray']:active {
      color: var(--manifold-color-gray80);
      background: var(--manifold-color-gray05);
    }
.button[data-color='gray']:focus,
    .button[data-color='gray']:hover {
      color: var(--manifold-grayscale100);
    }
.button[data-color='orange'] {
    color: var(--manifold-grayscale-100i);
    background: var(--manifold-g-orange);
    border-style: none;
    box-shadow: none
  }
.button[data-color='orange']:active {
      color: var(--manifold-grayscale-80i);
    }
.button[data-color='pink'] {
    color: var(--manifold-grayscale-100i);
    background: var(--manifold-g-pink);
    border-style: none;
    box-shadow: none
  }
.button[data-color='pink']:active {
      color: var(--manifold-grayscale-80i);
    }
.button[data-color='white']:active {
      color: var(--manifold-color-gray);
      border-color: var(--manifold-grayscale-40);
      box-shadow: var(--manifold-shadow-transparent);
    }
.button[data-color='white']:focus,
    .button[data-color='white']:hover {
      color: var(--manifold-grayscale-100);
      border-color: var(--manifold-grayscale-40);
    }
.button[data-size='small'] {
    height: 2rem;
    padding: 0 1rem;
    font-size: var(--manifold-font-d2);
    line-height: 1;
  }
.button:disabled {
    color: var(--manifold-grayscale-60);
    background: var(--manifold-grayscale-05);
    border-color: transparent;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.8
  }
.button:disabled:focus,
    .button:disabled:hover {
      color: var(--manifold-grayscale-60);
      background: var(--manifold-grayscale-05);
      box-shadow: none;
    }
.button:disabled:active {
      color: var(--manifold-grayscale-60);
      background: var(--manifold-grayscale-05);
      box-shadow: none;
      -webkit-transform: none;
              transform: none;
    }