/*TODO: Move this to the reset */
* {
  border-width: 0;
}
%frame-border-000 {
  /* same as decor-border-000 - but need to think about being able to import color on its own*/
  border-style: solid;
  // border-width: 0;
}
%frame-yellow-500 {
  @extend %frame-border-000;
  background-color: $ui-yellow-050;
  border-color: $ui-color-warning;
}
%frame-green-500 {
  @extend %frame-border-000;
  background-color: $ui-green-050;
  border-color: $ui-green-500;
  color: $ui-green-500;
}
%frame-gray-500 {
  @extend %frame-border-000;
  background-color: $ui-gray-050;
  border-color: $ui-gray-300;
  color: $ui-gray-400;
}
%frame-blue-600 {
  @extend %frame-border-000;
  background-color: $ui-blue-200;
  border-color: $ui-gray-400;
  color: $ui-blue-050;
}
%frame-blue-700 {
  @extend %frame-border-000;
  background-color: $ui-blue-400;
  border-color: $ui-blue-800;
  color: $ui-white;
}
%frame-blue-800 {
  @extend %frame-border-000;
  background-color: $ui-blue-500;
  border-color: $ui-blue-800;
  color: $ui-white;
}
%frame-blue-900 {
  @extend %frame-border-000;
  background-color: $ui-blue-700;
  border-color: $ui-blue-800;
  color: $ui-white;
}
%frame-red-300 {
  @extend %frame-border-000;
  background-color: $ui-white;
  border-color: $ui-red-500;
  color: $ui-red-500;
}
%frame-red-500 {
  @extend %frame-border-000;
  background-color: $ui-red-050;
  border-color: $ui-red-500;
  color: $ui-red-800;
}
%frame-red-600 {
  @extend %frame-border-000;
  background-color: $ui-red-200;
  border-color: $ui-gray-400;
  color: $ui-white;
}
%frame-red-700 {
  @extend %frame-border-000;
  background-color: $ui-red-500;
  border-color: $ui-red-800;
  color: $ui-white;
}
%frame-red-900 {
  @extend %frame-border-000;
  background-color: $ui-red-700;
  border-color: $ui-red-800;
  color: $ui-white;
}
%frame-magenta-300 {
  @extend %frame-border-000;
  background-color: $ui-white;
  border-color: $brand-magenta-600;
  color: $brand-magenta-600;
}
