// ============================================================================
// :: Card
// ============================================================================
/**
 * Component used to display a small amount of content and should lead the user
 * to a larger amount of content related the the selected card. A card mainly
 * contains a title, short description and a read-more link.
 */

// ============================================================================
// :: Settings
// ============================================================================
$root-line-width: 0.3rem;

// ============================================================================
// :: Root
// ============================================================================
.bp-card {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem;
  overflow: hidden;

  background-color: $bp-background-color-base;
  border: 1px solid $bp-border-color-base;

  @include respond-at($bp-breakpoint-desktop-base) {
    padding: 3.5rem;
  }

  &::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;
    width: $root-line-width;
    height: 100%;

    background-color: $bp-primary-color;

    transform: translateX(-$root-line-width);

    transition: transform 0.2s ease-in-out;
  }

  &:hover {

    &::before {
      transform: translateX(0);
    }

    .bp-card__action {

      // Move the arrow icon to the right when hovering
      &::before {
        transform: translateX(1rem);
      }
    }
  }
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-card__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: $bp-z-index-floor;

  cursor: pointer;
}

.bp-card__content {
  width: 100%;
}

.bp-card__header {
  margin-bottom: 2.5rem;
}

.bp-card__title {
  font-size: $bp-font-size-1x-large;
  font-weight: $bp-font-weight-bold;
}

.bp-card__action {
  margin-top: 3.5rem;

  font-size: $bp-font-size-2x-small;
  font-weight: $bp-font-weight-bold;
  letter-spacing: 0.1rem;
  text-transform: uppercase;

  // Style the icon generated by iconfont
  &::before {
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }
}