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

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

.warningContainer {
  background-color: colors.$red-50;
  padding: layout.$spacing-04;
  margin: layout.$spacing-03 0 layout.$spacing-03;
  display: flex;
  justify-content: space-between;

  .warning {
    @include type.type-style('heading-01');
    color: colors.$gray-100;
  }
}

.form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 50%;
}

.grid {
  margin: 0 layout.$spacing-05;
  padding: 0rem;
}

.input {
  margin-top: layout.$spacing-05;
}

.inputRow {
  margin-top: layout.$spacing-05;
  display: flex;
  flex: 1;
}

.datePickersRow {
  display: flex;
  flex-wrap: nowrap;
  gap: layout.$spacing-05; // Adjust gap between columns
  align-items: center;
  width: 100%;
}

.button {
  height: layout.$spacing-10;
  display: flex;
  align-content: flex-start;
  align-items: baseline;
  min-width: 20%;
}

.buttonSet {
  padding: 0rem;
  margin-top: layout.$spacing-05;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: layout.$spacing-05;
}

.datesContainer {
  padding: 0rem;
  justify-content: space-between;
  width: 100%;
  display: flex;
}

.inlineActions {
  display: flex;
  gap: layout.$spacing-05;
  /* Adjust the spacing as needed */
}

.formTitle {
  @include type.type-style('heading-02');
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: layout.$spacing-05;
  row-gap: 1.5rem;
  position: relative;

  &::after {
    content: '';
    display: block;
    width: 2rem;
    border-bottom: 0.375rem solid var(--brand-03);
    position: absolute;
    bottom: -0.75rem;
    left: 0;
  }

  & > span {
    @include type.type-style('body-01');
  }
}

.sectionHeader {
  @include type.type-style('heading-02');
}

:global(.omrs-breakpoint-lt-desktop) {
  .form {
    height: var(--tablet-workspace-window-height);
  }

  .buttonSet {
    padding: layout.$spacing-06 layout.$spacing-05;
    background-color: colors.$white;
    justify-content: flex-end;
    gap: layout.$spacing-05;
  }
}

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

.datePickerInput span,
.datePickerInput div,
.datePickerInput input,
.datePickerInput {
  min-width: 100%;
}