@use '../../_styles/variables' as *;
@use "pkg:@ohu-mobile/styles" as *;
@use '../../_styles/mixins' as *;
$cardPrefixClass: #{$prefix}card;
$cardHeaderPrefixClass: #{$cardPrefixClass}-header;

.#{$cardPrefixClass} {
  background: $cardBackground;
  &.has-padding &__content {
    padding: $cardContentPadding;
  }
  &.has-radius {
    border-radius: $cardBorderRadius;
  }
  &.has-shadow {
    box-shadow: $cardBoxShadow;
  }
}

.#{$cardHeaderPrefixClass} {
  position: relative;
  padding: $cardHeaderTopOffset $cardHeaderLeftOffset;
  font-size: $cardHeaderFontSize;
  line-height: 1.375em;
  color: $colorTextBase;
  font-weight: 400;
  &__extra {
    @include center(y);
    right: $cardHeaderLeftOffset;
    color: $cardHeaderExtraColor;
    font-size: $cardHeaderExtraFontSize;
  }
  &.is-bold {
    font-size: $cardHeaderBoldFontSize;
    line-height: 1.38888889em;
    font-weight: bold;
  }
  // ================== state ==================
  &.is-error {
    .#{$cardHeaderPrefixClass}__extra {
      color: $cardHeaderExtraErrorColor;
    }
  }
  &.is-success {
    .#{$cardHeaderPrefixClass}__extra {
      color: $cardHeaderExtraSuccessColor;
    }
  }
}