@use '@angular/material' as mat;
@use '@finastra/fds-theme/color' as fds;

@mixin uxg-tabs-bgcolor() {
  $bg-color: var(--fds-background);

  &[activeTabBgColor='background'] {
    & > .mat-mdc-tab-body-wrapper {
      background-color: $bg-color;
    }

    & > .mat-mdc-tab-header {
      .mat-mdc-tab {
        &.mdc-tab--active {
          background-color: $bg-color;

          &::before {
            box-shadow: 2px 2px 0 0 $bg-color;
          }

          &::after {
            box-shadow: -2px 2px 0 0 $bg-color;
          }
        }
      }
    }
  }
}

@mixin theme($theme) {
  $border-color: var(--fds-primary);
  $default-bg: var(--fds-surface);

  .uxg-tabs {
    & > .mat-mdc-tab-header {
      border-bottom: 0;

      .mat-mdc-tab-labels::after {
        background: $border-color;
      }

      .mat-mdc-tab {
        &:not(.mdc-tab--active) {
          border-color: $border-color;
          .mdc-tab__text-label {
            @include fds.color(on-background);
          }
        }

        &.mat-mdc-tab-disabled {
          pointer-events: none;
          .mdc-tab__text-label {
            @include fds.color(on-surface-disabled);
          }
        }

        &.mdc-tab--active {
          @include fds.color(primary);
          @include mat.elevation(4);
          border-color: $border-color;
          background-color: $default-bg;

          &::after,
          &::before {
            border-color: $border-color;
          }

          &::before {
            box-shadow: 2px 2px 0px 0px $default-bg;
          }

          &::after {
            box-shadow: -2px 2px 0px 0px $default-bg;
          }
        }

        &:not(.mdc-tab--active)::before {
          @include fds.background(surface-disabled);
        }
      }
    }

    & > .mat-mdc-tab-body-wrapper {
      background-color: $default-bg;
    }

    &.inactive-tabs-on-dark > .mat-mdc-tab-header {
      .mat-mdc-tab {
        &:not(.mdc-tab--active) .mdc-tab__text-label {
          color: white;
        }

        &.mat-mdc-tab-disabled .mdc-tab__text-label {
          color: rgba(white, 0.4);
        }

        &:not(.mdc-tab--active)::before {
          background: rgba(white, 0.6);
        }
      }
      .mat-mdc-tab-header-pagination-chevron {
        opacity: 0.6;
        border-color: rgba(white, 0.6);
      }
    }

    @include uxg-tabs-bgcolor();
  }
}