:host {
  display: block;
  width: 100%;
  box-sizing: border-box;

  .keyboard-shortcuts-dialog-content {
    max-width: 500px;
    width: 100%;
    box-sizing: border-box;
    padding: var(--s2) var(--s2) var(--s);

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

.shortcuts-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s);

  th {
    padding: var(--s) var(--s-half);
    font-weight: var(--font-weight-semibold);
    text-align: left;
    color: var(--text-color-muted);
    border-bottom: 2px solid var(--divider-color);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-tight);
  }

  td {
    padding: var(--s2) var(--s-half);
    vertical-align: middle;
    border-bottom: 1px solid var(--divider-color);
  }

  tbody tr:last-child td {
    border-bottom: none;
  }

  .action-name {
    text-align: left;
    color: var(--text-color);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
  }

  .shortcut-cell {
    text-align: right;
    color: var(--text-color-muted);
    font-size: var(--font-size-sm);
    white-space: nowrap;
  }

  .shortcut-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-mono-stack);
    font-weight: var(--font-weight-semibold);
    color: var(--text-color-most-intense);
    background: var(--bg-lighter);
    padding: var(--s-half) var(--s-half);
    border: 1px solid var(--divider-color);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    font-size: var(--font-size-xs);
    margin: 0 var(--s);
    min-width: var(--s3);
  }
}

@media (max-width: 25rem) {
  :host .keyboard-shortcuts-dialog-content {
    padding: var(--s) var(--s) var(--s);
  }
}
