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

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

.@{m-thumbnail-card-prefix-cls} {
  &-container {
    position: relative;
    max-width: @thumbnail-card-container-max-width;
    border: @thumbnail-card-container-border;
  }

  &-checkbox {
    position: absolute;
    top: @thumbnail-card-checkbox-top;
    left: @thumbnail-card-checkbox-left;
  }

  &-img {
    width: 100%;
    height: @thumbnail-card-img-height;
    border: @thumbnail-card-img-border;
  }

  &-status {
    height: @thumbnail-card-status-height;
    line-height: @thumbnail-card-status-line-height;
    text-align: center;
    background: @thumbnail-card-status-background;
    box-shadow: @thumbnail-card-status-box-shadow;

    i {
      margin-right: @thumbnail-card-status-i-margin-right;
    }

    &.@{m-thumbnail-card-prefix-cls}-status-failed {
      color: @thumbnail-card-status-failed-color;
    }

    &.@{m-thumbnail-card-prefix-cls}-status-success {
      color: @thumbnail-card-status-success-color;
    }
  }

  &-type {
    position: absolute;
    bottom: @thumbnail-card-type-bottom;
    width: 100%;
    height: @thumbnail-card-type-height;
    line-height: @thumbnail-card-type-line-height;
    color: @thumbnail-card-type-color;
    text-align: center;
    background: @thumbnail-card-type-background;
  }

  &-content {
    position: absolute;
    bottom: @thumbnail-card-content-bottom;
    width: 100%;
    text-align: center;
  }
}