/*
 * Crea una propiedad con prefijos de navegador
 */
$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
@mixin vendor-prefix($property, $definition...) {
  @each $prefix in $vendor-prefixes {
    #{$prefix}$property: $definition;
  }
}

/*
 * Crea clases para asignar colores según la lista de colores.
 */
@each $color, $_ in $colors {
  .background-#{$color} {
    background-color: var(--#{$color});
  }

  .#{$color} {
    color: var(--#{$color});

    ::-moz-selection,
    ::selection {
      background: var(--#{$color});
      color: white;
    }

    svg {
      * {
        fill: var(--#{$color});
      }
    }

    .form-control {
      border-color: var(--#{$color});
    }

    .btn {
      background-color: var(--#{$color});
      color: white;
      border-color: var(--#{$color});
    }

    hr {
      border-color: var(--#{$color});
    }

    a {
      color: var(--#{$color});
    }
  }
}