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

.tileContainer {
  border: 0.0625rem solid $ui-03;
  height: 7.875rem;
  padding: layout.$spacing-05;
  margin: layout.$spacing-03 layout.$spacing-03;
}

.tileHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: layout.$spacing-03;
}

.headerLabel {
  @include type.type-style('heading-compact-01');
  color: $text-02;
}

.totalsLabel {
  @include type.type-style('label-01');
  color: $text-02;
}

.totalsValue {
  @include type.type-style('heading-04');
  color: $ui-05;
}

.headerLabelContainer {
  display: flex;
  align-items: center;
  height: layout.$spacing-07;
}

.arrowIcon {
  fill: var(--cds-link-primary, #0f62fe) !important;
}

.link {
  text-decoration: none;
  display: flex;
  align-items: center;
  color: $interactive-01;

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

// Overriding styles for RTL support
html[dir='rtl'] {
  .link {
    svg {
      margin-right: layout.$spacing-03;
      margin-left: unset;
      transform: scale(-1, 1);
    }
  }
}