@value keyboard-height from '../lib/definitions.module.css';
@value small-and-up from '../lib/definitions.module.css';

.keyRows {
  user-select: none;

  overflow: hidden;
  display: block;

  width: 100%;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  height: keyboard-height;
  padding: 4px;
  border-radius: 5px;

  font-family:
    HelveticaNeue-Light, 'Helvetica Neue Light', 'Helvetica Neue', Helvetica,
    Arial, 'Lucida Grande', sans-serif;

  background: var(--kb-bg);
}

.keyRows[data-toggled='true'] {
  display: none;
}

/* Our attempt to detect a physical keyboard */
@media (hover: hover) and (pointer: fine) {
  .keyRows {
    display: none;
  }

  .keyRows[data-toggled='true'] {
    display: block;
  }
}

.keyRow {
  display: flex;
  padding-top: 10px;
}

.key {
  cursor: pointer;

  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;

  height: 40px;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--key-ul);
  border-radius: 5px;

  font-size: 100%;
  color: var(--black);

  background: var(--key-bg);
  box-shadow: 0 0 3px -1px rgb(0 0 0 / 30%);

  -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
}

.key[data-only-on-tablet='true'] {
  display: none;
}

.key[data-large-size='true'] {
  flex: 1.6 1 0;
}

.key[data-small-size='true'] {
  flex: 0.5 1 0;
}

.key[data-small-font='true'] {
  font-size: 90%;
}

.key:focus {
  outline: none;
}

.key:not(:last-child) {
  margin-right: 5px;
}

.key:active {
  background: var(--key-bg-click);
}

/* stylelint-disable-next-line media-feature-name-no-unknown */
@media (small-and-up) {
  .key[data-only-on-tablet='true'] {
    display: flex;
  }

  .key[data-not-on-tablet='true'] {
    display: none;
  }
}

.block {
  border: 1px solid black;
  background: repeating-linear-gradient(
    -45deg,
    black,
    black 10px,
    var(--primary) 10px,
    var(--primary) 20px
  ) !important;
}
