/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 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
 */

// OuiCard inherits most from OuiPanel, these styles are for content or other states

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

  &.ouiCard-isDisabled {
    // sass-lint:disable-block no-important
    cursor: not-allowed !important; // duplicate property due to Chrome bug
    transform: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    background-color: transparentize($ouiButtonColorDisabled, .9) !important;
    color: $ouiColorDisabledText;

    .ouiCard__top {
      filter: grayscale(100%);
    }

    .ouiCard__titleAnchor,
    .ouiCard__titleButton {
      color: $ouiColorDisabledText;
      cursor: inherit;
    }

    .ouiCard__betaBadge:not(.ouiBetaBadge-isClickable):not(.ouiBetaBadge--hollow) {
      box-shadow: inset 0 0 0 1px $ouiBorderColor;
      background: transparent;
      color: inherit;
    }

    .ouiCard__betaBadge:not(.ouiBetaBadge-isClickable).ouiBetaBadge--hollow  {
      background-color: $ouiColorEmptyShade;
    }
  }

  &.ouiCard--isClickable {
    display: flex; // Override panel
    width: 100%;

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

      &:focus,
      &:hover {
        .ouiCard__title,
        .ouiCard__titleAnchor,
        .ouiCard__titleButton {
          text-decoration: underline;
        }
      }
    }
  }

  .ouiCard__top,
  .ouiCard__content,
  .ouiCard__footer {
    width: 100%; // Fixes IE and ensures they always stretch no matter the flex layout
  }

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

    .ouiCard__titleButton {
      text-align: left;
    }
  }

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

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

    .ouiCard__titleButton {
      text-align: right;
    }
  }

  &.ouiCard-isSelected {
    transition: all $ouiAnimSpeedFast $ouiAnimSlightResistance;
  }
}

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

.ouiCard__betaBadge.ouiBetaBadge--hollow {
  background-color: $ouiColorEmptyShade;
}

.ouiCard--isSelectable {
  position: relative;
}


@each $modifier, $paddingAmount in $ouiPanelPaddingModifiers {
  .ouiCard[class*='#{$modifier}'] {
    padding: $paddingAmount;

    &.ouiCard--isSelectable {
      padding-bottom: $paddingAmount + $ouiCardBottomNodeHeight;
    }

    .ouiCard__top {

      .ouiCard__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
        + .ouiCard__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
        }
      }
    }

  }
}

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

  .ouiCard__image {
    position: relative;

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

    img {
      width: 100%;
    }

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

  .ouiCard__icon {
    margin-top: $ouiCardSpacing / 2;
  }
}

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

// Without a border, the image should stand on it's own so it needs to have all corners rounded
.ouiCard[class*='transparent'] .ouiCard__image {
  border-radius: $ouiBorderRadius;
}

@each $name, $color in $ouiCardSelectButtonBorders {
  .ouiCard--isSelectable--#{$name}.ouiCard-isSelected:not(.ouiCard-isDisabled) {
    // Override .ouiPanel.has--Border
    border-color: $color !important; // sass-lint:disable-line no-important
  }
}

// If an icon or image exists, add some space
.ouiCard__top + .ouiCard__content {
  margin-top: $ouiCardSpacing;
}

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

  .ouiCard__description,
  .ouiCard__children {
    margin-top: $ouiCardSpacing / 2;
  }

  .ouiCard__titleAnchor,
  .ouiCard__titleButton {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;

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

}

.ouiCard.ouiCard--horizontal {
  .ouiCard__content,
  .ouiCard__titleButton {
    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
  &.ouiCard--hasIcon {
    flex-direction: row;
    // sass-lint:disable-block no-important
    align-items: flex-start !important; /* 3 */

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

    .ouiCard__top .ouiCard__icon {
      margin-top: 0;
      margin-right: $ouiSize;
    }
  }
}