@import url("./components/accordionV2.scss");
@import url("./components/backLinkV2.scss");
@import url("./components/bodyContainerV2.scss");
@import url("./components/bottomSheetV2.scss");
@import url("./components/breadcrumbV2.scss");
@import url("./components/buttonsV2.scss");
@import url("./components/cardlabelV2.scss");
@import url("./components/cardbasedoptionsV2.scss");
@import url("./components/cardV2.scss");
@import url("./components/checkboxV2.scss");
@import url("./components/dividerV2.scss");
@import url("./components/errorMessageV2.scss");
@import url("./components/fieldV1.scss");
@import url("./components/FormComposerV2.scss");
@import url("./components/infobuttonV2.scss");
@import url("./components/alertCardV2.scss"); 
@import url("./components/labelFieldPairV2.scss");
@import url("./components/mobileNumberV2.scss");
@import url("./components/multiSelectDropdownV2.scss");
@import url("./components/panelCardV2.scss");
@import url("./components/panelV2.scss");
@import url("./components/popUpV2.scss");
@import url("./components/radiobtnV2.scss");
@import url("./components/chipV2.scss");
@import url("./components/selectDropdownV2.scss");
@import url("./components/stepperV2.scss");
@import url("./components/switchV2.scss");
@import url("./components/selectionTagV2.scss");
@import url("./components/textareaV2.scss");
@import url("./components/textblockV2.scss");
@import url("./components/textInputV2.scss");
@import url("./components/timelineV2.scss");
@import url("./components/toastV2.scss");
@import url("./components/toggleV2.scss");
@import url("./components/treeSelectV2.scss");
@import url("./components/fileUploadV2.scss");
@import url("./components/summaryCardFieldPairV2.scss");
@import url("./components/footerV2.scss");
@import url("./components/headerdropdownV2.scss");
@import url("./components/headerV2.scss");
@import url("./components/tabV2.scss");
@import url("./components/sidenavV2.scss");
@import url("./components/hamburgerV2.scss");
@import url("./components/tooltipwrapperV2.scss");
@import url("./components/tagV2.scss");
@import url("./components/landingpagecardV2.scss");
@import url("./components/menuCardV2.scss");
@import url("./components/otpInputV2.scss");
@import url("./components/tableV2.scss");
@import url("./components/sidePanelV2.scss");
@import url("./components/metricCardV2.scss");
@import url("./components/formCardV2.scss");
@import url("./components/filterCardV2.scss");
@import url("./components/summaryCardV2.scss");
@import url("./components/loaderV2.scss");

/* pages */
@import url("./pages/employee/index.scss");

/* important to be remove after fixing the components */
.light {
  &-primary {
    color: theme(digitv2.lightTheme.primary-1) !important;

    &-button {
      background-color: theme(digitv2.lightTheme.primary-1);
    }

    &-bg {
      background-color: theme(digitv2.lightTheme.primary-bg);
    }
  }

  &-text-color {
    &-primary {
      color: theme(digitv2.lightTheme.text-primary);
    }

    &-secondary {
      color: theme(digitv2.lightTheme.text-secondary);
    }

    &-disabled {
      color: theme(digitv2.lightTheme.text-disabled);
    }
  }

  &-background {
    background-color: theme(digitv2.lightTheme.generic-background);
  }

  &-paper {
    &-primary {
      background-color: theme(digitv2.lightTheme.paper-primary) !important;

      &-color {
        color: theme(digitv2.lightTheme.paper-primary) !important;
      }
    }

    &-secondary {
      background-color: theme(digitv2.lightTheme.paper-secondary);
    }
    &-border {
      border: 0.5px solid;
      border-radius: 0.5rem;
      border-color: theme(digitv2.lightTheme.generic-background);
    }

    &-border {
      border-radius: 4px;
      border-style: solid;
      border-width: 1px;
      border-color: theme(digitv2.lightTheme.generic-divider);
    }
  }

  &-divider {
    background-color: theme(digitv2.lightTheme.generic-divider);
  }

  &-header-sidenav {
    color: theme(digitv2.lightTheme.primary-2);
  }

  &-input-border {
    border-color: theme(digitv2.lightTheme.generic-inputborder);
  }
}

.alert {
  &-error {
    color: theme(digitv2.lightTheme.alert-error);

    &-bg {
      background-color: theme(digitv2.lightTheme.alert-errorbg);
    }

    &-border {
      border-color: theme(digitv2.lightTheme.alert-error) !important;
    }
  }

  &-success {
    color: theme(digitv2.lightTheme.alert-success);

    &-bg {
      background-color: theme(digitv2.lightTheme.alert-successbg);
    }
  }

  &-info {
    color: theme(digitv2.alert.info);

    &-bg {
      background-color: theme(digitv2.alert.info-bg);
    }
  }
}

.chart {
  &-item-1 {
    color: theme(digitv2.chart.chart-1);
  }

  &-item-1-gradient {
    color: theme(digitv2.chart.chart-1-gradient);
  }

  &-item-2 {
    color: theme(digitv2.chart.chart-2);
  }

  &-item-2-gradient {
    color: theme(digitv2.chart.chart-2-gradient);
  }

  &-item-3 {
    color: theme(digitv2.chart.chart-3);
  }

  &-item-4 {
    color: theme(digitv2.chart.chart-4);
  }

  &-item-5 {
    color: theme(digitv2.chart.chart-5);
  }
}

.color-constants-story{

  &.primary-1{
    background-color: theme(digitv2.lightTheme.primary-1);
  }
  &.primary-bg{
    background-color: theme(digitv2.lightTheme.primary-bg);
  }
  &.primary-2{
    background-color: theme(digitv2.lightTheme.primary-2);
  }
  &.text-primary{
    background-color: theme(digitv2.lightTheme.text-primary);
  }
  &.text-secondary{
    background-color: theme(digitv2.lightTheme.text-secondary);
  }
  &.text-disabled{
    background-color: theme(digitv2.lightTheme.text-disabled);
  }
  &.alert-error{
    background-color: theme(digitv2.lightTheme.alert-error);
  }
  &.alert-errorbg{
    background-color: theme(digitv2.lightTheme.alert-errorbg);
  }
  &.alert-success{
    background-color: theme(digitv2.lightTheme.alert-success);
  }
  &.alert-successbg{
    background-color: theme(digitv2.lightTheme.alert-successbg);
  }
  &.alert-info{
    background-color: theme(digitv2.lightTheme.alert-info);
  }
  &.alert-infobg{
    background-color: theme(digitv2.lightTheme.alert-infobg);
  }
  &.alert-warning{
    background-color: theme(digitv2.lightTheme.alert-warning);
  }
  &.alert-warningbg{
    background-color: theme(digitv2.lightTheme.alert-warning-bg);
  }
  &.generic-background{
    background-color: theme(digitv2.lightTheme.generic-background);
  }
  &.generic-divider{
    background-color: theme(digitv2.lightTheme.generic-divider);
  }
  &.generic-inputborder{
    background-color: theme(digitv2.lightTheme.generic-inputborder);
  }
  &.paper-primary{
    background-color: theme(digitv2.lightTheme.paper-primary);
  }
  &.paper-secondary{
    background-color: theme(digitv2.lightTheme.paper-secondary);
  }
}

.typography-story{
  &.heading-m{
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.heading-m.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.heading-m.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.heading-m.desktop);
    }
  }

  &.heading-s {
    font-family: theme(digitv2.fontFamily.sans);
    font-style: theme(digitv2.fontStyle.normal);
    font-weight: theme(digitv2.fontWeight.bold);
    line-height: theme(digitv2.lineHeight.lineheight1);

    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.heading-s.mobile);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.heading-s.tablet);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.heading-s.desktop);
    }
  }

  &.body-s {
    @media (max-aspect-ratio: 9/16) {
      /* Media query for mobile */
      font-size: theme(digitv2.fontSize.body-s.mobile);
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.regular);
      line-height: theme(digitv2.lineHeight.lineheight2);
    }

    @media (min-aspect-ratio: 9/16) and (max-aspect-ratio: 3/4) {
      /* Media query for tablets */
      font-size: theme(digitv2.fontSize.body-s.tablet);
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.regular);
      line-height: theme(digitv2.lineHeight.lineheight2);
    }

    @media (min-aspect-ratio: 3/4) {
      /* Media query for desktop */
      font-size: theme(digitv2.fontSize.body-s.desktop);
      font-family: theme(digitv2.fontFamily.sans);
      font-style: theme(digitv2.fontStyle.normal);
      font-weight: theme(digitv2.fontWeight.regular);
      line-height: theme(digitv2.lineHeight.lineheight2);
    }
  }
}

.sb-main-padded{
  &.sb-show-main{
    background-color: theme(digitv2.lightTheme.paper-primary);
  }
}