.ui-bg {
  &__border {
    &--bt {
      border-top: 1px solid ui-color(gray-medium);
      border-bottom: 1px solid ui-color(gray-medium);
    }

    &--b {
      border-bottom: 1px solid ui-color(gray-medium);
    }

    &--t {
      border-top: 1px solid ui-color(gray-medium);
    }
  }

  &__paper {
    // Paper next to eachother gets a border
    & + & {
      border-top: 1px solid ui-color(gray-medium);
    }

    &--supreme {
      background: ui-color(white);
    }
    &--lightest {
      background: ui-color(white);
    }
    &--light {
      background: ui-color(white);
    }
    &--medium {
      background: ui-color(white);
    }
    &--dark {
      background: ui-color(white);
    }
    &--darkest {
      background: ui-color(white);
    }

    &--frosted {
      background: rgba(ui-color(white), 0.9);
      backdrop-filter: blur(10px);

      &-dark {
        background: rgba(ui-color(blue), 0.6);
      }
    }
  }

  &__charcoal {
    &--lightest {
      background: ui-color(blue);
    }
    &--light {
      background: ui-color(blue);
    }
    &--medium {
      background: ui-color(blue);
    }
    &--dark {
      background: ui-color(blue);
    }
    &--darkest {
      background: ui-color(blue);
    }
  }

  &__charcoal-ink {
    &--lightest {
      background: ui-color(white);
    }
    &--light {
      background: ui-color(white);
    }
    &--medium {
      background: ui-color(gray-medium);
    }
    &--dark {
      background: ui-color(gray-medium);
    }
    &--darkest {
      background: ui-color(gray-medium);
    }
  }

  &__red {
    &--dark {
      background: ui-color(alert);
    }
    &--medium {
      background: ui-color(alert);
    }
    &--light {
      background: ui-color(alert);
    }
  }

  &__orange {
    &--medium {
      background: ui-color(blue);
    }

    &--darkest {
      background: ui-color(coral);
    }
    &--soft-transparency {
      background: rgba(
        ui-color(coral),
        0.8
      ); // orange-darkest, 0.8 transparency
    }

    &--gradient {
      background: ui-color(coral);
    }
  }

  &__opaque {
    &-black {
      &--1 {
        background: rgba(ui-color(blue), 0.1);
      }
      &--2 {
        background: rgba(ui-color(blue), 0.2);
      }
    }
  }
}