$card-color: $text !default;
$card-background-color: $white !default;
$card-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default;

$card-header-color: $text-strong !default;
$card-header-shadow: 0 1px 2px rgba($black, 0.1) !default;
$card-header-weight: $weight-bold !default;

$card-footer-border-top: 1px solid $border !default;
$card-max-height: 21rem !default;

//variant
//highlight
$card-variant-highlight-magin-top: var(--card-variant-highlight-margin-top);

.sgds {
  &-card {
    background-color: $card-background-color;
    box-shadow: $card-shadow;
    color: $card-color;
    width: 100%;
    position: relative;

    .is-media-card & {
      &:hover {
        background-color: darken($card-background-color, 2.5%);
      }

      .sgds-card-content {
        display: flex;
        height: $card-max-height;
        max-height: $card-max-height;
        flex-direction: column;
        justify-content: space-between;
      }

      footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);

      &.is-#{$name} {
        color: $color-invert;
        background-color: $color;
        border-color: transparent;

        &:hover {
          background-color: darken($color, 2.5%);
        }

        .sgds-card-footer,
        .sgds-card-footer-item {
          border-color: lighten($color, 20%);
        }
      }
    }
  }

  &-card-header {
    align-items: stretch;
    box-shadow: $card-header-shadow;
    display: flex;
  }

  &-card-header-title {
    align-items: center;
    display: flex;
    flex-grow: 1;
    font-weight: $card-header-weight;
    padding: 0.75rem;

    &.is-centered {
      justify-content: center;
    }
  }

  &-card-header-icon {
    align-items: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0.75rem;
  }

  &-card-image {
    display: block;
    position: relative;
  }

  &-card-content {
    padding: 1.5rem;
  }

  &-card-footer {
    border-top: $card-footer-border-top;
    align-items: stretch;
    display: flex;
  }

  &-card-footer-item {
    align-items: center;
    display: flex;
    flex-basis: 0;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: center;
    padding: 0.75rem;
    @each $name, $pair in $colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);
      &.is-#{$name} {
        background-color: $color;
        color: $color-invert;

        &:hover,
        &.is-hovered {
          background-color: darken($color, 8%);
          color: $color-invert;
        }

        &:active,
        &.is-active {
          background-color: lighten($color, 8%);
          color: $color-invert;
        }

        &[disabled] {
          background-color: $color;
          box-shadow: none;
        }
      }
    }

    &:not(:last-child) {
      border-right: $card-footer-border-top;
    }
  }

  &-card-button {
    &:hover,
    &:active {
      cursor: pointer;
      color: $primary;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    }
  }

  // Combinations
  &-card {
    .media:not(:last-child) {
      margin-bottom: 0.75rem;
    }
  }
}

//variant-highlight
.sgds{
  &-card{
    &-variant-highlight{
      margin-top: #{$card-variant-highlight-magin-top};
      display: flex;
      flex-flow: column;
      .sgds-card-image{
          margin-top: calc(#{$card-variant-highlight-magin-top} * -1 );
          @extend .has-text-centered;
          img{
              margin-bottom: 0;
          }
      }
      .sgds-card-content{
        @extend .has-text-centered;
        flex-grow: 1;
        h3{
            margin-bottom: 0;
        }
      }
    }
  }
}