@use '@angular/material' as mat;
@import '@angular/material';

// Navbar mixin
// Use theme to manage colors on navbar component
@mixin mic-navbar-override($theme) {
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $is-dark: map-get($theme, is-dark);

  $textColor: map-get($mic-grey, 500);
  $backgroundColor: map-get($background, nav);
  $subMenubackgroundColor: map-get($background, nav-menu);
  $primaryBackgroundColor: map-get($primary, A400);
  $primarySubMenubackgroundColor: map-get($background, background);

  @if $is-dark {
    $textColor: mat.m2-get-contrast-color-from-palette($primary, A400);
    $primaryBackgroundColor: map-get($mic-grey, 600);
  }

  .logo-group,
  .logo-commercial {
    @if $is-dark {
      background-image: url('../../../assets/images/logo-group-white.svg') !important;
    }
  }

  .mic-navbar {
    .mat-toolbar {
      color: map-get($mic-grey, A100);
      background-color: $primaryBackgroundColor;

      .logo-commercial {
        background-image: url('../../../assets/images/logo-commercial-white.svg') !important;
      }

      .logo-group {
        background-image: url('../../../assets/images/logo-group-white.svg') !important;
      }

      .mat-mdc-form-field-subscript-wrapper {
        height: 0px;
      }
      .mat-mdc-text-field-wrapper {
        max-height: 50px;
      }

      &.primary {
        .mat-mdc-tab:not(.mat-mdc-tab-disabled) .mdc-tab__text-label,
        .mat-mdc-tab-link:not(.mat-mdc-tab-disabled) .mdc-tab__text-label {
          color: $mic-brand-colors-white;
        }

        .mat-mdc-form-field {
          background-color: rgba(1, 1, 1, 0.1);

          .mdc-text-field--filled {
            background-color: transparent;
            .mdc-line-ripple::before,
            .mdc-line-ripple::after {
              border-bottom-color: $mic-brand-colors-white;
            }
          }
          input,
          input::placeholder {
            color: $mic-brand-colors-white;
          }
        }

        .mat-mdc-tab-link:hover,
        .mat-mdc-tab-link.mat-tab-label-active {
          border-color: map-get($mic-grey, A100);
          &:hover {
            background-color: rgba(153, 206, 246, 0.08);
            border-color: transparent;
          }
          span,
          mat-icon {
            color: $mic-brand-colors-white;
          }
        }
        .mic-navbar-links .mdc-tab-indicator .mdc-tab-indicator__content--underline {
          border-width: 5px;
          border-color: $mic-brand-colors-white !important;
        }
      }

      .mic-navbar-links {
        .primary {
          color: mat.m2-get-contrast-color-from-palette($primary, A400);

          .mat-mdc-tab-link.nav-tab-link,
          .nav-icon {
            color: mat.m2-get-contrast-color-from-palette($primary, A400);

            mat-icon {
              color: mat.m2-get-contrast-color-from-palette($primary, A400);
              text-shadow: none;
            }
          }

          .navbar-children {
            background-color: $primarySubMenubackgroundColor;

            .mat-mdc-tab-link {
              align-items: center;
              border-bottom: 5px $mic-brand-colors-white solid;

              &:hover {
                border-color: map-get($primary, A400);
              }
            }

            .mat-mdc-tab-link.nav-tab-link {
              * {
                color: map-get($primary, A400);
              }
            }
          }
        }

        .white {
          color: $textColor;

          .mat-mdc-tab-link.nav-tab-link {
            color: $textColor;
          }

          .navbar-children {
            color: $textColor;
            background-color: $subMenubackgroundColor;

            .mat-mdc-tab-link {
              border-bottom: 5px $subMenubackgroundColor solid;

              &:hover {
                border-color: map-get($primary, A400);
              }
            }
          }
        }

        .mat-mdc-tab-link-container .mat-mdc-tab-link:hover {
          background-color: $mic-layout-colors-white-disabled;
        }
      }

      &.white {
        background-color: $backgroundColor;
        color: $textColor;

        .mat-mdc-tab:not(.mat-mdc-tab-disabled) .mdc-tab__text-label,
        .mat-mdc-tab-link:not(.mat-mdc-tab-disabled) .mdc-tab__text-label {
          color: map-get($primary, A400);
        }

        .mat-mdc-form-field {
          background-color: rgba(1, 1, 1, 0.1);

          .mdc-text-field--filled {
            background-color: transparent;

            .mdc-line-ripple::before,
            .mdc-line-ripple::after {
              border-bottom-color: map-get($primary, A400);
            }
          }
          input,
          input::placeholder {
            color: map-get($primary, A400);
          }
        }

        .mat-mdc-tab-link {
          border-color: $backgroundColor;
        }

        .logo-commercial {
          background-image: url('../../../assets/images/logo-commercial.svg') !important;
          @if $is-dark {
            background-image: url('../../../assets/images/logo-commercial-white.svg') !important;
          }
        }

        .logo-group {
          background-image: url('../../../assets/images/logo-group.svg') !important;
          @if $is-dark {
            background-image: url('../../../assets/images/logo-group-white.svg') !important;
          }
        }

        .mat-mdc-tab-link:hover,
        .mat-tab-link.mat-tab-label-active {
          border-color: map-get($primary, A400) !important;
          &:hover {
            background-color: rgba(153, 206, 246, 0.08);
          }
        }

        .mic-navbar-links .mdc-tab-indicator .mdc-tab-indicator__content--underline {
          border-width: 5px;
          border-color: map-get($primary, A400) !important;
        }

        mat-icon {
          color: map-get($primary, A400) !important;
        }
      }

      .navbar-children {
        .mat-mdc-tab-link {
          &:hover {
            border-color: map-get($primary, A400);
          }
        }
      }

      button:hover {
        background-color: $mic-layout-colors-white-disabled;
      }

      mic-logo:hover {
        background-color: $mic-layout-colors-white-disabled;
      }
    }
  }
}
