/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.CardSection {
  border: 1px solid var(--colorsBorderGrey, #dfe0e1);
  padding: 24px;
  /* Remove bottom border for stacked sections */
  border-bottom-width: 0;
  /* Adjust border for base cards */
  /* Adjust padding for thin cards */
  /* Active State */
  /* Error State */
  /* Make sure border-radius matches .Card parent */
  /* stylelint-disable no-descending-specificity */
  /* stylelint-enable */
}
.Card--base > .CardSection {
  border-left-width: 0;
  border-right-width: 0;
}
.Card--base > .CardSection:first-child {
  border-top-width: 0;
}
.Card--base > .CardSection:last-child {
  border-bottom-width: 0;
}
.Card--thin > .CardSection {
  padding: 16px;
}
.Card--no-padding > .CardSection {
  padding: 0;
}
.Card--active > .CardSection {
  border-left-color: var(--colorsBorderPrimary, #0265dc);
  border-right-color: var(--colorsBorderPrimary, #0265dc);
}
.Card--active > .CardSection:first-child {
  border-top-color: var(--colorsBorderPrimary, #0265dc);
}
.Card--active > .CardSection:last-child {
  border-bottom-color: var(--colorsBorderPrimary, #0265dc);
}
.Card--error > .CardSection {
  border-left-color: var(--colorsBorderCritical, #e13212);
  border-right-color: var(--colorsBorderCritical, #e13212);
}
.Card--error > .CardSection:first-child {
  border-top-color: var(--colorsBorderCritical, #e13212);
}
.Card--error > .CardSection:last-child {
  border-bottom-color: var(--colorsBorderCritical, #e13212);
}
.CardSection:first-child {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.Card--sharp > .CardSection:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.CardSection:last-child {
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  border-bottom-width: 1px;
}
.Card--sharp > .CardSection:last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* Colors */
/* Text color */
.Card--dark > .CardSection:not(.CardSection--light):not(.CardSection--lightblue),
.CardSection--dark,
.CardSection--blue,
.CardSection--purple,
.CardSection--green,
.CardSection--red {
  color: #ffffff;
}

/* Background and border colors */
.Card--light > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue),
.CardSection--light {
  background: #fafafa;
}

.Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue),
.CardSection--dark {
  /* Make sure CardSections with color don't inherit the active border */
}
.Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue), .Card--active > .Card--dark > .CardSection:not(.CardSection--blue):not(.CardSection--dark):not(.CardSection--green):not(.CardSection--light):not(.CardSection--purple):not(.CardSection--red):not(.CardSection--lightblue).CardSection,
.CardSection--dark,
.Card--active > .CardSection--dark.CardSection {
  background: #040404;
  border-color: #040404;
}

.CardSection--blue {
  /* Make sure CardSections with color don't inherit the active border */
}
.CardSection--blue, .Card--active > .CardSection--blue.CardSection {
  background: #0265dc;
  border-color: #0265dc;
}

.CardSection--purple {
  /* Make sure CardSections with color don't inherit the active border */
}
.CardSection--purple, .Card--active > .CardSection--purple.CardSection {
  background: #6954c0;
  border-color: #6954c0;
}

.CardSection--green {
  /* Make sure CardSections with color don't inherit the active border */
}
.CardSection--green, .Card--active > .CardSection--green.CardSection {
  background: #007a4d;
  border-color: #007a4d;
}

.CardSection--red {
  /* Make sure CardSections with color don't inherit the active border */
}
.CardSection--red, .Card--active > .CardSection--red.CardSection {
  background: #f94d32;
  border-color: #f94d32;
}

.CardSection--lightblue {
  /* Make sure CardSections with color don't inherit the active border */
}
.CardSection--lightblue, .Card--active > .CardSection--lightblue.CardSection {
  background: #b5deff;
  border-color: #b5deff;
}

/*# sourceMappingURL=CardSection.css.map */