@use "src/app/styles/variables" as *;
@use "src/app/styles/font" as *;

//@mixin mat-tab-dark() {
//  .mat-tab-label {
//    color: $white;
//  }
//}

@mixin mat-tab-color-label($color) {
  .nav-items-group {
    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
    .mat-tab-label-active {
      color: $color;
    }
  }
}

@mixin mat-tab-label-active-color($color) {
  .icons-wrapper, .tabs-content-wrapper {
    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
    & .mat-tab-label-active {
      & .tab-label, .mat-icon {
        color: $color;
      }
    }
  }
}

@mixin mat-tab-without-border() {
  .dashboard-mat-tab, .nav-items-group {
    .mat-mdc-tab-header {
      border: none;
    }
  }
}

@mixin mat-tab-label {
  /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
  div.mat-tab-label {
    padding: 0;
    min-width: 85px;
    color: $dark-grey;
    font-weight: $fw-lighter;

    @media (max-width: $small) {
      min-width: 75px;
    }
  }

  .dashboard-mat-tab {
    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
    div.mat-tab-label {
      @media (max-width: $small) {
        min-width: 25%;
      }
    }
  }

  .edit-nav-card {
    /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
    div.mat-tab-label {
      padding: 0 8px;
      min-width: 85px;
      font-weight: $fw-lighter;

      @media (max-width: $small) {
        min-width: 55px;
      }
    }
  }
}

@mixin mat-tab-label-dark {
  /*TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version.*/
  div.mat-tab-label {
    padding: 0;
    min-width: 85px;
    color: $white;
    font-weight: $fw-lighter;
  }
}
