@use '../passage';
@use 'pix-design-tokens/typography';

$grain-card-border-radius: var(--pix-spacing-4x);

.grain {
  --modulix-summary-card-background: var(--pix-secondary-100);
  --modulix-challenge-card-background: var(--pix-info-50);

  width: 100%;

  &--active {
    @extend .auto-scroll;
  }

  &:last-child {
    padding-bottom: var(--pix-spacing-12x);
  }

  &__header {
    margin-bottom: var(--pix-spacing-6x);
    padding: 0 var(--pix-spacing-4x);
    font-weight: var(--pix-font-bold);
  }

  &__card,
  &-card__tag,
  &-card__footer {
    @media (not (prefers-reduced-motion: reduce)) {
      animation: 0.8s fade-in ease-in-out;

      @keyframes fade-in {
        0% {
          opacity: 0;
        }

        33% {
          opacity: 0;
        }

        100% {
          opacity: 1;
        }
      }
    }
  }

  &__card {
    border-radius: $grain-card-border-radius;
  }

  &:focus-visible {
    outline: none;

    .grain__card {
      outline: 2px solid var(--pix-neutral-500);
      outline-offset: var(--pix-spacing-3x);
    }
  }
}

.grain-card {
  &__footer {
    padding: var(--pix-spacing-2x) 0;
  }

  &--summary {
    padding: var(--pix-spacing-6x);
    background: var(--modulix-summary-card-background);
  }

  &--lesson {
    padding: var(--pix-spacing-6x);
    background: var(--pix-primary-10);
  }
}

.grain-card-icon {
  margin-right: var(--pix-spacing-1x);
}

.grain-card-title {
  @extend %pix-title-s;
}

.grain-card-content {
  &__element:not(:last-child) {
    margin-bottom: var(--pix-spacing-8x);
  }

  &__stepper:not(:last-child) {
    margin-bottom: var(--pix-spacing-8x);
  }
}

.grain-card-tag {
  margin-bottom: var(--pix-spacing-1x);
}

// stylelint-disable-next-line no-duplicate-selectors
.grain--active:focus-visible {
  .grain__card {
    outline: 2px solid var(--pix-neutral-500);
    outline-offset: var(--pix-spacing-3x);
  }
}
