@use '@carbon/layout';
@use '@carbon/type';
@use '@carbon/colors';

.header {
  @include type.type-style('body-compact-02');
  color: colors.$gray-70;
  height: layout.$spacing-12;
  background-color: colors.$white;
  border: 1px solid colors.$gray-20;
  border-left: 0px;
  display: flex;
  justify-content: space-between;
  margin-bottom: layout.$spacing-01;
}

.leftJustifiedItems {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 0.75rem;
}

.rightJustifieditems {
  @include type.type-style('body-compact-02');
  color: colors.$gray-70;
  padding-top: 1rem;
}

.pageName {
  @include type.type-style('heading-04');
}

.pageLabels {
  margin-left: 1rem;

  p:first-of-type {
    margin-bottom: 0.25rem;
  }
}

.dateAndLocation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-right: 1rem;
}

.value {
  margin-left: 0.25rem;
}

.middot {
  margin: 0 0.5rem;
}

.view {
  @include type.type-style('label-01');
}

svg.iconOverrides {
  width: 72 !important;
  height: 72 !important;
  fill: var(--brand-03);
}

.svgContainer svg {
  width: 72px;
  height: 72px;
  fill: var(--brand-03);
}

.manifestDetailHeader {
  display: flex;
  justify-content: space-between;
  padding: layout.$spacing-05;
  flex-flow: row wrap;
  align-items: center;
  background-color: colors.$white;
  gap: 2rem;
}

.manifestDetailContent {
  flex-grow: 1;
  gap: 0.5rem;
  flex-direction: column;
  display: flex;
}

.btnSet {
  display: flex;
  justify-content: space-between;
  margin-top: layout.$spacing-05;
  margin-bottom: layout.$spacing-05;
  flex-flow: row wrap;
  align-items: center;
  gap: layout.$spacing-02;
}

.btnSetRight {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: layout.$spacing-02;
}

.detailHeaderContainer {
  margin: layout.$spacing-05;
  flex-flow: row wrap;
  justify-content: space-between;
}

.detailHeaderContent {
  background-color: colors.$gray-10;
  width: fit-content;
}

.detailHeaderContentLoading {
  background-color: colors.$gray-10;
  max-width: 70%;
}

.detailHeaderContentRow {
  display: flex;
  flex-flow: row wrap;
  gap: layout.$spacing-08;
  align-items: center;
}

.samplesCountValue {
  @include type.type-style('heading-04');
}

.statusFilter {
  min-width: 300px;
}

.statusFilterContainer {
  padding: layout.$spacing-02;
}