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

// Material tooltip mixin
@mixin mat-tooltip-override($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  .mat-mdc-tooltip {
    padding: 0;
    position: relative;

    &::after {
      width: 0;
      height: 0;
      content: '';
      position: absolute;
      border-left: 0.5rem solid transparent;
      border-right: 0.5rem solid transparent;
      border-bottom: 0.5rem solid map-get($mic-grey, A500);
    }

    &.big-tooltip {
      .mdc-tooltip__surface {
        font-size: 14px;
      }
    }
    &.white-tooltip {
      &::after {
        border-bottom: 0.5rem solid map-get($mic-grey, A100);
      }
      .mdc-tooltip__surface {
        background: map-get($mic-grey, A100);
        color: $mic-text-colors-normal;
      }
    }
  }
  .mat-mdc-tooltip-panel-below {
    .mat-mdc-tooltip:after {
      top: -0.45rem;
      right: calc(50% - 0.5rem);
      transform: rotate(0);
    }
  }
  .mat-mdc-tooltip-panel-above {
    .mat-mdc-tooltip:after {
      bottom: -0.45rem;
      right: calc(50% - 0.5rem);
      transform: rotate(180deg);
    }
  }
  .mat-mdc-tooltip-panel-right {
    .mat-mdc-tooltip:after {
      left: -0.68rem;
      top: calc(50% - 0.25rem);
      transform: rotate(270deg);
    }
  }
  .mat-mdc-tooltip-panel-left {
    .mat-mdc-tooltip:after {
      right: -0.68rem;
      top: calc(50% - 0.25rem);
      transform: rotate(90deg);
    }
  }
}
