// ============================================================================
// :: Card
// ============================================================================
/**
 * A reusable component with repeatable content, title & actions.
 */

// ============================================================================
// :: Root
// ============================================================================
.m-card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 55rem;
  padding: 3rem 0 4rem;

  background-color: $background-color-white;
  border-radius: $border-radius-1x-large;

  @include respond-at($breakpoint-tablet-default) {
    padding: 4rem 0 4rem;
  }

  @include respond-at($breakpoint-desktop-default) {
    padding: 4rem 0 6rem;
  }

  &::after {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    height: 0.5rem;
    width: 100%;

    background-color: $secondary-color-base;
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.m-card__title {
  padding: 0 2.5rem 1rem;

  font-size: $font-size-2x-large;
  text-align: center;

  word-break: break-word;

  @include respond-at($breakpoint-tablet-default) {
    padding: 0 6rem 1rem;

    font-size: $font-size-3x-large;
  }
}

.m-card__content {
  padding: 0 2.5rem 2rem;

  @include respond-at($breakpoint-tablet-default) {
    padding: 0 4rem 4rem;
  }

  @include respond-at($breakpoint-desktop-default) {
    padding: 0 6rem 4rem;
  }

  text-align: center;
}

.m-card__content + .m-card__content {
  padding-top: 2rem;
  flex-grow: 1;

  @include respond-at($breakpoint-tablet-default) {
    padding-top: 4rem;
  }

  border-top: 0.2rem solid $border-color-2x-light;
}

.m-card__action {
  position: relative;
  padding: 0 2.5rem 0;

  @include respond-at($breakpoint-tablet-default) {
    padding: 0 4rem 0;
  }

  @include respond-at($breakpoint-desktop-default) {
    padding: 0 6rem 0;
  }

  text-align: center;
}

.m-card__action-button {
  width: 100%;
}

.m-card__action-button + small {
  position: absolute;
  top: 100%;
  left: 0;

  width: 100%;
  padding: 1rem 2rem;

  text-align: center;
}

// Keep helper text in flow when text zoom is large
html[data-text-zoom="large"],
html[data-text-zoom="xlarge"] {
  .m-card__action-button + small {
    position: relative;

    top: 2rem;
  }
}

// ============================================================================
// :: States
// ============================================================================
.m-card {
  &.is-disabled {
    h1,
    h2,
    h3,
    h4,
    p,
    li {
      color: $text-color-disabled;
    }

    &::after {
      background-color: $background-color-disabled;
    }
  }
}