@import "../../__stories__/general-hooks-stories";
@import "../../../styles/states";
@import "../../../styles/typography";
@import "../../../styles/global-css-settings";

.use-grid-keyboard-nav-comp-wrapper {
  padding: 24px;
  display: flex;
  flex-wrap: wrap;
  outline: none;
  text-align: center;
}

.use-grid-keyboard-nav-item {
  width: 60px;
  margin: $spacing-xs-small;

  &.active-item {
    @include focus-style-css();
  }
}

.use-grid-keyboard-nav-controls {
  display: flex;

  & :not(:first-child) {
    margin-left: var(--spacing-medium);
  }

  input {
    width: 60px;
  }
}
