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

.medicationEventTile {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: layout.$spacing-01 0 layout.$spacing-03;
  padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 layout.$spacing-03;
  background-color: #fff;
  border-left: layout.$spacing-03 solid var(--brand-03);
  color: $text-02;
  margin-bottom: layout.$spacing-05 !important;

  &.dispenseEvent {
    border-left: layout.$spacing-03 solid red;
  }

  &.isTablet {
    flex-direction: column;
    gap: layout.$spacing-05;
  }
}

.medicationName {
  font-size: layout.$spacing-05 !important;
}

.bodyLong01 {
  @include type.type-style('body-01');
  font-size: 13px !important;
}

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

.dosage,
.quantity,
.refills {
  color: $text-02;
  font-weight: bold;
}