@use '@mezzanine-ui/system/palette' as palette;
@use '@mezzanine-ui/system/spacing';
@use './content-header' as *;

.#{$prefix} {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: flex-start;
  gap: spacing.semantic-variable(gap, calm);

  &__title-area {
    align-items: flex-start;
    display: flex;
    flex-grow: 1;
    gap: spacing.semantic-variable(gap, tiny);
    max-width: spacing.semantic-variable(size, container, balanced);
    width: fit-content;

    .#{$prefix}__text-group {
      align-self: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }

  &__action-area {
    display: flex;
    align-items: center;
    gap: spacing.semantic-variable(gap, calm);
    width: fit-content;

    .#{$prefix}__utilities {
      display: flex;
      align-items: center;
      gap: spacing.semantic-variable(gap, base);
      width: fit-content;
    }
  }


  &--main {
    .#{$prefix}__title-area {
      gap: spacing.semantic-variable(gap, tiny);

      .#{$prefix}__text-group {
        padding: spacing.semantic-variable(gap, tiny) 0 spacing.semantic-variable(gap, tiny);
      }
    }

    .#{$prefix}__action-area {
      gap: spacing.semantic-variable(gap, calm);
    }
  }

  &--sub {
    gap: spacing.semantic-variable(gap, base);

    .#{$prefix}__action-area {
      gap: spacing.semantic-variable(gap, base);
    }
  }
}

.#{$prefix}--above1080px {
  @media (max-width: (1080px - 1px)) {
    display: none;
  }
}

.#{$prefix}--above680px {
  @media (max-width: (680px - 1px)) {
    display: none;
  }
}

.#{$prefix}--below1080px {
  @media (min-width: (1080px)) {
    display: none;
  }
}

.#{$prefix}--below680px {
  @media (min-width: (680px)) {
    display: none;
  }
}

.#{$prefix}--between680and1080px {
  @media (min-width: (1080px)) {
    display: none;
  }

  @media (max-width: (680px - 1px)) {
    display: none;
  }
}