$colors: (
  mint: $mint,
  light-mint: $light-mint,
  dark-mint: $dark-mint,
  white: $white,
  off-white: $off-white,
  light-grey: $light-grey,
  grey: $grey,
  charcoal: $charcoal,
  rose: $rose,
  honey: $honey,
  google-red: $google-red,
  facebook-blue: $facebook-blue,
  requested: $requested
);

//TEXT COLOURING
@each $color in map-keys($colors) {
  .text-#{$color} {
    color: map-get($colors, $color);
    &:focus, &:hover {
      border-color: map-get($colors, $color);
    }
  }
}

//PLACEHOLDER COLOURING
@each $color in map-keys($colors) {
  .placeholder-#{$color} {
    &::placeholder {
      color: map-get($colors, $color);
    }
  }
}

//Background Colouring
@each $color in map-keys($colors) {
  .bg-#{$color} {
      background-color: map-get($colors, $color);
  }
}

//Border Colouring
@each $color in map-keys($colors) {
  .border-#{$color} {
    border-style: solid;
    border-color: map-get($colors, $color);
    border-width: 2px;
    border-radius: 4px;
  }
}
.border-bottom-off-white {
  border-bottom: 1px solid $off-white;
}
.hover-honey {
  &:hover {
    color: $honey;
  }
}
.hover-mint {
  &:hover {
    color: $mint;
  }
}
.box-shadow-none {
  box-shadow: none !important;
}
.text-transparent {
  color: transparent !important;
}