@use '@angular/material' as mat;
@use 'sass:map';
@use '../../colors' as colors;
// Material paginator mixin
@mixin mat-paginator-override($theme) {
  $accent: map.get($theme, primary);
  $is-dark: map.get($theme, is-dark);

  mic-paginator {
    /*******  default style *******/
    // default color
    .mat-mdc-paginator {
      &.hidden {
        display: none !important;
      }
      .mat-mdc-paginator-page-size-label,
      .mat-mdc-paginator-range-label {
        letter-spacing: normal;
        font-size: 12px;
      }
      .mat-mdc-select-value {
        font-size: 12px;
      }
    }

    .mat-mdc-paginator-page-size-select {
      .mat-mdc-text-field-wrapper {
        &.mdc-text-field {
          background-color: transparent;
          .mdc-line-ripple {
            &::before,
            &::after {
              border-bottom-color: transparent !important;
            }
          }
        }
      }
    }

    .mat-mdc-icon-button {
      &[disabled] {
        @if ($is-dark) {
          color: map.get(colors.$mic-grey, A500);
          background-color: transparent;
        }
      }
    }

    // accented color
    &[color='accent'] {
      .mat-mdc-paginator-container {
        background-color: map.get($accent, A400);
        color: map.get(colors.$mic-grey, A100);
        @if $is-dark {
          background-color: map.get(colors.$mic-blue, 50);
          color: map.get(colors.$mic-grey, 900);
        }
      }

      .mat-mdc-select {
        .mat-mdc-select-value {
          color: map.get(colors.$mic-grey, A100);
          @if $is-dark {
            color: map.get(colors.$mic-grey, 900);
          }
        }

        .mat-mdc-select-arrow {
          color: map.get(colors.$mic-grey, A100);
          @if $is-dark {
            color: map.get(colors.$mic-grey, 900);
          }
        }
      }

      .mat-mdc-paginator-range-actions {
        .mat-mdc-icon-button {
          @if ($is-dark) {
            color: map.get(colors.$mic-grey, 900);
          }
          .mat-mdc-paginator-icon {
            fill: map.get(colors.$mic-grey, A100);
            @if ($is-dark) {
              fill: map.get(colors.$mic-grey, A700);
            }
          }

          &[disabled] {
            @if ($is-dark) {
              background-color: transparent;
            }
            .mat-mdc-paginator-icon {
              fill: map.get(colors.$mic-grey, A500);
            }
          }
        }

        .mic-page-button {
          color: map.get(colors.$mic-grey, A100);
          &:focus {
            outline: 2px solid map.get(colors.$mic-blue, 50);
            outline-offset: 2px;
          }
          @if $is-dark {
            color: map.get(colors.$mic-grey, 900);
          }

          &.mic-current-page {
            color: map.get(colors.$mic-grey, A700);
            background-color: map.get(colors.$mic-blue, 50);
            @if $is-dark {
              color: map.get(colors.$mic-grey, A100);
              background-color: map.get(colors.$mic-blue, A400);
            }
            cursor: default;
          }
        }

        .mat-mdc-button-base {
          &:hover {
            background-color: map.get(colors.$mic-blue, A200);
            color: map.get(colors.$mic-grey, A100);
            .mat-mdc-paginator-icon {
              fill: map.get(colors.$mic-grey, A100);
            }

            @if $is-dark {
              color: map.get(colors.$mic-grey, A100);
              background-color: map.get($accent, A400);
              .mat-mdc-paginator-icon {
                fill: map.get(colors.$mic-grey, A100);
              }
            }
          }
        }
      }
    }

    /*******  page number style *******/
    // default color
    .mat-mdc-paginator-range-actions {
      .mat-mdc-button-base {
        margin: 4px;
        @if $is-dark {
          color: map.get(colors.$mic-grey, A100);
          .mat-mdc-paginator-icon {
            fill: map.get(colors.$mic-grey, A100);
          }

          &[disabled] {
            color: map.get(colors.$mic-grey, A500);
            background-color: transparent;
            .mat-mdc-paginator-icon {
              fill: map.get(colors.$mic-grey, A500);
            }
          }
        }

        &:hover {
          background-color: map.get($accent, A400);
          color: map.get(colors.$mic-grey, A100);
          .mat-mdc-paginator-icon {
            fill: map.get(colors.$mic-grey, A100);
          }
          box-shadow: 0 4px 8px 0 rgba(102, 102, 102, 0.12);
        }
      }

      .mic-page-button {
        margin: 4px;
        width: 40px;
        height: 40px;
        padding: 6px;
        background-color: transparent;
        border-radius: 50%;
        flex-shrink: 0;
        text-align: center;
        display: inline-block;
        position: relative;
        box-sizing: border-box;
        border: none;
        outline: none;
        fill: currentColor;
        text-decoration: none;
        cursor: pointer;
        user-select: none;
        z-index: 0;
        overflow: visible;
        &:focus {
          outline: 2px solid #000;
          outline-offset: 2px;
        }
        &.mic-current-page {
          color: map.get(colors.$mic-grey, A100);
          background-color: map.get($accent, A400);
          cursor: default;
          @if $is-dark {
            color: map.get(colors.$mic-grey, A700);
            background-color: map.get(colors.$mic-blue, 50);
          }
        }
      }
    }
  }
}
