/**
* Elements
*/
/**
* Text
*/
/**
* Layouts
*/
.key-container.svelte-h40g4i {
  --button-color: var(--button-color-un-pressed);
  position: relative;
  display: flex;
  width: var(--layout-width);
  height: var(--layout-height);
  opacity: var(--un-pressed-opacity);
  font-weight: bold;
  font-variant: all-small-caps;
}
.key-container[data-pressed=true].svelte-h40g4i {
  --button-color: var(--button-color-pressed);
  opacity: 1;
}
.key-container.svelte-h40g4i .top-container:where(.svelte-h40g4i) {
  position: absolute;
  width: var(--top-width);
  height: var(--top-height);
}
.key-container.svelte-h40g4i .top-container:where(.svelte-h40g4i) .top-key-gfx:where(.svelte-h40g4i) {
  position: absolute;
}
.key-container.svelte-h40g4i .top-container:where(.svelte-h40g4i) .text:where(.svelte-h40g4i) {
  position: absolute;
  width: var(--top-width);
  height: var(--top-height);
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  font-size: 28rem;
}
.key-container.svelte-h40g4i .bottom-key-gfx:where(.svelte-h40g4i) {
  position: absolute;
}

.top-key-gfx.svelte-h40g4i {
  width: var(--width);
  height: var(--height);
}
.top-key-gfx.svelte-h40g4i svg {
  width: 100%;
  height: 100%;
  fill: var(--button-color);
  stroke: var(--border-color);
}

.bottom-key-gfx.svelte-h40g4i {
  width: var(--width);
  height: var(--height);
}
.bottom-key-gfx.svelte-h40g4i svg {
  width: 100%;
  height: 100%;
  fill: var(--button-color);
  stroke: var(--border-color);
}

.disabled.svelte-h40g4i {
  background-color: transparent;
  opacity: 0.5;
}

button:hover:enabled .top-container.svelte-h40g4i {
  --button-color: var(--color-buttonHover);
  transform: translateY(1rem);
}
button:hover:enabled .bottom-key-gfx.svelte-h40g4i {
  --button-color: var(--color-buttonHover);
}