/*
 * Copyright (c) Saga Inc.
 * Distributed under the terms of the GNU Affero General Public License v3.0 License.
 */

/* 
    Classes that can be used for any button, making it easier to keep 
    the theme consistent. For example, use them to make a textButton or
    textAndIconButton green.
*/

.button-base {
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 14px;
  /* Make sure the button grows large enough so that the text does not wrap */
  white-space: nowrap;
  padding: 5px 10px;
}

.button-green {
  background-color: var(--green-400);
  color: var(--green-900) !important;
}

.button-green:hover {
  background-color: var(--green-500);
}

.button-red {
  background-color: var(--red-400);
  color: var(--red-900) !important;
}

.button-red:hover {
  background-color: var(--red-500);
}

.button-gray {
  background-color: var(--jp-layout-color2);
  color: var(--jp-content-font-color1) !important;
}

.button-gray:hover {
  background-color: var(--jp-layout-color3);
}

.button-purple {
  background-color: var(--purple-300);
  color: var(--purple-700) !important;
}

.button-purple:hover {
  background-color: var(--purple-400);
}

.button-width-block {
  width: 100%;
}

.button-width-fit-contents {
  width: fit-content;
}

.button-small {
  height: 20px;
  font-size: 12px;
  padding: 2px 5px;
}