/*
 * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
 */

@import "../../common/variables";
@import "../../common/mixins";

$kbd-key-size: 25px !default;
$modifier-key-padding: 3px 8px 3px 6px !default;

.pt-key {
  display: inline-block;
  border-radius: $pt-border-radius - 1;
  box-shadow: $pt-elevation-shadow-2;
  background: $white;
  min-width: $kbd-key-size;
  height: $kbd-key-size;
  padding: 3px 5px;
  vertical-align: middle;
  text-align: center;
  line-height: $pt-grid-size * 2;
  color: $pt-text-color-muted;
  font-family: $pt-font-family;
  font-size: $pt-font-size-small;

  &.pt-modifier-key {
    padding: $modifier-key-padding;

    .pt-icon-standard {
      margin-right: $pt-grid-size / 2;
    }
  }

  .pt-dark & {
    box-shadow: $pt-dark-elevation-shadow-2,
                inset 0 1px 0 rgba($white, 0.05);
    background: $dark-gray5;
    color: $pt-dark-text-color-muted;
  }
}

.pt-key-combo .pt-key:not(:last-child) {
  margin-right: $pt-grid-size / 2;
}

.pt-hotkey-dialog {
  top: $pt-grid-size * 4;
  padding-bottom: 0;

  .pt-dialog-body {
    margin: 0;
    padding: 0;
  }

  .pt-key-combo {
    flex: 1 0 auto;
    width: $pt-grid-size * 16;
    text-align: right;
  }
}

.pt-hotkey-column {
  margin: auto;
  max-height: 80vh;
  overflow-y: auto;
  padding: $pt-grid-size * 3;

  .pt-hotkey-group {
    margin-bottom: $pt-grid-size * 3;

    &:not(:first-child) {
      margin-top: $pt-grid-size * 5;
    }
  }
}

.pt-hotkey {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-right: 0;
  margin-left: 0;

  &:not(:last-child) {
    margin-bottom: $pt-grid-size;
  }
}