@use '@carbon/colors';
@use '@carbon/layout';
@use '@carbon/type';
@use '@openmrs/esm-styleguide/src/vars' as *;

.productiveHeading02 {
  @include type.type-style('heading-compact-02');
  margin-bottom: layout.$spacing-05;
}

.productiveHeading02Light {
  @include type.type-style('heading-compact-02');
  margin-bottom: layout.$spacing-05;
  color: colors.$gray-70;
}

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

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: layout.$spacing-05;
}

.halfWidthInDesktopView {
  width: calc(50% - layout.$spacing-05);
}

.patientPhoto {
  display: flex;
  justify-content: center;
}

.nameField {
  grid-row: 1;
  grid-column: 1;
}

.nameField > :global(.cds--content-switcher) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: max-content;
  justify-content: flex-start;
}

.contentSwitcher {
  margin-bottom: layout.$spacing-05;
}

.dobField > :global(.cds--content-switcher) {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: max-content;
  justify-content: flex-start;
}

.photoExtension {
  margin-bottom: layout.$spacing-05;
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
}

.sexField,
.dobField,
.dodField {
  margin-bottom: layout.$spacing-05;

  span {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: start;
  }
}

.nonCodedCauseOfDeath {
  margin-top: layout.$spacing-04;
}

.timeOfDeathContainer {
  display: flex;
  align-items: center;
}

.timeOfDeathField {
  flex: none;
  margin-left: layout.$spacing-02;
}

.dobContentSwitcherLabel {
  margin-bottom: layout.$spacing-03;
}

.identifierLabelText {
  display: flex;
  align-items: center;
}

.arrowRightIcon {
  fill: currentColor !important;
}

.configureIdentifiersButton {
  display: flex;
  align-items: center;
  margin: 0 0 layout.$spacing-05 layout.$spacing-05;

  svg {
    margin-left: layout.$spacing-03;
  }

  .customField {
    margin-bottom: layout.$spacing-05;
  }
}

.attributeField {
  margin-bottom: layout.$spacing-05;
}

.locationAttributeFieldContainer {
  position: relative;

  .loadingContainer {
    background-color: colors.$white;
    position: absolute;
    right: layout.$spacing-07;
    bottom: layout.$spacing-02;
  }
}

:global(.omrs-breakpoint-lt-desktop) {
  .grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .nameField {
    grid-row: 2;
    grid-column: 1;
  }

  .photoExtension {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }

  .radioButton label {
    height: layout.$spacing-09 !important;
  }

  .halfWidthInDesktopView {
    width: 100%;
  }
}

.radioFieldError {
  color: colors.$red-60;
  display: block;
  font-weight: 400;
  max-height: 12.5rem;
  overflow: visible;
  font-size: layout.$spacing-04;
  letter-spacing: 0.32px;
  line-height: 1.34;
  margin: layout.$spacing-02 0 0;
}