/*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;
}
%frame-brand-300 {
  @extend %frame-border-000;
  background-color: $transparent;
  border-color: var(--decor-brand-600, inherit);
  color: var(--typo-brand-600, inherit);
}

/* possibly filter bar */
/* modal close button */
%frame-gray-050 {
  @extend %frame-border-000;
  background-color: $gray-050;
  border-color: $gray-300;
  color: $gray-400;
}
/* modal main content */
%frame-gray-100 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $gray-300;
  color: $gray-600; /*  wasn't set */
}
/* hover */
%frame-gray-200 {
  @extend %frame-border-000;
  background-color: $transparent;
  border-color: $gray-700;
  color: $gray-800;
}
%frame-gray-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $gray-700;
  color: $gray-800;
}
/* button */
/**/
%frame-gray-400 {
  @extend %frame-border-000;
  background-color: $gray-050;
  border-color: $gray-300;
  color: $gray-800;
}
%frame-gray-500 {
  @extend %frame-border-000;
  background-color: $gray-050;
  border-color: $gray-300;
  color: $gray-400;
}

/* tabs */
%frame-gray-600 {
  @extend %frame-border-000;
  background-color: $gray-100;
  border-color: $gray-500;
  color: $gray-500;
}
/* active */
%frame-gray-700 {
  @extend %frame-border-000;
  background-color: $gray-200;
  border-color: $gray-700;
  color: $gray-800;
}
/* modal bars */
%frame-gray-800 {
  @extend %frame-border-000;
  background-color: $gray-050;
  border-color: $gray-300;
  color: $gray-900;
}
%frame-gray-900 {
  @extend %frame-border-000;
  background-color: $gray-100;
  border-color: $gray-300;
  color: $gray-900;
}

%frame-yellow-500 {
  @extend %frame-border-000;
  background-color: $yellow-050;
  border-color: $color-warning;
}
%frame-yellow-800 {
  @extend %frame-border-000;
  background-color: $yellow-500;
  border-color: $yellow-800;
  color: $white;
}
%frame-green-500 {
  @extend %frame-border-000;
  background-color: $green-050;
  border-color: $green-500;
  color: $green-500;
}
%frame-green-800 {
  @extend %frame-border-000;
  background-color: $green-500;
  border-color: $green-800;
  color: $white;
}
%frame-blue-200 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $blue-300;
  color: $blue-300;
}
%frame-blue-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $blue-500;
  color: $blue-500;
}
%frame-blue-500 {
  @extend %frame-border-000;
  background-color: $blue-050;
  border-color: $blue-500;
  color: $blue-800;
}
%frame-blue-600 {
  @extend %frame-border-000;
  background-color: $blue-200;
  border-color: $gray-400;
  color: $blue-050;
}
%frame-blue-700 {
  @extend %frame-border-000;
  background-color: $blue-400;
  border-color: $blue-800;
  color: $white;
}
%frame-blue-800 {
  @extend %frame-border-000;
  background-color: $blue-500;
  border-color: $blue-800;
  color: $white;
}
%frame-blue-900 {
  @extend %frame-border-000;
  background-color: $blue-700;
  border-color: $blue-800;
  color: $white;
}
%frame-red-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $red-500;
  color: $red-500;
}
%frame-red-500 {
  @extend %frame-border-000;
  background-color: $red-050;
  border-color: $red-500;
  color: $red-800;
}
%frame-red-600 {
  @extend %frame-border-000;
  background-color: $red-200;
  border-color: $gray-400;
  color: $white;
}
%frame-red-700 {
  @extend %frame-border-000;
  background-color: $red-500;
  border-color: $red-800;
  color: $white;
}
%frame-red-800 {
  @extend %frame-border-000;
  background-color: $red-500;
  border-color: $red-800;
  color: $white;
}
%frame-red-900 {
  @extend %frame-border-000;
  background-color: $red-700;
  border-color: $red-800;
  color: $white;
}
%frame-magenta-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $magenta-600;
  color: $magenta-600;
}
%frame-magenta-800 {
  @extend %frame-border-000;
  background-color: $magenta-500;
  border-color: $magenta-800;
  color: $white;
}
%frame-steel-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $steel-600;
  color: $steel-600;
}
%frame-steel-800 {
  @extend %frame-border-000;
  background-color: $steel-500;
  border-color: $steel-800;
  color: $white;
}
%frame-cobalt-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $cobalt-600;
  color: $cobalt-600;
}
%frame-cobalt-800 {
  @extend %frame-border-000;
  background-color: $cobalt-500;
  border-color: $cobalt-800;
  color: $white;
}
%frame-indigo-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $indigo-600;
  color: $indigo-600;
}
%frame-indigo-800 {
  @extend %frame-border-000;
  background-color: $indigo-500;
  border-color: $indigo-800;
  color: $white;
}
%frame-teal-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $teal-600;
  color: $teal-600;
}
%frame-teal-800 {
  @extend %frame-border-000;
  background-color: $teal-500;
  border-color: $teal-800;
  color: $white;
}
%frame-cyan-300 {
  @extend %frame-border-000;
  background-color: $white;
  border-color: $cyan-600;
  color: $cyan-600;
}
%frame-cyan-800 {
  @extend %frame-border-000;
  background-color: $cyan-500;
  border-color: $cyan-800;
  color: $white;
}
