/*******************************
             Card
*******************************/

/*-------------------
         View
--------------------*/

/* Shadow */
@cardShadowDistance: 1px;
@cardShadowBoxShadow: 0px @cardShadowDistance 3px 0px @solidBorderColor;

/* Card */
@cardFontFamily: @pageFont;
@cardDisplay: flex;
@cardBackground: @white;
@cardBorderRadius: @defaultBorderRadius;
@cardMargin: 1em 0em;
@cardMinHeight: 0px;
@cardPadding: 0em;
@cardWidth: 290px;
@cardBorderWidth: 1px;
@cardBorderShadow: 0px 0px 0px @cardBorderWidth @solidBorderColor;
@boxShadow:
  @cardShadowBoxShadow,
  @cardBorderShadow
;
@cardBorder: none;
@cardZIndex: '';
@transition:
  box-shadow @defaultDuration @defaultEasing,
  transform @defaultDuration @defaultEasing
;

/* Card Group */
@cardHorizontalSpacing: 1em;
@cardRowSpacing: 1.75em;

@cardGroupMargin: -(@cardRowSpacing / 2) -(@cardHorizontalSpacing / 2);
@cardGroupDisplay: flex;

@cardGroupCardFloat: none;
@cardGroupCardDisplay: flex;
@cardGroupCardMargin: (@cardRowSpacing / 2) (@cardHorizontalSpacing / 2);

/* Consecutive Cards */
@cardConsecutiveGroupDistance: (@cardRowSpacing / 2);

/*-------------------
       Content
--------------------*/


/* Image */
@cardImageBackground: @transparentBlack;
@cardImagePadding: 0em;
@cardImageBorder: none;
@cardImageBoxShadow: none;
@cardImageBorder: none;

/* Content */
@cardContentDivider: @cardBorderWidth solid @internalBorderColor;
@cardContentMargin: 0em;
@cardContentBackground: none;
@cardContentPadding: 1em 1em;
@cardContentFontSize: 1em;
@cardContentBorderRadius: 0em;
@cardContentBoxShadow: none;
@cardContentBorder: none;


/* Header */
@cardHeaderMargin: '';
@cardHeaderFontWeight: @bold;
@cardHeaderFontSize: @relativeBig;
@cardHeaderLineHeightOffset: -(@lineHeight - 1em) / 2;
@cardHeaderColor: @darkTextColor;

/* Metadata */
@cardMetaFontSize: @relativeMedium;
@cardMetaSpacing: 0.3em;
@cardMetaColor: @lightTextColor;

/* Icons */
@cardActionOpacity: 0.75;
@cardActionHoverOpacity: 1;
@cardActionTransition: color @defaultDuration @defaultEasing;

@cardStarColor: #FFB70A;
@cardStarActiveColor: #FFE623;

@cardLikeColor: #FF2733;
@cardLikeActiveColor: #FF2733;

/* Links */
@cardContentLinkColor: '';
@cardContentLinkHoverColor: '';
@cardContentLinkTransition: color @defaultDuration @defaultEasing;

@cardHeaderLinkColor: @cardHeaderColor;
@cardHeaderLinkHoverColor: @linkHoverColor;

@cardMetaLinkColor: @lightTextColor;
@cardMetaLinkHoverColor: @textColor;

/* Description */
@cardDescriptionDistance: 0.5em;
@cardDescriptionColor: rgba(0, 0, 0, 0.68);

/* Content Image */
@cardContentImageWidth: '';
@cardContentImageVerticalAlign: middle;

/* Avatar Image */
@cardAvatarSize: 2em;
@cardAvatarBorderRadius: @circularRadius;

/* Paragraph */
@cardParagraphDistance: 0.5em;

/* Dimmer */
@cardDimmerZIndex: 10;
@cardDimmerColor: '';

/* Additional Content */
@cardExtraDivider: 1px solid rgba(0, 0, 0, 0.05);
@cardExtraBackground: none;
@cardExtraPosition: static;
@cardExtraWidth: auto;
@cardExtraTop: 0em;
@cardExtraLeft: 0em;
@cardExtraMargin: 0em 0em;
@cardExtraPadding: 0.75em 1em;
@cardExtraBoxShadow: none;
@cardExtraColor: @lightTextColor;
@cardExtraTransition: color @defaultDuration @defaultEasing;

/* Extra Links */
@cardExtraLinkColor: @unselectedTextColor;
@cardExtraLinkHoverColor: @linkHoverColor;

/* Buttons */
@cardButtonMargin: 0px -@cardBorderWidth;
@cardButtonWidth: ~"calc(100% + "(@cardBorderWidth * 2)~")";

/*-------------------
      Variations
--------------------*/

/* Link */
@cardLinkHoverBackground: @white;
@cardLinkHoverBorder: @cardBorder;
@cardLinkHoverZIndex: 5;
@cardLinkHoverRaiseDistance: 3px;
@cardLinkHoverTransform: translateY(-@cardLinkHoverRaiseDistance);

@cardShadowHoverBoxShadow: 0px @cardShadowDistance @cardLinkHoverRaiseDistance 0px @solidSelectedBorderColor;
@linkHoverBoxShadow:
  @cardShadowHoverBoxShadow,
  @cardBorderShadow
;


/* Raised */
@raisedShadow:
  @cardBorderShadow,
  @floatingShadow
;
@raisedShadowHover:
  @cardBorderShadow,
  @floatingShadowHover
;

/* Card Count */
@cardWideCardSpacing: 1em;
@cardCardSpacing: 0.75em;
@cardSmallCardSpacing: 0.5em;

@cardOneCardSpacing: 0em;
@cardTwoCardSpacing: @cardWideCardSpacing;
@cardThreeCardSpacing: @cardWideCardSpacing;
@cardFourCardSpacing: @cardCardSpacing;
@cardFiveCardSpacing: @cardCardSpacing;
@cardSixCardSpacing: @cardCardSpacing;
@cardSevenCardSpacing: @cardSmallCardSpacing;
@cardEightCardSpacing: @cardSmallCardSpacing;
@cardNineCardSpacing: @cardSmallCardSpacing;
@cardTenCardSpacing: @cardSmallCardSpacing;

@cardOneCard: @oneColumn;
@cardOneCardOffset: 0em;
@cardTwoCard: ~"calc("@twoColumn~" - "(@cardTwoCardSpacing * 2)~")";
@cardTwoCardOffset: -@cardTwoCardSpacing;
@cardThreeCard: ~"calc("@threeColumn~" - "(@cardThreeCardSpacing * 2)~")";
@cardThreeCardOffset: -@cardThreeCardSpacing;
@cardFourCard: ~"calc("@fourColumn~" - "(@cardFourCardSpacing * 2)~")";
@cardFourCardOffset: -@cardFourCardSpacing;
@cardFiveCard: ~"calc("@fiveColumn~" - "(@cardFiveCardSpacing * 2)~")";
@cardFiveCardOffset: -@cardFiveCardSpacing;
@cardSixCard: ~"calc("@sixColumn~" - "(@cardSixCardSpacing * 2)~")";
@cardSixCardOffset: -@cardSixCardSpacing;
@cardSevenCard: ~"calc("@sevenColumn~" - "(@cardSevenCardSpacing * 2)~")";
@cardSevenCardOffset: -@cardSevenCardSpacing;
@cardEightCard: ~"calc("@eightColumn~" - "(@cardSevenCardSpacing * 2)~")";
@cardEightCardOffset: -@cardSevenCardSpacing;
@cardNineCard: ~"calc("@nineColumn~" - "(@cardNineCardSpacing * 2)~")";
@cardNineCardOffset: -@cardNineCardSpacing;
@cardTenCard: ~"calc("@tenColumn~" - "(@cardTenCardSpacing * 2)~")";
@cardTenCardOffset: -@cardTenCardSpacing;

/* Stackable */
@cardStackableRowSpacing: 1em;
@cardStackableCardSpacing: 1em;
@cardStackableMargin: ~"calc("@oneColumn~" - "(@cardStackableCardSpacing * 2)~")";

/* Sizes */
@cardMedium: 1em;

/* Colored */
@cardColoredShadowDistance: 2px;