//
// Card
// -----------------------------------


$card-max-width:       35em !default;
$card-background:      white !default;
$card-padding:         2.5rem 2rem !default;
$card-border:          1px solid $base-color-button-border !default;
$card-border-radius:   $base-border-radius !default;
$card-image-height:    200px !default;
$card-skeleton-border: 2px dashed $base-color-button-border !default;


.card {
  max-width: $card-max-width;
  padding: $card-padding;
  border-radius: $card-border-radius;
  background-color: $card-background;
  border: $card-border;
  text-align: left;
  overflow: hidden;


  // Clickable type

  &.is-clickable {
    padding: 0;

    > * {
      display: block;
      text-decoration: none;
      color: $base-color-text;
      padding: $card-padding;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }


  // Skeleton type

  &.is-skeleton {
    border: $card-skeleton-border;
    color: color($base-color-text a(.5));

    > * {
      color: color($base-color-text a(.5));
    }
  }


  // Dialog type

  &.is-dialog {
    padding: 0;

    .card-header {
      margin: 0;
      padding: 1rem 2rem;
      border-bottom: 1px solid $base-color-border;
      text-align: center;
    }

    .card-content {
      padding: 1.5rem 2rem;
    }

    .card-footer {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      border-top: 1px solid $base-color-border;

      .button {
        flex: 1;
        margin: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        color: $base-color-link;

        &:not(:first-child) {
          border-left: 1px solid $base-color-border;
        }
      }
    }
  }


  // Fit height

  &.is-row-fit {
    height: 100%;
  }


  // Centering alignment

  &.is-center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    &.is-clickable {
      > * {
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
      }
    }
  }


  // Display in full column

  &.is-col-full {
    max-width: 100%;
  }


  // Layout mode

  &.is-layout {
    padding: 0;
  }
}


//
// Card image
//

.card-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-color: $base-color-light;
  height: $card-image-height;
  margin: -2.5rem -2rem 0;

  & + * {
    margin-top: 2.5rem !important;
  }
}


//
// Card layout
//

// .card-header {}

// .card-content {}

// .card-footer {}