/* Styles for the workstations search view (app.workstation.search). As a route view, not a component, every rule hangs from the
   '.workstation-search' root class to scope it and to outweigh generic classes on the same element. */

.workstation-search .workstation-search__title {
  margin-bottom: var(--md-spacing-sm);
}

/* Two columns: search form and shortcuts; the shortcuts wrap below the form on narrow screens */
.workstation-search .workstation-search__layout {
  display: flex;
  flex-wrap: wrap;
  align-self: stretch;
  gap: var(--md-spacing-xl);
  max-width: var(--md-max-width-xl);
}

.workstation-search .workstation-search__main,
.workstation-search .workstation-search__shortcuts {
  display: flex;
  flex-direction: column;
  gap: var(--md-spacing-xs);
}

/* no token: column widths of the search layout */
.workstation-search .workstation-search__main {
  flex: 2 0 0;
  min-width: 400px;
  max-width: 700px;
}

.workstation-search .workstation-search__shortcuts {
  flex: 1 0 0;
  min-width: 200px;
  max-width: 424px;
}

.workstation-search .workstation-search__subtitle {
  margin: var(--md-spacing-none);
}

/* Icon of the search input */
.workstation-search .workstation-search__search-icon {
  font-size: var(--md-font-size-4);
}

/* Buttons of the search form */
.workstation-search .workstation-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--md-spacing-3xs);
}