$card-border-color: createColor(rgba(219, 219, 219, 0.36)) !default;
$card-border-width: 1px !default;
$card-shadow: 0 0 3px 0 createColor(rgba(10, 10, 10, 0.10)) !default;
$card-radius: 0 !default;
$card-header-background: createColor(rgba(0, 0, 0, .03)) !default;
$card-header-color: var(--color-black) !default;
$card-header-padding: 0.625rem 1rem !default;
$card-content-padding: 1rem !default;
$card-footer-padding:  0.35rem 1rem !default;

.card {
  --border-color: #{$card-border-color};
  --border-width: #{$card-border-width};
  --border-radius: #{$card-radius};
  --box-shadow: #{$card-shadow};

  border: var(--border-color) solid var(--border-width);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-flow: column nowrap;
  height: 100%;

  .card__header, .card__image, .card__content, .card__footer {
    --padding: 0;
    padding: var(--padding);
  }

  .card__image {
    display: block;
    position: relative;

    img {
      width: 100%;
    }
  }

  .card__header {
    --background-color: #{$card-header-background};
    --font-color: #{$card-header-color};
    --padding: #{$card-header-padding};

    align-items: center;
    background-color: var(--card-header-background-color);
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    color: var(--font-color);
    display: flex;

    .button--close {
      margin-left: auto;
    }

    h1, h2, h3, h4, h5, h6, .is-very-big-title, .is-big-title, .is-medium-title, .is-regular-title, .is-small-title, .is-very-small-title {
      margin-bottom: 0;
    }
  }

  .card__content {
    --padding: #{$card-content-padding};

    flex: auto;
    position: relative;
  }

  &.is-shrink {
    height: auto;

    .card__content {
      flex: initial;
    }
  }

  .card__footer {
    --padding: #{$card-footer-padding};

    align-items: center;
    border-bottom-left-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    display: flex;

    & > .is-end {
      margin-left: auto;
    }

    & > .is-center {
      margin: auto;
    }

    button {
      &:not(:last-child) {
        margin-right: 0.4rem;
      }
    }
  }
}