:root {---kb_width: 80%; ---kb_height: 50rem}

/*Keyboard*/ [efy_keyboard] {display: none; gap: var(---gap-x); flex-wrap: wrap; flex-direction: column; padding: var(---gap-x); margin: 0 auto var(---gap) auto;
  border: var(---border); border-radius: var(---radius-o); box-shadow: 0 0 20rem #0003; max-width: var(---kb_width);
  .row {display: flex; gap: var(---gap-x)}
  [efy_key] {background: var(---card); -webkit-text-fill-color: var(---text); width: var(---kb_key_size); height: var(---kb_height); margin: 0; user-select: none;
    gap: 8rem; flex: 1;
    &:not(.efy_hide) {display: flex}
    * {pointer-events: none}
    i {margin: 0}
  }
  [efy_key="backspace"], [efy_key="delete"], [efy_key="enter"], [efy_key="caps"] {flex: 2}
  [efy_key=space] {flex: 6.5}
  [efy_key="ctrl"], [efy_key="alt"], [efy_key="super"], [efy_key="shortcuts"], [efy_key="up"], [efy_key="down"] {opacity: 0.2; pointer-events: none}
  [efy_key="caps"].efy_active { &, &:focus {background: var(---color); background-origin: border-box; -webkit-text-fill-color: var(---bg)}}
}

[efy_kb] [efy_keyboard] {display: flex}
[efy_outline] [efy_keyboard] :is([efy_key], [efy_key]:focus) {outline-offset: 0!important}
[efy_kb] [efy_sidebar_btn="absolute"] {display: none}