@import '~@angular/material/_theming.scss';
@import '../variables';

@mixin ai-tooltip-theme($theme) {

  $color-list: primary, accent, warn;
  $position-list: left, right, above, below, before, after;
  $arrow-size: 8px;


    .ai-tooltip:before {
      content: '';
      display: block;
      position: absolute;
      border: $arrow-size solid;
    }

    @each $color in $color-list {
      &.ai-tooltip__#{$color} {
        background: mat-color(map-get($theme, $color));
        color: mat-color(map-get($theme, $color), default-contrast);
        font-size: $caption-font-size;
        &:before {
          border-color: mat-color(map-get($theme, $color)) !important;
        }
      }
    }

    @each $position in $position-list {
      &.ai-tooltip__#{$position} {
        &:before {
          @if $position == left or $position == before {
            border-right-color: transparent !important;
            border-top-color: transparent !important;
            border-bottom-color: transparent !important;
            top: calc(50% - #{$arrow-size});
            left: 100%;
          } @else if $position == right or $position == after {
            border-left-color: transparent !important;
            border-top-color: transparent !important;
            border-bottom-color: transparent !important;
            top: calc(50% - #{$arrow-size});
            right: 100%;
          } @else if $position == above {
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            border-bottom-color: transparent !important;
            left: calc(50% - #{$arrow-size});
            top: 100%;
          } @else if $position == below {
            border-left-color: transparent !important;
            border-right-color: transparent !important;
            border-top-color: transparent !important;
            left: calc(50% - #{$arrow-size});
            bottom: 100%;
          }
        }
      }
    }
}