@st-import [D56, G20, R20, G10, R10, D80] from "../Foundation/colors.st.css";

.root {
  display: flex;
  gap: 30px;
  flex-direction: row;
  align-items: stretch;
  margin-bottom: 54px;
}

.block {
  -st-states: skin(enum(green, red)), full;
  display: flex;
  flex-direction: column;
  width: 50%;
  background-color: value(D56);
  border: 1px solid #e5e5e5;
  padding: 18px 24px;
}

.block:skin(green) {
  border-top: 6px solid value(G20);
}

.block:skin(red) {
  border-top: 6px solid value(R20);
}

.block:full {
  width: 100%;
}

.title {
  -st-states: skin(enum(green, red));
  margin-bottom: 15px;
}

.title:skin(green) {
  color: value(G10);
}

.title:skin(red) {
  color: value(R10);
}

.list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.listItem {
  display: flex;
  align-items: flex-start;
}

.dismissContainer {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  display: flex;
  align-items: center;
  margin-top: 4px;
}

.dismissIcon {
  background-color: value(R10);
  border-radius: 50%;
  color: value(D80);
  width: 14px;
  height: 14px;
}

.completeIcon {
  display: flex;
  align-items: center;
  margin-top: 4px;
  margin-right: 8px;
  color: value(G10);
}