/* ==========================================================================
 * File Name:         Colour
 * Description:       List of all colour utility classes
 *
 * Editing:           To change colours and utility class names, go to
 *                    variables.scss and change the default values there or
 *                    override them in the designated space in berry.scss.
 *
 * DO NOT change the custom function in this file as doing so may affect
 * all class utility labels
 *
 * Credit: https://frontstuff.io/generate-all-your-utility-classes-with-sass-maps
 *
============================================================================= */

/*Text Color*/
.text-beet {
  color: #580C2D;
}
.text-acai {
  color: #B43D76;
}
.text-rose {
  color: #F098A4;
}
.text-kale {
  color: #617C2D;
}
.text-avocado {
  color: #89924F;
}
.text-lettuce {
  color: #c8dcb7;
}
.text-tomatoe {
  color: #EC5B2C;
}
.text-orange {
  color: #EF993A;
}
.text-lemon {
  color: #f9e753;
}
.text-deepwater {
  color: #2B547B;
}
.text-hydrangea {
  color: #6CB0DA;
}
.text-wave {
  color: #C1CFD9;
}

.text-mute {
  color: #F9F7EF;
}
.text-dark {
  color: #1E1C1B;
}

/*Background Color*/
.bkgd-beet {
  background-color: #580C2D;
}
.bkgd-acai {
  background-color: #B43D76;
}
.bkgd-rose {
  background-color: #F098A4;
}
.bkgd-kale {
  background-color: #617C2D;
}
.bkgd-avocado {
  background-color: #89924F;
}
.bkgd-lettuce {
  background-color: #c8dcb7;
}
.bkgd-tomatoe {
  background-color: #EC5B2C;
}
.bkgd-orange {
  background-color: #EF993A;
}
.bkgd-lemon {
  background-color: #f9e753;
}
.bkgd-deepwater {
  background-color: #2B547B;
}
.bkgd-hydrangea {
  background-color: #6CB0DA;
}
.bkgd-wave {
  background-color: #C1CFD9;
}

.bkgd-gray {
  background-color: #D5D4CF;
}
.bkgd-peach {
  background-color: #F8E9D9;
}
.bkgd-mute {
  background-color: #F9F7EF;
}
.bkgd-dark {
  background-color: #1E1C1B;
}

// Color Utility Class function

@each $color-name, $hex in $accent {
      .background-#{$color-name} {
        background-color: $hex;
        }

      .text-#{$color-name} {
          color: $hex;
          }
      }