@import "../theme/variable";
@import "../theme/mixins";

.mat-mdc-tab-group {
  &.qms-tab-group {
    .qms-tab-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      // color: theme-apply($tab-dark-background);
      font-family: Open Sans, Arial, Sans-Serif;
      font-weight: 600;
    }

    .qms-tab-label:hover {
      font-weight: 600;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mdc-tab--active {
      .qms-tab-label {
        color: theme-apply($active);
        font-weight: 600;
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-disabled {
      .qms-tab-label {
        color: black(0.24);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-ripple.mat-tab-label.mat-tab-disabled:hover {
      background: white;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-label {
      opacity: 1;
      height: auto;
      min-height: 48px;
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &:hover,
      &:focus-visible,
      &.cdk-keyboard-focused:not(.mat-tab-disabled),
      &.cdk-program-focused:not(.mat-tab-disabled),
      .mat-ripple-element {
        background: theme-apply($tab-disable-background);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: black(0.38);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: theme-apply($tab-border);
      }
    }

    .mdc-tab-indicator__content--underline {
      border-color: theme-apply($active);
      border-top-width: 3px;
    }
  }

  &.qms-tab-group-advanced {
    .qms-tab-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: theme-apply($popup-title-color);
      font-family: Open Sans, Arial, Sans-Serif;
      font-weight: 600;
      .mat-icon {
        color: black(0.6);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mdc-tab--active {
      .qms-tab-label {
        color: theme-apply($active);
        font-weight: 600;
        .mat-icon {
          color: theme-apply($active);
        }
      }

      &:hover {
        .mdc-tab-indicator__content--underline {
          border-top-width: 3px;
          border-color: theme-apply($active);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-disabled {
      .qms-tab-label {
        color: black(0.38);
        .mat-icon {
          color: black(0.38);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-ripple.mat-tab-label.mat-tab-disabled:hover {
      background: white;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-label {
      opacity: 1;
      height: auto;
      min-height: 48px;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-ripple.mat-tab-label {
      &:hover {
        background: theme-apply($tab-hover-background);
        .qms-tab-label {
          font-weight: 600;
        }
      }

      &:focus-visible {
        background-color: theme-apply($tab-hover-background);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.cdk-keyboard-focused:not(.mat-tab-disabled),
      &.cdk-program-focused:not(.mat-tab-disabled) {
        background: theme-apply($tab-hover-background);
      }

      .mat-ripple-element {
        background-color: theme-apply($tab-hover-background);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.mdc-tab--active {
        &:hover {
          background: theme-apply($tab-hover-background);
          .qms-tab-label {
            font-weight: 600;
          }

          .mdc-tab-indicator__content--underline {
            border-top-width: 3px;
            border-color: theme-apply($active);
          }
        }
        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
        &:focus-visible,
        .mat-ripple-element,
        &.cdk-keyboard-focused:not(.mat-tab-disabled),
        &.cdk-program-focused:not(.mat-tab-disabled) {
          background: theme-apply($tab-disable-background);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: black(0.38);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: theme-apply($tab-border);
      }
    }

    .mdc-tab-indicator__content--underline {
      border-color: theme-apply($active);
      border-top-width: 3px;
    }
  }

  &.qms-tab-group-advanced.primary {
    // background: theme-apply($tab-dark-background);
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-labels {
      border-bottom: 1px solid theme-apply($tab-primary-label);
    }
    .qms-tab-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: white;
      font-weight: 600;
      .mat-icon {
        color: theme-apply($tab-primary-icon);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-disabled {
      .qms-tab-label {
        color: theme-apply($tab-primary-label);
        .mat-icon {
          color: theme-apply($tab-primary-label);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mdc-tab--active {
      .qms-tab-label {
        color: white;
        font-weight: 600;
        .mat-icon {
          color: white;
        }
      }
      &:hover {
        .mdc-tab-indicator__content--underline {
          border-top-width: 3px;
          border-color: theme-apply($active);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-ripple.mat-tab-label {
      &:hover {
        background: theme-apply($tab-primary-background-hover);
        .qms-tab-label {
          font-weight: 600;
        }
      }

      &:focus-visible {
        background-color: theme-apply($tab-primary-label);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.cdk-keyboard-focused:not(.mat-tab-disabled),
      &.cdk-program-focused:not(.mat-tab-disabled) {
        background-color: theme-apply($tab-primary-label);
      }

      .mat-ripple-element {
        background-color: theme-apply($tab-primary-label);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.mdc-tab--active {
        &:hover {
          background: theme-apply($tab-primary-background-hover);
          .qms-tab-label {
            font-weight: 600;
          }

          .mdc-tab-indicator__content--underline {
            border-top-width: 3px;
            border-color: theme-apply($active);
          }
        }

        &:focus-visible {
          background-color: theme-apply($tab-primary-label);
        }

        .mat-ripple-element {
          background-color: theme-apply($tab-primary-label);
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.mat-tab-disabled:hover {
        // background: theme-apply($tab-dark-background);
      }
    }

    .mat-ink-bar {
      background-color: white;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: theme-apply($tab-primary-border);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: white;
      }
    }
  }

  &.qms-tab-group-advanced-fixed {
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-list {
      max-width: 100%;
      position: relative;
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-ripple.mat-tab-label {
        flex: 1 1 auto;
      }
    }
  }
}

.mat-mdc-tab-nav-bar {
  &.qms-tab-group {
    .qms-tab-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      // color: theme-apply($tab-dark-background);
      font-family: Open Sans, Arial, Sans-Serif;
      font-weight: 600;
    }

    .qms-tab-label:hover {
      font-weight: 600;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mdc-tab--active {
      color: theme-apply($active);
      font-weight: 600;

      &:hover {
        .mdc-tab-indicator__content--underline {
          border-top-width: 3px;
          border-color: theme-apply($active);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-disabled {
      &.qms-tab-label,
      .qms-tab-label {
        color: black(0.24);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-mdc-tab-link.mat-tab-disabled:hover {
      background: white;
    }

    .mat-mdc-tab-link {
      opacity: 1;
      height: auto;
      min-height: 48px;
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &:hover,
      &:focus-visible,
      &.cdk-keyboard-focused:not(.mat-tab-disabled),
      &.cdk-program-focused:not(.mat-tab-disabled),
      .mat-ripple-element {
        background: theme-apply($tab-disable-background);
      }
    }

    .mat-mdc-tab-link:hover {
      font-weight: 600;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: black(0.38);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: theme-apply($tab-border);
      }
    }

    .mdc-tab-indicator__content--underline {
      border-top-width: 3px;
      border-color: theme-apply($active);
    }

    .mdc-tab--active {
      .mdc-tab__text-label {
        color: theme-apply($active);
        font-weight: 600;
      }

      &:hover {
        .mdc-tab-indicator__content--underline {
          border-top-width: 3px;
          border-color: theme-apply($active);
        }
      }
    }
  }

  &.qms-tab-group-advanced {
    .qms-tab-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      // color: theme-apply($tab-dark-background);
      font-family: Open Sans, Arial, Sans-Serif;
      font-weight: 600;
      .mat-icon {
        color: black(0.6);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mdc-tab--active {
      &.qms-tab-label {
        font-weight: 600;
        color: theme-apply($active);
        .mat-icon {
          color: theme-apply($active);
        }
      }

      &:hover {
        .mdc-tab-indicator__content--underline {
          border-top-width: 3px;
          border-color: theme-apply($active);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-disabled {
      &.qms-tab-label,
      .qms-tab-label {
        color: black(0.38);
        .mat-icon {
          color: black(0.38);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-mdc-tab-link.mat-tab-disabled:hover {
      background: white;
    }

    .mat-mdc-tab-link {
      opacity: 1;
      height: auto;
      min-height: 48px;
    }

    .mat-mdc-tab-link {
      &:hover {
        background: theme-apply($tab-hover-background);
        font-weight: 600;
      }

      &:focus-visible {
        background-color: theme-apply($tab-hover-background);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.cdk-keyboard-focused:not(.mat-tab-disabled),
      &.cdk-program-focused:not(.mat-tab-disabled) {
        background: theme-apply($tab-hover-background);
      }

      .mat-ripple-element {
        background-color: theme-apply($tab-hover-background);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.mdc-tab--active {
        &:hover {
          background: theme-apply($tab-hover-background);
          .qms-tab-label {
            font-weight: 600;
          }

          .mdc-tab-indicator__content--underline {
            border-top-width: 3px;
            border-color: theme-apply($active);
          }
        }
        /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
        &:focus-visible,
        .mat-ripple-element,
        &.cdk-keyboard-focused:not(.mat-tab-disabled),
        &.cdk-program-focused:not(.mat-tab-disabled) {
          background: theme-apply($tab-disable-background);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: black(0.38);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: theme-apply($tab-border);
      }
    }
  }

  &.qms-tab-group-advanced.primary {
    // background: theme-apply($tab-dark-background);

    .qms-tab-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: white;
      font-weight: 600;
      .mat-icon {
        color: theme-apply($tab-primary-icon);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-disabled {
      &.qms-tab-label {
        color: theme-apply($tab-primary-label);
        .mat-icon {
          color: theme-apply($tab-primary-label);
        }
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mdc-tab--active {
      color: white;
      font-weight: 600;
      .mat-icon {
        color: white;
      }

      &:hover {
        .mdc-tab-indicator__content--underline {
          border-top-width: 3px;
          border-color: theme-apply($active);
        }
      }
    }

    .mat-mdc-tab-link {
      &:hover {
        background: theme-apply($tab-primary-background-hover);
        font-weight: 600;
      }

      &:focus-visible {
        background-color: theme-apply($tab-primary-label);
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.cdk-keyboard-focused:not(.mat-tab-disabled),
      &.cdk-program-focused:not(.mat-tab-disabled) {
        background-color: theme-apply($tab-primary-label);
      }

      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.mdc-tab--active {
        &:hover {
          background: theme-apply($tab-primary-background-hover);
          .qms-tab-label {
            font-weight: 600;
          }

          .mdc-tab-indicator__content--underline {
            border-top-width: 3px;
            border-color: theme-apply($active);
          }
        }

        &:focus-visible {
          background-color: theme-apply($tab-primary-label);
        }

        .mat-ripple-element {
          background-color: theme-apply($tab-primary-label);
        }
      }
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      &.mat-tab-disabled:hover {
        // background: theme-apply($tab-dark-background);
      }
    }

    .mat-ink-bar {
      background-color: white;
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination.mat-tab-header-pagination-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: theme-apply($tab-primary-border);
      }
    }
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-header-pagination {
      /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
      .mat-tab-header-pagination-chevron {
        border-color: white;
      }
    }
  }

  &.qms-tab-group-advanced-fixed {
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    /* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
    .mat-tab-list {
      max-width: 100%;
      position: relative;

      .mat-mdc-tab-link {
        flex: 1 1 auto;
      }
    }
  }
}
