@use '@growi/core/scss/bootstrap/init' as bs;

// input styles
.grw-global-search :global {
  .dropdown-toggle {
    min-width: 95px;
    padding-left: 1.5rem;
  }

  .search-typeahead {
    .rbt-menu {
      right: 0;
      left: auto;

      @include bs.media-breakpoint-up(md) {
        right: auto;
        left: 0;
      }

      @include bs.media-breakpoint-down(sm) {
        left: auto !important;
        width: 90vw;
      }
    }
  }

  // using react-bootstrap-typeahead
  // see: https://github.com/ericgio/react-bootstrap-typeahead
  .rbt-input.form-control {
    height: 30px;
    .rbt-input-wrapper {
      margin-left: 8px;
    }
  }

  .grw-shortcut-key-indicator {
    position: absolute;
    top: 0;
    right: 4px;

    display: flex;
    align-items: center;
    height: 30px;

    code {
      padding-right: 0.4rem;
      padding-left: 0.4rem;
    }
  }
}