@charset "utf-8"
/* bulma-horizontal-card | v1.3.2 (c) Alex H and contributors | MIT */

// VARIABLES ------------
/// horizontal cards have unique variables just in case they need to be styled
/// differently from vertical ones. useful for if you are adapting them to be
/// used with an already highly-customized bulma theme.

/// by default, however, they'll be identical.
$hcard-color: $card-color !default
$hcard-background-color: $card-background-color !default
$hcard-shadow: $card-shadow !default
$hcard-radius: $card-radius !default
$hcard-header-background-color: $card-header-background-color !default
$hcard-header-color: $card-header-color !default
$hcard-header-padding: $card-header-padding !default
$hcard-header-shadow: $card-header-shadow !default
$hcard-header-weight: $card-header-weight !default
$hcard-content-background-color: $card-content-background-color !default
$hcard-content-padding: $card-content-padding !default
$hcard-footer-background-color: $card-footer-background-color !default
$hcard-footer-border-top: $card-footer-border-top !default
$hcard-footer-padding: $card-footer-padding !default
$hcard-media-margin: $card-media-margin !default

/// unique variables
$hcard-image-default-size: 12.5% !default
$hcard-image-small-size: $hcard-image-default-size * 0.5 !default
$hcard-image-medium-size: $hcard-image-default-size * 1.5 !default
$hcard-image-large-size: $hcard-image-default-size * 2.5 !default

// STYLES ------------
.content
  /// prevents images inside ALL cards from inheriting a large margin from 
  /// being inside an element with class .content
  /// also removes a bottom margin from .card-header-titles if the card is
  /// inside .content
  .card
    figure.image
      margin-left: 0
      margin-right: 0
    .card-header-title
      margin-bottom: 0

.card
  &.is-horizontal
    margin-bottom: $hcard-media-margin
    background-color: $hcard-background-color
    border-radius: $hcard-radius
    box-shadow: $hcard-shadow
    color: $hcard-color
    
    @include from($tablet) 
      display: flex
      flex-flow: row wrap
      flex-basis: 50ex
      flex-grow: 0
      flex-shrink: 1

    .card-image.is-radiusless-bottom
      .image
        img 
          /// extra class to strip radius off card image
          /// USE WITH CARDS THAT HAVE A BLOCK FOOTER TO ENSURE THEY LOOK 
          /// CORRECT ON FIREFOX / GECKO-BASED BROWSERS.
            border-bottom-left-radius: 0 !important
            border-bottom-right-radius: 0 !important

    .media:not(:last-child)
      margin-bottom: $card-media-margin
    
    %card-item
      &:first-child
        @include from($tablet) 
          border-top-left-radius: $hcard-radius
          border-top-right-radius: $hcard-radius
      &:last-child
        @include from($tablet) 
          border-bottom-left-radius: $hcard-radius
          border-bottom-right-radius: $hcard-radius

    @include from($tablet) 
      .card-image
        &:first-child
         img
            border-top-left-radius: $hcard-radius
            border-top-right-radius: $hcard-radius
        &:last-child
          img
             border-bottom-left-radius: $hcard-radius
             border-bottom-right-radius: $hcard-radius
    
    .card-header
      background-color: $hcard-header-background-color
      box-shadow: $hcard-header-shadow

    .card-header-title
      color: $hcard-header-color
      font-weight: $hcard-header-weight
       padding: $hcard-header-padding

    .card-header-icon
      padding: $hcard-header-padding

    .card-content
      background-color: $hcard-content-background-color
      padding: $hcard-content-padding

    .card-footer
      background-color: $hcard-footer-background-color
      border-top: $hcard-footer-border-top

    .card-footer-item
      padding: $hcard-footer-padding
      &:not(:last-child)
        +ltr-property("border", $hcard-footer-border-top)

    /// for external, wide header placed outside card-content and before card-image
    header.card-header:first-child
      flex-grow: 1
      flex-shrink: 0
      flex-basis: 100%

    /// for external, wide footer placed outside card-content and before card-image
    footer.card-footer:last-child
      flex-grow: 5
      flex-shrink: 0
      flex-basis: 100%
      order: 99 /// force footer to end of card

    /// style card-images
    .card-image, .card-image.is-left
      @include from($tablet)
        flex: 2
        flex-shrink: 2
        flex-basis: $hcard-image-default-size
      .image
        display: block
        position: relative
        overflow: hidden
        height: 100%
        width: 100%
        img
          height: 100%
          object-fit: cover
          object-position: center
          @include from($tablet) 
            border-top-left-radius: $hcard-radius
            border-bottom-right-radius: 0
            border-bottom-left-radius: $hcard-radius
            border-top-right-radius: 0
      &.is-right
        /// must use "order" instead of "flex-direction" since flex-direction 
        /// is relative to language (is-right would be on the left in RTL mode)
        order: 2
        .image
          img
            @include from($tablet) 
              border-top-right-radius: $hcard-radius
              border-bottom-left-radius: 0
              border-bottom-right-radius: $hcard-radius
              border-top-left-radius: 0
      /// controls the size of the card image
      /// card-image can also be changed by inline styling flex-basis
      &.is-large
        flex-basis: $hcard-image-large-size
      &.is-medium
        flex-basis: $hcard-image-medium-size
      &.is-normal
        flex-basis: $hcard-image-default-size
      &.is-small
        flex-basis: $hcard-image-small-size
            
    /// force 0 unit bottom border on the card image when an outer card footer is present
    /// (when a footer.card-footer is present as a direct child of .card)
    /// using :has. :has is still not completely supported in firefox/gecko :'(
    .card-image:has(~ footer.card-footer)
        .image
          img
            border-bottom-right-radius: 0
            border-bottom-left-radius: 0

    /// force 0 unit top border on the card-image when an outer card header is present
    /// (when the card image immediately follows the header)
    header.card-header ~ .card-image
        .image
          img
            border-top-right-radius: 0
            border-top-left-radius: 0
            
    .card-content
      flex: 3
      flex-shrink: 3
      position: relative
      /// inline card header
      header.card-header
        margin-top: -$hcard-content-padding
        margin-left: -$hcard-content-padding 
        margin-bottom: $hcard-content-padding 
        margin-right: -$hcard-content-padding
      /// inline card footer
      footer.card-footer
        margin-top: $hcard-content-padding 
        margin-left: -$hcard-content-padding 
        margin-bottom: -$hcard-content-padding 
        margin-right: -$hcard-content-padding

        /// allow optional forcing of the inline footer to stick to the bottom
        /// of the card, in cases where the image will make the card longer than
        /// by the text alone.
        &.is-forced-bottom
          /// footer behaviour as a mixin for breakpoints
          @mixin sticky-footer
            margin-bottom: 0
            position: absolute
            bottom: 0
            width: 100%

          @include from($tablet)        
            @include sticky-footer
          /// weird styles only apply until AFTER desktop breakpoint since cards
          /// now collapse to vertical under tablet size