@use '../../abstract';
@use '../../base/token';

.cds-modal__header {
  position: relative;
  z-index: 1;
  background-color: var(--base-white);

  &-text {
    font-size: token.$font-size-3;
    font-weight: abstract.font-weight-to-number(token.$font-weights-commerce-sans-2);
    color: var(--gray-700);
  }

  &-supporting-text {
    font-size: token.$font-size-1;
    color: var(--gray-400);
  }

  &-close {
    @include abstract.absolute($top: 12px, $right: 12px);
    padding: 10px;
    width: 44px;
  }

  &-divider {
    border-bottom: 1px solid var(--gray-100);
  }
}

.cds-horizontal-left-aligned {
  padding: 20px 16px 0;

  &__padding-bottom {
    height: 20px;
  }

  @include abstract.media-bp-up('md') {
    padding: 24px 24px 0;
  }
}