/* Hide element visually, keeping it focusable (with keyboard) and available for screen-readers */
.Card {
  /* Set color on root of component. It can be overridden after the @include */
  color: var(--colorsTextDefault, #141414);
  /* Make sure font-family goes across entire component */
  font-family: "Nunito Sans", sans-serif;
  background: var(--colorsSurfaceDefault, white);
  border-radius: 6px;
  color: var(--colorsTextDefault, #141414);
  font-size: 16px;
  line-height: normal;
  text-align: left;
}

/* Elevation */
.Card--raised {
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.1);
}

.Card--base {
  border: none;
}

/* Shape */
.Card--sharp {
  border-radius: 3px;
}

/* Hover State */
.Card--hoverable {
  cursor: pointer;
  display: block;
  text-decoration: none;
  transform: translateY(0);
  transition: box-shadow cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms, transform cubic-bezier(0.4, 0, 0.2, 1) 100ms 0ms;
}
.Card--hoverable:hover {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(20, 20, 20, 0.1);
}
.Card--hoverable.Card--raised:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(20, 20, 20, 0.1);
}

/* Active State */
.Card--active {
  box-shadow: 0 1px 2px rgba(34, 112, 238, 0.2);
}
.Card--active.Card--raised {
  box-shadow: 0 2px 8px rgba(34, 112, 238, 0.2);
  transform: translateY(-1px);
}
.Card--active.Card--base {
  box-shadow: inset 0 0 3px rgba(34, 112, 238, 0.2);
}

.Card--error {
  box-shadow: 0 1px 2px rgba(230, 55, 23, 0.2);
}
.Card--error.Card--raised {
  box-shadow: 0 2px 8px rgba(230, 55, 23, 0.2);
  transform: translateY(-1px);
}
.Card--error.Card--base {
  box-shadow: inset 0 0 4px rgba(230, 55, 23, 0.2);
}

/* Disabled State */
.Card--disabled {
  opacity: 0.6;
  pointer-events: none;
}

.Card--placeholder {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: background-color cubic-bezier(0.4, 0, 0.2, 1) 200ms 0ms;
}
.Card--placeholder:hover {
  background-color: var(--colorsSurfacePrimarySubdued, #e0f2ff);
  box-shadow: 0 0 0;
}
.Card--placeholder:hover.Card--error {
  background-color: var(--colorsSurfaceCriticalSubdued, #ffece9);
}
.Card--placeholder > .CardSection {
  flex-grow: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-style: dashed;
}
.column > .Card--placeholder {
  min-height: 100%;
}

.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=index.css.map */