@use "../variables" as vars;
@use "../functions" as func;
@use "../mixins" as mixins;

.card {
  position: relative;
  border-radius: func.units(0);
  box-shadow: func.shadow(vars.$cards-shadow);
  border: func.border(vars.$cards-border);
  overflow: hidden;
  background: func.color(vars.$cards-background-color);

  // small card
  &-small {
    > :last-of-type {
      padding-bottom:func.units(5);
    }
  }
  // medium card
  &-medium {
    // The last
    > :last-of-type {
      padding-bottom:func.units(5);
    }
  }
  // large card
  &-large {
    > :last-of-type {
      padding-bottom:func.units(5);
    }
  }

  &-align-height {
    height: 100%;
    -ms-box-orient: horizontal;
    display: -webkit-box;
    display: -moz-box;
    display: -moz-flex;
    display: flex;
    flex-direction: column;

    > *{
      width: 100%;
    }

    .card-footer{
      margin-top: auto;
    }
  }

  p {
    max-width: 60ch;
    margin-top:func.units(4);
    margin-bottom: func.units(0);
    &:first-child {
      margin-top:func.units(0);
    }
  }
  h1, .h1,
  h2, .h2,
  h3, .h3,
  h4, .h4,
  h5, .h5 {
    margin: func.units(0);
  }

  > .list-group:first-child {
    .list-group-item:first-child {
      border-radius: 0;
    }
  }

  > .list-group:last-child {
      .list-group-item:last-child {
        border-radius: 0;
      }
  }
}
// card-header
.card-header {
  background-color: func.color(vars.$cards-header-background-color);
  padding: func.units(4) func.units(5); // top and bottom | left and right
  .header-title {
    @include mixins.body-copy-text;
    font-weight: func.font-weight("semibold");
    color: func.color(vars.$cards-heading-color);
    margin:func.units(0);

    &.large-text {
      color: func.color(vars.$cards-heading-large-color);
      @include mixins.h2;
    }
  }
  .sub-header {
    @include mixins.body-copy-text;
    margin-top:  func.units(0);
    margin-bottom: func.units(0);
    color: func.color(vars.$cards-sub-heading-color);
  }
}
.card-text {
  background-color: func.color(vars.$cards-text-background-color);
  padding: func.units(4) func.units(5);
  .text {
    @include mixins.body-copy-text;
    margin-top: func.units(4);
    color: func.color(vars.$cards-text-color);
    margin-bottom: func.units(0);
  }
}

// card-content
.card-content {
  @include mixins.body-copy-text;
  padding: func.units(0);
  color: func.color(vars.$cards-text-color);
  background-color: func.color(vars.$cards-content-background-color);
  ul {
    margin-bottom:func.units(0);
  }
  div:first-child {
    margin-top:func.units(0);
  }
  .content-text {
    margin-top:func.units(4);
  }
  .content {
    text-align: center;
  }
}

// card-action
.card-action {
  @include mixins.body-copy-text;
  padding: func.units(4) func.units(5);
  color: func.color(vars.$cards-text-color);
  margin-bottom: func.units(0);
  background-color: func.color(vars.$cards-action-background-color);

  div:first-child {
    margin-top:func.units(0);
  }

  &:last-child {
    border-bottom: func.units(0);
  }
  .action-buttons {
    button {
      margin-right: func.units(4);
      margin-top:func.units(3);

      @include mixins.media-breakpoint-up(md) {
        margin-right: func.units(4);
        margin-top:func.units(3);
      }
    }
    .button + .button{
      @include mixins.media-breakpoint-up(sm) {
        margin-left: 0;
        &:first-child{
          margin-left: 0;
        }
      }
    }
  }
  .action-links {
    margin-top:func.units(4);
    ul {
      padding-left: func.units(0);
      @include mixins.unstyled-list;
      li {
        margin-top:func.units(3) !important;
      }
    }
  }
  .action-functionlinks {
    margin-top:func.units(4);
    text-align: right;
    .function-link {
      margin-left: func.units(4);
    }
  }
}

// If text comes after header
.card-header + .card-text{
  padding-top:func.units(0);
}
// If content comes after header
.card-header + .card-content {
  padding-top:func.units(0);
}
// If action comes after header
.card-header + .card-action{
  padding-top:func.units(0);
}
// If header comes after header
.card-header + .card-header{
  padding-top:func.units(0);
}
// If header comes after text
.card-text + .card-header {
  padding-top:func.units(0);
}
// If content comes after text
.card-text + .card-content {
  padding-top:func.units(0);
}
// If action comes after text
.card-text + .card-action{
  padding-top:func.units(0);
}
// If text comes after text
.card-text + .card-text{
  padding-top:func.units(0);
}
// If text comes after action
.card-action + .card-text{
  padding-top:func.units(0);
}
// If header comes after action
.card-action + .card-header{
  padding-top:func.units(0);
}
// If content comes after action
.card-action + .card-content{
  padding-top:func.units(0);
}
// If action comes after action
.card-action + .card-action{
  padding-top: 0;
}

.card-center {
  text-align: center;
}