@import '../../style/themes/index';
@import '../../style/mixins/index';

@m-abbreviate-card-prefix-cls: m-abbreviate-card;

.@{m-abbreviate-card-prefix-cls} {
  &-container {
    position: relative;
    max-width: @abbreviate-card-container-max-width;
    height: 470px;
    max-height: @abbreviate-card-container-max-height;
    background: @abbreviate-card-container-background;
    border: @abbreviate-card-container-border;
    border-radius: @abbreviate-card-container-border-radius;
    transition: border 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
  }

  &-header {
    margin: @abbreviate-card-header-margin;
    font-size: @abbreviate-card-header-font-size;
    font-weight: @abbreviate-card-header-font-weight;
    line-height: @abbreviate-card-header-line-height;
    color: @abbreviate-card-header-color;
    text-align: center;
  }

  &-body {
    height: calc(100% - 54px);
    padding: @abbreviate-card-body-padding;
  }

  &-img-box {
    width: 100%;
    height: 100%;
    background: @abbreviate-card-img-background;
  }

  &-img {
    width: 100%;
    height: 100%;
  }

  &-extra {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &-icon {
    font-size: @abbreviate-card-icon-font-size;
  }

  &-container:hover {
    cursor: pointer;
    border-color: @abbreviate-card-container-hover-border-color;
    box-shadow: @abbreviate-card-container-hover-box-shadow;
  }
}