@import "~carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles";
@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/spacing";
@import "~carbon-components/src/globals/scss/vendor/@carbon/layout/scss/generated/layout";
@import "carbon-components/scss/globals/scss/typography.scss";
@import "~@openmrs/esm-styleguide/src/vars";

$ui-01: #f4f4f4;
$ui-02: #ffffff;
$ui-03: #e0e0e0;
$ui-05: #161616;
$ui-background: #ffffff;
$color-gray-70: #525252;
$color-blue-60-2: #0f62fe;
$color-yellow-50: #feecae;
$inverse-support-03: #f1c21b;
$warning-background: #fff8e1;
$openmrs-background-grey: #f4f4f4;
$danger: #da1e28;
$interactive-01: #0f62fe;
$brand-teal-01: #3197D9;
$ohri-input-width: 22.313rem;
$ohri-home-background: #ededed;

$brand-color-01: #1A3054; // primary
$brand-color-02: #131E35; // darker
$brand-color-03: #3197D9; // underline - 3197D9
$button-primary: #0078A6;

.productiveHeading01 {
  @include carbon--type-style("productive-heading-01");
}

.productiveHeading02 {
  @include carbon--type-style("productive-heading-02");
}

.productiveHeading03 {
  @include carbon--type-style("productive-heading-03");
}

.productiveHeading04 {
  @include carbon--type-style("productive-heading-04");
}

.productiveHeading05 {
  @include carbon--type-style("productive-heading-05");
}

.productiveHeading06 {
  @include carbon--type-style("productive-heading-06");
}

.bodyShort01 {
  @include carbon--type-style("body-short-01");
}

.helperText01 {
  @include carbon--type-style("helper-text-01");
}

.bodyShort02 {
  @include carbon--type-style("body-short-02");
}

.bodyLong01 {
  @include carbon--type-style("body-long-01");
}

.bodyLong02 {
  @include carbon--type-style("body-long-02");
}

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

.tabContainer {
  margin-top: 16px;
  padding-left: 1rem;
  background-color: #ffffff;

}


.text01 {
  color: $text-01;
}

.text02 {
  color: $text-02;
}

.textDanger {
  color: $danger;
}

.textPrimary {
  color: $button-primary;
}

aside {
  background-color: $ui-02  !important;
}

// Login Overrides

div[class*='-esm-login__styles__center']>img {
  width: 140px; // design has 120px
}

:global(.tab-12rem)>button {
  width: 12rem !important;
}

:global(.tab-14rem)>button {
  width: 14rem !important;
}

:global(.tab-16rem)>button {
  width: 16rem !important;
}

:global(.bx--overflow-menu)>div {
  width: 15rem !important;
}

//
.textInput {
  background-color: #fdfcdc !important;
  border: 1px solid #8d8d8d;
}

.textInputButton {
  display: flex;
  align-items: end;

  button {
    height: 40px;
  }
}

.basicCard {
  background: #fff;
  margin-top: 32px;
  .basicCardHeader {
    margin-bottom: 10px;
    border-bottom: 1px solid #1BBC9B;
    padding: 10px;

    span {
      color: #1BBC9B;
      font-weight: 600;
    }
  }

  .basicCardBody {
    padding: 10px;
  }
}