.binding-modal {
  .binding {
    font-weight: bold;
    text-transform: capitalize;
  }

  .tools {
    display: grid;
    gap: 0.25em;
    grid-template-columns: repeat(auto-fill, minmax(7em, 1fr));
  }

  button {
    margin: 0;
    position: relative;
    text-align: left;

    span {
      left: 1.5em;
      position: absolute;
      top: 0.1em;
    }
  }

  /* dotted and dashed icons */
  svg {
    height: 1em !important;
  }

  /* halffill icon */
  button > div {
    display: inline;
    margin-right: 1.25em !important;
    top: 0.1em;
  }
}

.bindings {
  margin-bottom: 0.5em;

  .row {
    display: flex;

    &.left {
      justify-content: flex-end;
    }
  }

  .key {
    background-color: transparent;
    border: 2px solid #ccc;
    border-radius: 0.3em;
    box-sizing: content-box;
    height: 4.5rem;
    margin: 0.25em;
    padding: 0;
    position: relative;
    width: 4.5rem;

    &.held {
      background-color: #ddd8;
    }

    .letter {
      color: #777;
      font-size: 0.9em;
      left: 0.25em;
      position: absolute;
      text-transform: capitalize;
      top: 0.25em;
    }

    .action {
      bottom: 0.1rem;
      color: #444;
      font-size: 0.9em;
      position: absolute;
      right: 0.3rem;
      text-align: right;
      width: 4rem;
    }

    i {
      display: block;
      font-size: 1.1em;
      margin-bottom: 0.1em;
    }

    /* line icon */
    i.fa-minus {
      bottom: 1.1em;
      position: absolute;
      right: 0;
    }

    /* dotted and dashed icons */
    svg {
      bottom: 1.35em;
      position: absolute;
      right: 0;
    }

    /* halffill icon */
    .action > div {
      bottom: 1.7em !important;
      position: absolute !important;
      right: 0 !important;
    }

    .unassigned {
      color: #777;
      font-weight: normal;
    }
  }

  button.key:hover {
    background: #ddd;
  }
}
