/*
 * Segmented "mode switcher" control shared between the landing UULE
 * generator (app/assets/javascripts/components/uule_generator.jsx) and
 * tab navs (e.g. app/views/admin/users/show.html.erb).
 */


.mode-switcher {
  background-color: var(--light-gray-color);
  border: 1px solid var(--medium-gray-color);
  border-radius: 10px;
}

.mode-switcher-option {
  cursor: pointer;
  border-radius: 6px;
  color: inherit;
  background-color: transparent;
  border: 0;
  font: inherit;
}

.mode-switcher-option.active {
  background-color: var(--blue-color);
  color: #fff;
}