/**
  * @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.
  **/

/** Because of padding on button, this helps protect that it stays within the bounds of the screen **/
.button-wrapper {
  width: calc(100% - 20px);
}

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

.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,
.button--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,
    .button--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,
    .button--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,
    .button--primary,
    .ui-dialog .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);
}

/** Red buttons for delete/cancel **/
.button--danger,
.dialog-cancel {
  width: max-content;
  border: 1px solid var(--laurier-red);
  border-radius: 5px;
  background-color: var(--laurier-red);
  color: var(--white);
  text-decoration: none;
}

:is(.button--danger, .dialog-cancel):is(:hover, :focus) {
  background-color: var(--white);
  color: var(--laurier-red);
}

/** Blue buttons used for resets and unlocks **/
.button[data-drupal-selector^="edit-reset"],
.button[data-drupal-selector^="edit-actions-unlock"] {
  top: 10px;
  border: 1px solid var(--laurier-blue);
  border-radius: 5px;
  background-color: var(--laurier-blue);
  color: var(--white);
  text-decoration: none;
}

.button[data-drupal-selector^="edit-reset"]:is(:hover, :focus, :active),
.button[data-drupal-selector^="edit-actions-unlock"]:is(
    :hover,
    :focus,
    :active
  ) {
  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);
}