.schema {
  background-color: var(--blue);
  color: white;
}

/* .schema.focused,
.schema:has(.focused),
.schema:has(.focusable:hover) {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
} */

.schema-title {
  font-size: 1.5rem;
}

.entity {
  background-color: var(--light-blue);
  color: black;
}

/* .entity.focused,
.entity:has(.focused),
.entity:has(.focusable:hover) {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
} */

.entity-title {
  font-size: 1.25rem;
}

.entity,
.schema {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.5rem 0 0.5rem 0.5rem;
}

.attribute {
  padding: 0.1rem 0.5rem 0.1rem 0.35rem;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* .attribute.focused,
.attribute:has(.focused),
.attribute:has(.focusable:hover) {
  border-top-left-radius: 1rem;
  border-bottom-left-radius: 1rem;
} */

.focused {
  background-color: var(--yellow);
  color: black;
}

.focusable {
  cursor: pointer;
}

.attr-icon-0:after {
  content: "question_mark";
}
.attr-icon-1:after {
  content: "quick_reference_all";
}
.attr-icon-2:after {
  content: "123";
}
.attr-icon-3:after {
  content: "tag";
}
.attr-icon-4:after {
  content: "text_fields";
}
.attr-icon-5:after {
  content: "text_fields";
}
.attr-icon-6:after {
  content: "timer_10";
}
.attr-icon-7:after {
  content: "rule";
}
.attr-icon-8:after {
  content: "calendar_today";
}
.attr-icon-9:after {
  content: "schedule";
}
.attr-icon-10:after {
  content: "calendar_clock";
}
.attr-icon-11:after {
  content: "speed_1_5";
}
.attr-icon-12:after {
  content: "speed_1_5";
}
.attr-icon-13:after {
  content: "speed_1_5";
}
.attr-icon-14:after {
  content: "attach_money";
}