@import '../config/import';

.crayons-card {
  border-radius: var(--radius-auto);
  background: var(--card-bg);
  color: var(--card-color);
  box-shadow: 0 0 0 1px var(--card-secondary-border);
  // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
  overflow-wrap: break-word;
  overflow-wrap: anywhere;

  &--secondary {
    background: var(--card-bg);
    color: var(--card-secondary-color);
    box-shadow: 0 0 0 1px var(--card-secondary-border);
  }

  &--elevated {
    box-shadow: var(--shadow-1);
  }

  &--content-rows {
    padding: var(--su-4);
    margin-bottom: var(--su-4);
    grid-gap: var(--su-4);
    display: grid;

    @media (min-width: $breakpoint-m) {
      padding: var(--su-6);
      margin-bottom: var(--su-6);
      grid-gap: var(--su-6);
    }
  }

  &__header {
    padding: var(--su-3) var(--su-4);
    border-bottom: 1px solid var(--body-bg);
  }

  &__body {
    padding: var(--su-4);
  }
}

.c-card {
  --revealable-opacity: var(--opacity-100);
  @media (hover: hover) {
    --revealable-opacity: var(--opacity-0);
  }

  border-radius: var(--radius-auto);
  background: var(--card-bg);
  box-shadow: 0 0 0 1px var(--card-border);

  // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
  overflow-wrap: break-word;
  overflow-wrap: anywhere;

  &__revealable {
    opacity: var(--revealable-opacity);
  }

  &--interactive {
    &:hover,
    &:focus-within {
      --card-border: var(--base-90);
      --card-bg: var(--card-secondary-bg);
      --revealable-opacity: var(--opacity-100);
    }
  }
}
