/*
 * desc: 赛事关注公众号弹窗组件样式
 * date: 2025-07-17
 * author: janfzhao
 * email: janfzhao@tencent.com
 */
@import '../../common/style/general/variables.scss';
@import '../../common/style/general/mixins/flex.scss';
@import './_var.scss';

.#{$prefix}-follow-mp {
  width: $fm-content-width;
  height: $fm-content-height;
  padding: .4rem .68rem;
  background: $fm-content-bg;
  background-size: 100% 100%;

  &__close {
    position: absolute;
    right: .32rem;
    top: .32rem;
    @include flex(row, center, center);
    width: $fm-close-width;
    height: $fm-close-height;
  }

  &__head {
    text-align: center;
    font-size: $fm-primary-font-size;
    color: $fm-text-color-primary;
  }

  &__body {
    padding: .64rem 0;

    &-imgwrap {
      width: $fm-imgwrap-width;
      height: $fm-imgwrap-width;
      padding: .12rem;
      border: $fm-imgwrap-border-width solid $fm-imgwrap-border-color;
      border-radius: $fm-imgwrap-radius;
      margin: .48rem auto;
    }

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

    &-ctrls {
      font-size: $fm-secondary-font-size;
      @include flex(row, center, center);
    }

    &-desc {
      font-size: $fm-secondary-font-size;
      color: $fm-text-color-secondary;
      text-align: center;
    }

    &-info {
      color: $fm-color-highlight;
    }
  }

  &__foot {
    @include flex(row, center, center);
  }
}