@use '@carbon/layout';
@use '@carbon/type';
@use '../vars' as *;

.desktopHeader,
.tabletHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: layout.$spacing-04 0 layout.$spacing-04 layout.$spacing-05;
  background-color: $ui-background;

  h4:after {
    content: '';
    display: block;
    width: layout.$spacing-07;
    padding-top: 0.188rem;
    border-bottom: 0.375rem solid var(--brand-03);
  }
}

.desktopHeader {
  height: layout.$spacing-09;
  h4 {
    @include type.type-style('heading-compact-02');
    color: $text-02;
  }
}

.tabletHeader {
  height: 4.5rem;
  h4 {
    @include type.type-style('heading-03');
    color: $text-02;
  }
}

// Overriding styles for RTL support
html[dir='rtl'] {
  .desktopHeader,
  .tabletHeader {
    text-align: right;
    padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
  }
}