/* 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%;
}

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