// Add common style
@mixin card-size {
  .ebs-card__header,
  .ebs-card__body,
  .ebs-card__footer {
    @content;
  }
}

.ebs-card {
  width: 100%;
  border: 1px solid $card-border-color;
  border-radius: $card-border-radius;
  background-color: #fff;
  overflow: hidden;
  box-shadow: $card-box-shadow;

  &--collapsed {
    .ebs-card__header {
      border-bottom: 0;
    }
  }

  &__header {
    background-color: $card-header-bg-color;
    border-bottom: 1px solid $card-border-color;

    &--bordered {
      border-bottom: 2px solid $card-bordered-color;
    }

    &--collapsible {
      display: flex;
      width: 100%;
      justify-content: space-between;
    }

    &__content {
      flex: 1;
    }

    &__toggle {
      padding-left: rem(12px);
      @include flex-center;

      &:hover {
        cursor: pointer;
      }

      .ebs-icon {
        font-size: rem(14px);
        color: $grey-600;
      }
    }
  }

  &__body {
    background-color: $card-body-bg-color;
    transition: padding 400ms;
  }

  &__footer {
    background-color: $card-footer-bg-color;
    border-top: 1px solid $card-border-color;

    &--bordered {
      border-top: 2px solid $card-bordered-color;
    }
  }

  // Size
  &--small {
    @include card-size {
      padding: rem($card-padding-y-sm $card-padding-x-sm);
    }
  }

  &--medium {
    @include card-size {
      padding: rem($card-padding-y $card-padding-x);
    }
  }

  &--large {
    @include card-size {
      padding: rem($card-padding-y-lg $card-padding-x-lg);
    }
  }
}
