// Start with a base of EuiPanel styles
@include euiPanel($selector: '.euiCard');

/**
 * 1. Footer is always at the bottom.
 * 2. Fix for IE where the image correctly resizes in width but doesn't collapse its height
      (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
 * 3. Horizontal layouts should always top left align no matter the textAlign prop
 */

// EuiCard specific
.euiCard {
  display: flex;
  flex-direction: column;
  min-height: 1px; /* 2 */

  &.euiCard-isDisabled {
    cursor: not-allowed; // duplicate property due to Chrome bug
    box-shadow: none;

    &:not(.euiCard--plain) {
      background-color: $euiColorLightestShade;
    }

    .euiCard__title,
    .euiCard__description,
    .euiCard__top {
      color: $euiColorDarkShade;
    }

    .euiCard__top svg,
    .euiCard__top img {
      filter: grayscale(100%);
    }

    .euiCard__titleAnchor,
    .euiCard__titleButton {
      cursor: inherit;
    }

    &:hover,
    &:focus {
      cursor: not-allowed; // duplicate property due to Chrome bug
      transform: none;
      box-shadow: none;
      text-decoration: none;
    }
  }

  &.euiCard--isClickable {
    display: flex; // Override panel mixin

    &:not(.euiCard-isDisabled) {
      // Progressive Enhancement Only
      // The title will still underline to simulate focus in IE
      &:focus-within {
        @include euiSlightShadowHover;
        @include euiFocusRing('large');
      }

      &:focus,
      &:hover {
        .euiCard__title,
        .euiCard__titleAnchor,
        .euiCard__titleButton {
          text-decoration: underline;
        }
      }
    }
  }

  .euiCard__top,
  .euiCard__content,
  .euiCard__footer {
    width: 100%; // Fixes IE and ensures they always stretch no matter the flex layout
  }

  &.euiCard--leftAligned {
    text-align: left;
    align-items: flex-start;

    .euiCard__titleButton {
      text-align: left;
    }
  }

  &.euiCard--centerAligned {
    text-align: center;
    align-items: center;
  }

  &.euiCard--rightAligned {
    text-align: right;
    align-items: flex-end;

    .euiCard__titleButton {
      text-align: right;
    }
  }

  &.euiCard-isSelected {
    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
  }
}

// This creates a bunch of sub selectors for the beta badge
@include euiHasBetaBadge($selector: '.euiCard', $spacing: $euiCardSpacing);

.euiCard--isSelectable {
  position: relative;
}

@each $modifier, $paddingAmount in $euiCardPaddingModifiers {
  .euiCard--#{$modifier} {
    padding: $paddingAmount;

    &.euiCard--isSelectable {
      padding-bottom: $paddingAmount + $euiCardBottomNodeHeight;
    }

    .euiCard__top {

      .euiCard__image {
        width: calc(100% + (#{$paddingAmount} * 2));
        left: $paddingAmount * -1;
        top: $paddingAmount * -1;
        margin-bottom: $paddingAmount * -1; // ensure the parent is only as tall as the image

        // IF both exist, position the icon centered on top of image
        + .euiCard__icon {
          transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
          transform: translate(-50%, calc(-50% + #{$paddingAmount * -1})); // sass-lint:disable-line no-duplicate-properties
        }
      }
    }

  }
}

.euiCard__top {
  flex-grow: 0; /* 1 */
  position: relative;
  min-height: 1px; /* 2 */

  .euiCard__image {
    position: relative;

    // match border radius, minus 1px because it's inside a border
    border-top-left-radius: $euiBorderRadius - 1px;
    border-top-right-radius: $euiBorderRadius - 1px;
    overflow: hidden;

    img {
      width: 100%;
    }

    // IF both exist, position the icon centered on top of image
    + .euiCard__icon {
      position: absolute;
      top: 50%;
      left: 50%;
    }
  }

  .euiCard__icon {
    margin-top: $euiCardSpacing / 2;
  }
}

.euiCard__footer:not(:empty) {
  flex-grow: 0; /* 1 */
  margin-top: $euiCardSpacing;
}

.euiCard--hasChildren .euiCard__description {
  margin-bottom: $euiCardSpacing;
}

// Selectable cards don't work well without a border
.euiCard--plain:not(.euiCard--isSelectable) {
  border: none;
  box-shadow: none;

  .euiCard__image {
    // Without a border, the image should stand on it's own so it needs to have all corners rounded
    border-radius: $euiBorderRadius;
  }
}

@each $name, $color in $euiCardSelectButtonBorders {
  .euiCard--isSelectable--#{$name}.euiCard-isSelected {
    border-color: $color;
  }
}

// If an icon or image exists, add some space
.euiCard__top + .euiCard__content {
  margin-top: $euiCardSpacing;
}

.euiCard__content {
  flex-grow: 1; /* 1 */

  .euiCard__description {
    margin-top: $euiCardSpacing / 2;
  }

  .euiCard__titleAnchor,
  .euiCard__titleButton {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;

    &:focus {
      text-decoration: underline;
    }
  }

}

.euiCard.euiCard--horizontal {
  .euiCard__content {
    text-align: left; /* 3 */
  }
}

// Only change the flex direction if the card has an icon
// otherwise the button tag won't properly align contents to top
.euiCard.euiCard--horizontal.euiCard--hasIcon {
  flex-direction: row;
  // sass-lint:disable-block no-important
  align-items: flex-start !important; /* 3 */

  .euiCard__top,
  .euiCard__content {
    width: auto; // Makes sure the top shrinks and the content grows
    margin-top: 0;
  }

  .euiCard__top .euiCard__icon {
    margin-top: 0;
    margin-right: $euiSize;
  }
}