.root {
  position: relative;
  font-size: var(--fontSize);
  font-family: var(--fontFamily);
  font-weight: var(--fontWeight);
  color: var(--color);
  background: var(--background);
  padding: var(--padding);
  box-sizing: border-box;
  line-height: var(--lineHeight);
}

.oppNameAndTitle {
  max-width: 16.5rem;
}
.oppName {
  box-sizing: border-box;
  min-width: 1px;
  flex: 1;
  padding-top: var(--namePaddingTop);
  text-transform: uppercase;
  letter-spacing: 0.0625rem;
  color: var(--secondaryColor);
  font-size: var(--nameFontSize);
  margin-right: var(--closeButtonIconSize);
}

.title {
  margin-bottom: var(--titleMargin);
}

.close {
  position: absolute;
  top: 0;
  offset-inline-end: 0;
}

.oppName,
.title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

.footer {
  box-sizing: border-box;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-inline-end: var(--footerPadding);
}

.status {
  box-sizing: border-box;
  min-width: 1px;
  flex-grow: 1;
  padding-inline-end: var(--statusPadding);
}

.points {
  box-sizing: border-box;
  min-width: 1px;
  flex-shrink: 0;
  text-align: end;
  color: var(--secondaryColor);
  text-transform: uppercase;
  font-size: var(--pointsFontSize);
  line-height: var(--pointsLineHeight);
}

.pointsNumber {
  display: block;
  font-size: var(--pointsNumberFontSize);
}

.due {
  margin-top: var(--dueMargin);
  font-size: var(--dueFontSize);
  color: var(--secondaryColor);
}

.dueText {
  font-weight: var(--dueTextFontWeight);
}