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

@m-page-banner-prefix-cls: m-page-banner;

.@{m-page-banner-prefix-cls}-container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: @page-banner-container-height;
  min-height: @page-banner-container-min-height;
  padding: @page-banner-container-padding;
  margin-bottom: @page-banner-container-margin-bottom;
  color: @page-banner-container-color;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: @page-banner-container-page-radius;

  .title {
    font-size: @page-banner-container-title-font-size;
    font-weight: @page-banner-container-title-font-weight;
    line-height: @page-banner-container-title-font-height;
  }

  .desc {
    height: @page-banner-container-desc-height;
    margin-top: @page-banner-container-desc-margin-top;
    font-size: @page-banner-container-font-size;
    font-weight: @page-banner-container-font-weight;
    line-height: @page-banner-container-line-height;
    color: @page-banner-container-color;
  }

  .icon {
    position: absolute;
    top: @page-banner-container-icon-top;
    right: @page-banner-container-icon-right;
    cursor: pointer;
    opacity: @page-banner-container-icon-opacity;
  }
}