@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;
$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");
}

.text01 {
  color: $text-01;
}

.text02 {
  color: $text-02;
}

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;
}

nav :global(.bx--accordion__title) {
  color: #525252;
  font-weight: 600 !important;
}

nav :global(.bx--accordion__content) {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
}

nav :global(.bx--accordion__content) > a {
  background-color: #cecece !important;
  color: #161616 !important;
  border-left-color: var(--brand-01)  !important;
  font: bolder;
}