/* Common Buttons */
.button,
.intro--header a {
  background-color: transparent;
  color: #ec4a87;
  font-weight: 700;
  font-size: 1em;
  border: 1px solid #ec4a87;
  border-radius: 4px;
  padding: 0.4em 1em 0.4em 1em;
  cursor: pointer;
  margin: 0.2em 0.1em;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-block;
}

.button:hover,
.intro--header a:hover {
  background-color: #ec4a87;
  border-color: #ec4a87;
  color: white;
}

/* Event Tags */

.button--tag {
  color: white;
}

.button--tag.accent-color-01 {
  background-color: var(--accent-color-01);
  border-color: var(--accent-color-01);
  color: white;
}

.button--tag.accent-color-01:hover {
  background-color: transparent;
  border-color: #cccccc;
  color: #666666;
}

.button--tag.accent-color-01.disabled:hover {
  background-color: transparent;
  border-color: var(--accent-color-01);
  color: var(--accent-color-01);
}

.button--tag.accent-color-02 {
  background-color: var(--accent-color-02);
  border-color: var(--accent-color-02);
  color: white;
}

.button--tag.accent-color-02:hover {
  background-color: transparent;
  border-color: #cccccc;
  color: #666666;
}

.button--tag.accent-color-02.disabled:hover {
  background-color: transparent;
  border-color: var(--accent-color-02);
  color: var(--accent-color-02);
}

.button--tag.accent-color-03 {
  background-color: var(--accent-color-03);
  border-color: var(--accent-color-03);
  color: white;
}

.button--tag.accent-color-03:hover {
  background-color: transparent;
  border-color: #cccccc;
  color: #666666;
}

.button--tag.accent-color-03.disabled:hover {
  background-color: transparent;
  border-color: var(--accent-color-03);
  color: var(--accent-color-03);
}

.button--tag.accent-color-04 {
  background-color: var(--accent-color-04);
  border-color: var(--accent-color-04);
  color: white;
}

.button--tag.accent-color-04:hover {
  background-color: transparent;
  border-color: #cccccc;
  color: #666666;
}

.button--tag.accent-color-04.disabled:hover {
  background-color: transparent;
  border-color: var(--accent-color-04);
  color: var(--accent-color-04);
}

.button--tag.accent-color-05 {
  background-color: var(--accent-color-05);
  border-color: var(--accent-color-05);
  color: white;
}

.button--tag.accent-color-05:hover {
  background-color: transparent;
  border-color: #cccccc;
  color: #666666;
}

.button--tag.accent-color-05.disabled:hover {
  background-color: transparent;
  border-color: var(--accent-color-05);
  color: var(--accent-color-05);
}

.button--tag.accent-color-06 {
  background-color: var(--accent-color-06);
  border-color: var(--accent-color-06);
  color: white;
}

.button--tag.accent-color-06:hover {
  background-color: transparent;
  border-color: #cccccc;
  color: #666666;
}

.button--tag.accent-color-06.disabled:hover {
  background-color: transparent;
  border-color: var(--accent-color-06);
  color: var(--accent-color-06);
}

.button--tag.disabled {
  background-color: transparent;
  border-color: #cccccc;
  color: #666666;
}

/* Blog Keyword Buttons */

.button--keyword {
  border-color: #e5efff;
  background-color: #e5efff;
  color: #1a4b97;
  font-size: 0.8em;
  letter-spacing: 0.025em;
}

.button--keyword:hover {
  border-color: #ec4a87;
  background-color: transparent;
  color: #ec4a87;
}

/* Donation Button */

.button--donation {
  background-color: #f9323a;
  color: white;
  border: 1px solid #f9323a;
  padding: 0.4em 1em 0.4em 3em;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  position: relative;
  box-shadow: 0px 10px 14px -8px #b7b7b7;
}

.button--donation::before {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  left: 14px;
  background: url("../icons/icon-heart-white.svg");
  background-size: 100%;
}

.button--donation:hover {
  box-shadow: 0px 10px 20px -9px #474747;
}