/* Colors
================================================== */
/* Color schemes
================================================= */
/* Light
-------------------------------------------- */
.light-version a, .light-version a:visited {
  color: var(--color-blue);
}
.light-version ::placeholder {
  color: #000;
  opacity: 1;
}

/* Dark
-------------------------------------------- */
.dark-version {
  color: #FFF;
}
.dark-version * {
  color: #FFF;
}
.dark-version a {
  color: #FFF;
}
@media (hover: hover) {
  .dark-version a:hover {
    color: var(--color-blue);
  }
}
.dark-version .fieldstyle {
  background-color: var(--color-black);
}
.dark-version ::-webkit-input-placeholder {
  color: #FFF;
}
.dark-version :-moz-placeholder {
  color: #FFF;
}
.dark-version ::-moz-placeholder {
  color: #FFF;
}
.dark-version :-ms-input-placeholder {
  color: #FFF;
}

/* Reusable swatches
================================================== */
.background-color-blue {
  background-color: var(--color-blue);
}

.border-color-blue {
  border-color: var(--color-blue);
}

.color-blue {
  color: var(--color-blue);
}

/* Buttons
--------------------------------------------- */
.background-hover-color-blue:focus, .background-hover-color-blue:hover {
  background-color: var(--color-blue);
}

.border-hover-color-blue:focus, .border-hover-color-blue:hover {
  border-color: var(--color-blue);
}

.button-hover-color-blue:focus, .button-hover-color-blue:hover {
  color: var(--color-blue);
}

.background-color-black {
  background-color: var(--color-black);
}

.border-color-black {
  border-color: var(--color-black);
}

.color-black {
  color: var(--color-black);
}

/* Buttons
--------------------------------------------- */
.background-hover-color-black:focus, .background-hover-color-black:hover {
  background-color: var(--color-black);
}

.border-hover-color-black:focus, .border-hover-color-black:hover {
  border-color: var(--color-black);
}

.button-hover-color-black:focus, .button-hover-color-black:hover {
  color: var(--color-black);
}

.background-color-background-grey {
  background-color: #f5f5f5;
}

.border-color-background-grey {
  border-color: #f5f5f5;
}

.color-background-grey {
  color: #f5f5f5;
}

/* Buttons
--------------------------------------------- */
.background-hover-color-background-grey:focus, .background-hover-color-background-grey:hover {
  background-color: #f5f5f5;
}

.border-hover-color-background-grey:focus, .border-hover-color-background-grey:hover {
  border-color: #f5f5f5;
}

.button-hover-color-background-grey:focus, .button-hover-color-background-grey:hover {
  color: #f5f5f5;
}

.background-color-white {
  background-color: #fff;
}

.border-color-white {
  border-color: #fff;
}

.color-white {
  color: #fff;
}

/* Buttons
--------------------------------------------- */
.background-hover-color-white:focus, .background-hover-color-white:hover {
  background-color: #fff;
}

.border-hover-color-white:focus, .border-hover-color-white:hover {
  border-color: #fff;
}

.button-hover-color-white:focus, .button-hover-color-white:hover {
  color: #fff;
}