//
//  DIALTONE
//  COMPONENTS: Keyboard Shortcut
//
//  These are the styles for Keyboard Shortcut component.
//
//  TABLE OF CONTENTS
//  • BASE STYLE
//
//  ============================================================================
//  $   BASE STYLE
//  ----------------------------------------------------------------------------
.d-keyboard-shortcut {
  display: inline-flex;
  gap: var(--dt-space-200);
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding-inline: var(--dt-space-350);
  font: var(--dt-typography-body-sm);
  line-height: var(--dt-font-line-height-400);
  min-inline-size: 1lh;
  border: var(--dt-size-100) solid;
  border-color: var(--dt-color-border-default);
  border-radius: var(--dt-size-radius-300);
  font-variant-numeric: tabular-nums;

  &--inverted {
    border-color: var(--dt-color-border-moderate-inverted);
  }

  /* Hiding class, making content visible only to screen readers but not visually */

  /* "sr" meaning "screen-reader" */

  /* https://css-tricks.com/inclusively-hidden/ */
  &--sr-only:not(:focus, :active) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
  }

  &__icon,
  &__item {
    min-height: 1lh;
    color: var(--dt-color-foreground-tertiary);

    &.d-icon--plus {
      color: var(--dt-color-foreground-muted);
    }

    &.d-icon--plus {
      color: var(--dt-color-foreground-muted);

      .d-keyboard-shortcut--inverted & {
        color: var(--dt-color-foreground-muted-inverted);
      }
    }

    &--inverted {
      color: var(--dt-color-foreground-secondary-inverted);
    }
  }
}