/**
  * @file
  * Buttons as well as links made to appear like buttons.
  * Every button should have the class of "button" along with a class for a colour variation.
  *
  * Must be a higher level than the base links.
  **/

.button {
  padding: 5px 10px;
  margin-bottom: 0;
}

.button.bottom-margin-1 {
  margin-bottom: 1rem;
}

.button a,
.omni-button {
  display: flex;
  justify-content: center;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  padding: 10px 10px;
  text-decoration: none;
}

/** Green buttons. Used for "Go" actions like submitting. **/
.omni-button,
.btn-outline-primary,
.ui-dialog .btn-outline-primary,
.form-submit[type="submit"],
.button[data-drupal-selector="edit-submit-content-tables"] {
  top: 10px;
  border-radius: 5px;
  border-color: var(--laurier-green);
  background-color: var(--laurier-green);
  background-image: none;
  color: var(--white);
}

:is(
    .omni-button,
    .btn-outline-primary,
    .ui-dialog .btn-outline-primary,
    .form-submit[type="submit"],
    .button[data-drupal-selector="edit-submit-content-tables"]
  ):is(:hover, :focus) {
  border-color: var(--laurier-green);
  background-color: var(--white);
  color: var(--laurier-green);
}

:is(
    .omni-button,
    .btn-outline-primary,
    .ui-dialog .btn-outline-primary,
    .form-submit[type="submit"],
    .button[data-drupal-selector="edit-submit-content-tables"]
  )
  a {
  color: var(--white);
}

:is(
    .omni-button,
    .btn-outline-primary,
    .ui-dialog .btn-outline-primary,
    .form-submit[type="submit"],
    .button[data-drupal-selector="edit-submit-content-tables"]
  )
  a:is(:hover, :focus) {
  border: 1px solid var(--laurier-green);
  color: var(--green);
}

/** Blue buttons used for resets **/
.button[data-drupal-selector="edit-reset"] {
  top: 10px;
  border-radius: 5px;
  border-color: var(--laurier-blue);
  background-color: var(--laurier-blue);
  color: var(--white);
}

.button[data-drupal-selector="edit-reset"]:is(:hover, :focus, :active) {
  border-color: var(--laurier-blue);
  background-color: var(--white);
  color: var(--laurier-blue);
}

/** Gold buttons used often **/
.gold-button {
  margin-top: 10px;
  width: -moz-fit-content;
  width: fit-content;
}

.gold-button a {
  border-radius: 5px;
  border-color: var(--black);
  background-color: var(--laurier-gold);
  color: var(--black);
}

.gold-button a:is(:hover, :focus) {
  border-color: var(--laurier-purple);
  background-color: var(--laurier-purple);
  color: var(--white);
}

/** White-mauve used for key links (mostly external) **/
.white-mauve-button a {
  border: 2px solid var(--laurier-mauve);
  background-color: var(--white);
  color: var(--laurier-mauve);
}

.white-mauve-button a:is(:hover, :focus) {
  background-color: var(--laurier-mauve);
  color: var(--white);
}

/** White-purple used for links elsewhere on the site **/
.white-purple-button a {
  border: 2px solid var(--laurier-purple);
  background-color: var(--white);
  color: var(--laurier-purple);
}

.white-purple-button a:is(:hover, :focus) {
  background-color: var(--laurier-purple);
  color: var(--white);
}

/** Purple-white used for phone links **/
.purple-white-button a {
  border: 2px solid var(--white);
  background-color: var(--laurier-purple);
  color: var(--white);
}

.purple-white-button a:is(:hover, :focus) {
  border: 2px solid var(--laurier-purple);
  background-color: var(--white);
  color: var(--laurier-purple);
}

/** Purple-mauve used for email and Teams links **/
.purple-mauve-button a {
  border: 2px solid var(--laurier-purple);
  background-color: var(--laurier-purple);
  color: var(--white);
}

.purple-mauve-button a:is(:hover, :focus) {
  border: 2px solid var(--laurier-mauve);
  background-color: var(--laurier-mauve);
  color: var(--white);
}