:global(.carbon) .keypad {
  height: inherit;
  width: inherit;
}
:global(.carbon) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: inherit;
}
:global(.carbon) .keypad .label {
  bottom: inherit;
  position: absolute;
}
:global(.cobalt) .keypad {
  height: inherit;
  width: inherit;
}
:global(.cobalt) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: inherit;
}
:global(.cobalt) .keypad .label {
  bottom: inherit;
  position: absolute;
}
:global(.cobalt):global(.night) .keypad {
  height: inherit;
  width: inherit;
}
:global(.cobalt):global(.night) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: inherit;
}
:global(.cobalt):global(.night) .keypad .label {
  bottom: inherit;
  position: absolute;
}
:global(.copper) .keypad {
  height: inherit;
  width: inherit;
}
:global(.copper) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: inherit;
}
:global(.copper) .keypad .label {
  bottom: inherit;
  position: absolute;
}
:global(.copper):global(.night) .keypad {
  height: inherit;
  width: inherit;
}
:global(.copper):global(.night) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: inherit;
}
:global(.copper):global(.night) .keypad .label {
  bottom: inherit;
  position: absolute;
}
:global(.electro) .keypad {
  height: inherit;
  width: inherit;
}
:global(.electro) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: inherit;
}
:global(.electro) .keypad .label {
  bottom: inherit;
  position: absolute;
}
:global(.gallium) .keypad {
  height: 21.25rem;
  width: 20rem;
}
:global(.gallium) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: 6.625rem;
}
:global(.gallium) .keypad .label {
  bottom: 0.375rem;
  position: absolute;
}
:global(.gallium):global(.night) .keypad {
  height: 21.25rem;
  width: 20rem;
}
:global(.gallium):global(.night) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: 6.625rem;
}
:global(.gallium):global(.night) .keypad .label {
  bottom: 0.375rem;
  position: absolute;
}
:global(.silicon) .keypad {
  height: 21.25rem;
  width: 20rem;
}
:global(.silicon) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: 6.625rem;
}
:global(.silicon) .keypad .label {
  bottom: 0.375rem;
  position: absolute;
}
:global(.silicon):global(.night) .keypad {
  height: 21.25rem;
  width: 20rem;
}
:global(.silicon):global(.night) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: 6.625rem;
}
:global(.silicon):global(.night) .keypad .label {
  bottom: 0.375rem;
  position: absolute;
}
:global(.titanium) .keypad {
  height: inherit;
  width: inherit;
}
:global(.titanium) .keypad .keyContainer {
  display: flex;
  justify-content: center;
  width: inherit;
}
:global(.titanium) .keypad .label {
  bottom: inherit;
  position: absolute;
}
.button .client .icon {
  margin: 0;
}
.button:global(.carbon).key {
  height: inherit;
  width: inherit;
}
.button:global(.carbon) .bg {
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
.button:global(.carbon) .client {
  color: inherit;
}
.button:global(.carbon) .client .text {
  font-size: inherit;
  line-height: inherit;
}
.button:global(.carbon) .client .label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.button:global(.carbon) .client .icon {
  margin: 0;
}
.button:global(.carbon):global(.spottable):focus .client .label {
  color: inherit;
}
.button:global(.carbon):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #8fd43a);
}
.button:global(.carbon):global(.spottable):active .client {
  color: var(--agate-accent-color, #8fd43a);
}
.button:global(.carbon):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #8fd43a);
}
.button:global(.cobalt).key {
  height: inherit;
  width: inherit;
}
.button:global(.cobalt) .bg {
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
.button:global(.cobalt) .client {
  color: inherit;
}
.button:global(.cobalt) .client .text {
  font-size: inherit;
  line-height: inherit;
}
.button:global(.cobalt) .client .label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.button:global(.cobalt) .client .icon {
  margin: 0;
}
.button:global(.cobalt):global(.spottable):focus .client .label {
  color: inherit;
}
.button:global(.cobalt):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt):global(.spottable):active .client {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #8c81ff);
}
.button:global(.cobalt):global(.night).key {
  height: inherit;
  width: inherit;
}
.button:global(.cobalt):global(.night) .bg {
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
.button:global(.cobalt):global(.night) .client {
  color: inherit;
}
.button:global(.cobalt):global(.night) .client .text {
  font-size: inherit;
  line-height: inherit;
}
.button:global(.cobalt):global(.night) .client .label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.button:global(.cobalt):global(.night) .client .icon {
  margin: 0;
}
.button:global(.cobalt):global(.night):global(.spottable):focus .client .label {
  color: inherit;
}
.button:global(.cobalt):global(.night):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #fc7982);
}
.button:global(.cobalt):global(.night):global(.spottable):active .client {
  color: var(--agate-accent-color, #fc7982);
}
.button:global(.cobalt):global(.night):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #fc7982);
}
.button:global(.copper).key {
  height: inherit;
  width: inherit;
}
.button:global(.copper) .bg {
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
.button:global(.copper) .client {
  color: inherit;
}
.button:global(.copper) .client .text {
  font-size: inherit;
  line-height: inherit;
}
.button:global(.copper) .client .label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.button:global(.copper) .client .icon {
  margin: 0;
}
.button:global(.copper):global(.spottable):focus .client .label {
  color: inherit;
}
.button:global(.copper):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper):global(.spottable):active .client {
  color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #a47d66);
}
.button:global(.copper):global(.night).key {
  height: inherit;
  width: inherit;
}
.button:global(.copper):global(.night) .bg {
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
.button:global(.copper):global(.night) .client {
  color: inherit;
}
.button:global(.copper):global(.night) .client .text {
  font-size: inherit;
  line-height: inherit;
}
.button:global(.copper):global(.night) .client .label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.button:global(.copper):global(.night) .client .icon {
  margin: 0;
}
.button:global(.copper):global(.night):global(.spottable):focus .client .label {
  color: inherit;
}
.button:global(.copper):global(.night):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #e0b094);
}
.button:global(.copper):global(.night):global(.spottable):active .client {
  color: var(--agate-accent-color, #e0b094);
}
.button:global(.copper):global(.night):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #e0b094);
}
.button:global(.electro).key {
  height: inherit;
  width: inherit;
}
.button:global(.electro) .bg {
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
.button:global(.electro) .client {
  color: inherit;
}
.button:global(.electro) .client .text {
  font-size: inherit;
  line-height: inherit;
}
.button:global(.electro) .client .label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.button:global(.electro) .client .icon {
  margin: 0;
}
.button:global(.electro):global(.spottable):focus .client .label {
  color: inherit;
}
.button:global(.electro):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #0359f0);
}
.button:global(.electro):global(.spottable):active .client {
  color: var(--agate-accent-color, #0359f0);
}
.button:global(.electro):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #0359f0);
}
.button:global(.gallium).key {
  height: 4.125rem;
  width: 4.125rem;
}
.button:global(.gallium) .bg {
  background-color: transparent;
  border: none;
  border-radius: 4.125rem;
}
.button:global(.gallium) .client {
  color: #000000;
}
.button:global(.gallium) .client .text {
  font-size: 1.75rem;
  line-height: 2.375rem;
}
.button:global(.gallium) .client .label {
  color: #5e5e5e;
  font-size: 0.5rem;
  line-height: 0.75rem;
}
.button:global(.gallium) .client .icon {
  margin: 0;
}
.button:global(.gallium):global(.spottable):focus .client .label {
  color: #ffffff;
}
.button:global(.gallium):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #8b7efe);
}
.button:global(.gallium):global(.spottable):active .client {
  color: var(--agate-accent-color, #8b7efe);
}
.button:global(.gallium):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #8b7efe);
}
.button:global(.gallium):global(.night).key {
  height: 4.125rem;
  width: 4.125rem;
}
.button:global(.gallium):global(.night) .bg {
  background-color: transparent;
  border: none;
  border-radius: 4.125rem;
}
.button:global(.gallium):global(.night) .client {
  color: #ffffff;
}
.button:global(.gallium):global(.night) .client .text {
  font-size: 1.75rem;
  line-height: 2.375rem;
}
.button:global(.gallium):global(.night) .client .label {
  color: #5e5e5e;
  font-size: 0.5rem;
  line-height: 0.75rem;
}
.button:global(.gallium):global(.night) .client .icon {
  margin: 0;
}
.button:global(.gallium):global(.night):global(.spottable):focus .client .label {
  color: #ffffff;
}
.button:global(.gallium):global(.night):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #8b7efe);
}
.button:global(.gallium):global(.night):global(.spottable):active .client {
  color: var(--agate-accent-color, #8b7efe);
}
.button:global(.gallium):global(.night):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #8b7efe);
}
.button:global(.silicon).key {
  height: 4.125rem;
  width: 4.125rem;
}
.button:global(.silicon) .bg {
  background-color: transparent;
  border: none;
  border-radius: 4.125rem;
}
.button:global(.silicon) .client {
  color: #000000;
}
.button:global(.silicon) .client .text {
  font-size: 1.75rem;
  line-height: 2.375rem;
}
.button:global(.silicon) .client .label {
  color: #777777;
  font-size: 0.5rem;
  line-height: 0.75rem;
}
.button:global(.silicon) .client .icon {
  margin: 0;
}
.button:global(.silicon):global(.spottable):focus .client .label {
  color: #ffffff;
}
.button:global(.silicon):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #ff2d55);
}
.button:global(.silicon):global(.spottable):active .client {
  color: var(--agate-accent-color, #ff2d55);
}
.button:global(.silicon):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #ff2d55);
}
.button:global(.silicon):global(.night).key {
  height: 4.125rem;
  width: 4.125rem;
}
.button:global(.silicon):global(.night) .bg {
  background-color: transparent;
  border: none;
  border-radius: 4.125rem;
}
.button:global(.silicon):global(.night) .client {
  color: #ffffff;
}
.button:global(.silicon):global(.night) .client .text {
  font-size: 1.75rem;
  line-height: 2.375rem;
}
.button:global(.silicon):global(.night) .client .label {
  color: #777777;
  font-size: 0.5rem;
  line-height: 0.75rem;
}
.button:global(.silicon):global(.night) .client .icon {
  margin: 0;
}
.button:global(.silicon):global(.night):global(.spottable):focus .client .label {
  color: #ffffff;
}
.button:global(.silicon):global(.night):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, #ff2d55);
}
.button:global(.silicon):global(.night):global(.spottable):active .client {
  color: var(--agate-accent-color, #ff2d55);
}
.button:global(.silicon):global(.night):global(.spottable):active .client .label {
  color: var(--agate-accent-color, #ff2d55);
}
.button:global(.titanium).key {
  height: inherit;
  width: inherit;
}
.button:global(.titanium) .bg {
  background-color: transparent;
  border: none;
  border-radius: inherit;
}
.button:global(.titanium) .client {
  color: inherit;
}
.button:global(.titanium) .client .text {
  font-size: inherit;
  line-height: inherit;
}
.button:global(.titanium) .client .label {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.button:global(.titanium) .client .icon {
  margin: 0;
}
.button:global(.titanium):global(.spottable):focus .client .label {
  color: inherit;
}
.button:global(.titanium):global(.spottable):active .bg {
  background-color: transparent;
  border-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.button:global(.titanium):global(.spottable):active .client {
  color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.button:global(.titanium):global(.spottable):active .client .label {
  color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.keypadInput.decorator:global(.carbon) {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.carbon) .input {
  border-bottom: inherit;
  color: inherit;
  font-size: inherit;
  opacity: inherit;
}
.keypadInput.decorator:global(.carbon):global(.spottable):focus {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.cobalt) {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.cobalt) .input {
  border-bottom: inherit;
  color: inherit;
  font-size: inherit;
  opacity: inherit;
}
.keypadInput.decorator:global(.cobalt):global(.spottable):focus {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.cobalt):global(.night) {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.cobalt):global(.night) .input {
  border-bottom: inherit;
  color: inherit;
  font-size: inherit;
  opacity: inherit;
}
.keypadInput.decorator:global(.cobalt):global(.night):global(.spottable):focus {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.copper) {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.copper) .input {
  border-bottom: inherit;
  color: inherit;
  font-size: inherit;
  opacity: inherit;
}
.keypadInput.decorator:global(.copper):global(.spottable):focus {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.copper):global(.night) {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.copper):global(.night) .input {
  border-bottom: inherit;
  color: inherit;
  font-size: inherit;
  opacity: inherit;
}
.keypadInput.decorator:global(.copper):global(.night):global(.spottable):focus {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.electro) {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.electro) .input {
  border-bottom: inherit;
  color: inherit;
  font-size: inherit;
  opacity: inherit;
}
.keypadInput.decorator:global(.electro):global(.spottable):focus {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.gallium) {
  box-shadow: none;
}
.keypadInput.decorator:global(.gallium) .input {
  border-bottom: none;
  color: #000000;
  font-size: 2.5rem;
  opacity: 1;
}
.keypadInput.decorator:global(.gallium):global(.spottable):focus {
  box-shadow: none;
}
.keypadInput.decorator:global(.gallium):global(.night) {
  box-shadow: none;
}
.keypadInput.decorator:global(.gallium):global(.night) .input {
  border-bottom: none;
  color: #ffffff;
  font-size: 2.5rem;
  opacity: 1;
}
.keypadInput.decorator:global(.gallium):global(.night):global(.spottable):focus {
  box-shadow: none;
}
.keypadInput.decorator:global(.silicon) {
  box-shadow: none;
}
.keypadInput.decorator:global(.silicon) .input {
  border-bottom: none;
  color: #000000;
  font-size: 2.5rem;
  opacity: 1;
}
.keypadInput.decorator:global(.silicon):global(.spottable):focus {
  box-shadow: none;
}
.keypadInput.decorator:global(.silicon):global(.night) {
  box-shadow: none;
}
.keypadInput.decorator:global(.silicon):global(.night) .input {
  border-bottom: none;
  color: #ffffff;
  font-size: 2.5rem;
  opacity: 1;
}
.keypadInput.decorator:global(.silicon):global(.night):global(.spottable):focus {
  box-shadow: none;
}
.keypadInput.decorator:global(.titanium) {
  box-shadow: inherit;
}
.keypadInput.decorator:global(.titanium) .input {
  border-bottom: inherit;
  color: inherit;
  font-size: inherit;
  opacity: inherit;
}
.keypadInput.decorator:global(.titanium):global(.spottable):focus {
  box-shadow: inherit;
}
