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

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

.@{m-functional-card-prefix-cls}-container {
  width: @functional-card-container-width;
  height: @functional-card-container-height;
  border-radius: @functional-card-container-border-radius;

  .@{m-functional-card-prefix-cls}-bg {
    position: relative;
    width: 100%;
    height: @functional-card-container-bg-height;
    padding-left: @functional-card-container-bg-padding-left;
    color: @functional-card-container-bg-color;
    background-position: center;
    background-size: cover;

    &-block {
      opacity: 1;
      transition: opacity 0.25s ease-in-out;

      > i {
        position: absolute;
        top: @functional-card-container-bg-block-i-top;
        font-size: @functional-card-container-bg-block-font-size;
      }
    }

    &-operations {
      position: absolute;
      top: 50%;
      left: 50%;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transition: opacity 0.25s ease-in-out;
      transform: translate(-50%, -50%);

      > button {
        width: @functional-card-container-bg-operations-button-width;
        border-radius: @functional-card-container-bg-operations-button-border-radius;
      }

      > button:first-of-type {
        margin-bottom: @functional-card-container-bg-operations-button-firstoftype-margin-bottom;
      }
    }

    &-title {
      padding-top: @functional-card-container-bg-title-padding-top;
      margin: @functional-card-container-bg-title-margin;
      font-size: @functional-card-container-bg-title-font-size;
      font-weight: @functional-card-container-bg-title-font-weight;
      line-height: @functional-card-container-bg-title-line-height;
    }

    &-intro {
      font-size: @functional-card-container-bg-intro-font-size;
      opacity: @functional-card-container-bg-intro-opacity;
    }

    &-intro::after {
      display: block;
      width: @functional-card-container-bg-intro-after-width;
      padding-top: @functional-card-container-bg-intro-after-padding-top;
      content: "";
      border-bottom: @functional-card-container-bg-intro-after-border-bottom;
    }
  }

  .@{m-functional-card-prefix-cls}-detail {
    width: 100%;
    padding: @functional-card-container-detail-padding;
    background: @functional-card-container-detail-background;
    border-radius: @functional-card-container-detail-border-radius;

    &-name {
      padding: @functional-card-container-detail-name-padding;
      margin: @functional-card-container-detail-name-margin;
      font-size: @functional-card-container-detail-name-font-size;
      font-weight: @functional-card-container-detail-name-font-weight;
      line-height: @functional-card-container-detail-name-line-height;
    }

    &-desc {
      padding-top: @functional-card-container-detail-desc-padding-top;
      margin: @functional-card-container-detail-desc-margin;
      font-size: @functional-card-container-detail-desc-font-size;
      font-weight: @functional-card-container-detail-desc-font-weight;
      line-height: @functional-card-container-detail-desc-line-height;
      color: @functional-card-container-detail-desc-color;
      text-align: left;
    }
  }

  &:hover {
    .@{m-functional-card-prefix-cls}-bg-block {
      opacity: 0;
    }

    .@{m-functional-card-prefix-cls}-bg-operations {
      opacity: 1;
    }
  }
}