.top-action-bar {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: space-between;
  width: 100%;

  &:has(> *:only-child:not(.t-brand)) { /* When there is only one element */
    justify-content: flex-end;
  }
}

.page-header.user-header .user-header-content {
  align-items: center;
  display: inherit;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
}

.page-header {
  align-items: flex-start;
  background-color: var(--off-white);
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  width: 100%;

  &.borderless {
    border-bottom: unset;
    padding-bottom: 0;
  }

  & > turbo-frame {
    width: 100%;
  }

  &:has(.right-action-bar) {
    flex-direction: row;
  }

  .inline-header { /* when .heading-wrapper needs to be wrapped (Usually when there is an adjacent image) */
    height: 100%;
    width: inherit;
  }

  .heading-wrapper {
    flex: 1;
    width: 100%;
  }

  &:not:has(.heading-wrapper) {
    h1, h2, h3, h4, h5, h6 {
      flex: 1;
    }
  }
}

/* BEM Page headers */
.page__header {
  align-items: center;
  border-bottom: 1px solid var(--light-gray);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  width: 100%;

  .heading-wrapper {
    width: 100%;
  }
}

.sub-header {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;

  .heading-wrapper, h1, h2, h3, h4, h5, h6 {
    flex: 1;
  }

  &.divider { /* Requires heading to be wrapped by span tag */
    display: block;
    overflow: hidden;
    position: relative;

    span {
      display: block;
      position: relative;
      vertical-align: baseline;

      &:after {
        border-top: 1px solid var(--light-gray);
        content: '';
        position: absolute;
        margin-left: 0.5rem;
        top: 50%;
        width: 100%;
      }
    }

    &.t-sub span::after {
      border-top: 1px solid var(--light-gray);
    }
    &.t-brand span::after {
      border-top: 1px solid var(--theme-tenth-opacity-color);
    }
  }
}


.heading-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  height: fit-content;

  &:has(> svg), &:has(> i), &:has(.temp-tooltip-wrapper), &:has(> .temp-icon-wrapper), &:has(> .skeleton__icon) { /* RYAL-2818: Change i to icon once icons are updated */
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
  }

  &.heading-wrapper--center {
    align-items: center;
    text-align: center;
  }

  /*no more changes*/
  &.row {
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
  }
}