@mixin action-keys-theme($theme) {
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $accent: map-get($theme, accent);
  $is-dark-theme: map-get($theme, is-dark);
  $accent-color: map-get($primary, 500);
  $back: map-get($background, background);

  .action-keys-wrapper {
    display: inline-block;
    padding-left: 0.5rem;
    margin-right: -0.5rem;

    &.without-margin {
      padding: 0;
      margin: 0.5rem;
    }

    .action-keys-row {
      display: flex;
      align-items: center;
      margin: 0 -4px;

      .action-key {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        height: 20px;
        width: 20px;
        position: relative;
        margin: 0 4px;

        &.esc {
          font-size: 9px;
        }

        .key-overlay {
          position: absolute;
          z-index: -1;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: map-get($primary, default-contrast);
          opacity: 0.2;
          border-radius: 4px;
        }

        .span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50% -50%);
          opacity: 1;
        }
      }
    }

    &.no-contrast-mode {
      .action-keys-row {
        .key-overlay {
          z-index: 0;
          background: if(sass($is-dark-theme): #fff; else: #000);
          opacity: 0.15;
        }
      }
    }
  }
}