@use 'sass:math';
@use '../../_styles/variables' as *;
@use "pkg:@ohu-mobile/styles" as *;
@use '../../_styles/mixins' as *;

$popupHeaderPrefixClass: #{$popupPrefixClass}-header;

.#{$popupHeaderPrefixClass} {
  padding: 20px 120px 20px 30px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background: $popupHeaderBackground;
  @include hair-border($colorDivider, bottom) {
    border-style: solid;
  };
  &.is-confirm, &.is-text-center {
    padding: 20px 120px 20px 120px;
  }
  .#{$prefix}btn {
    color: $popupHeaderCloseButtonColor;
    font-size: $popupHeaderTextFontSize;
    > i {
      font-size: 1.3em;
    }
  }
  &__close {
    &.#{$prefix}btn {
      @include center(y);
    }
  }
  &.is-close-icon-right {
    .#{$popupHeaderPrefixClass}__close {
      right: 8px;
    }
  }
  &.is-close-icon-left {
    padding-left: 120px;
    .#{$popupHeaderPrefixClass}__close {
      left: 8px;
    }
  }
  &__cancel {
    @include center(y);
    left: 14px;
  }
  &__ok {
    @include center(y);
    right: 14px;
  }
  &.is-text-center {
    .#{$popupHeaderPrefixClass}__text {
      text-align: center;
    }
  }
  &__text {
    flex-grow: 1;
    flex-shrink: 0;
    color: $popupHeaderColor;
    &__title {
      font-size: $popupHeaderTextFontSize;
      line-height: math.div(50, 32) * 1em;
      &.has-minor {
        font-weight: bold;
      }
    }
    &__minor-title {
      color: $popupHeaderMinorTextColor;
      font-size: $popupHeaderMinorTextFontSize;
      font-weight: normal;
      line-height: math.div(40, 28) * 1em;
    }
  }
}