@import '../theming/theming';
@import '../style/layout-common';

// Focus indicator styles.
$mat-focus-indicator-border-radius: 4px;
$mat-focus-indicator-border-width: 2px;
$mat-focus-indicator-border-style: solid;

/// Mixin that turns on strong focus indicators.
///
/// @example
///   .my-app {
///     @include mat-strong-focus-indicators();
///   }
@mixin mat-strong-focus-indicators() {

  // Base styles for the focus indicators.
  .mat-focus-indicator::before {
    @include mat-fill();

    border-radius: $mat-focus-indicator-border-radius;
    border: $mat-focus-indicator-border-width $mat-focus-indicator-border-style transparent;
    box-sizing: border-box;
    pointer-events: none;
  }

  // By default, all focus indicators are flush with the bounding box of their
  // host element. For particular elements (listed below), default inset/offset
  // values are necessary to ensure that the focus indicator is sufficiently
  // contrastive and renders appropriately.

  .mat-focus-indicator.mat-button-base::before,
  .mat-focus-indicator.mat-card::before,
  .mat-focus-indicator.mat-chip::before,
  .mat-focus-indicator.mat-sort-header-button::before {
    margin: $mat-focus-indicator-border-width * -2;
  }

  .mat-focus-indicator.mat-calendar-body-cell::before {
    margin: $mat-focus-indicator-border-width * -1;
  }

  .mat-focus-indicator.mat-tab-link::before,
  .mat-focus-indicator.mat-tab-label::before {
    margin: $mat-focus-indicator-border-width * 2;
  }

  // Render the focus indicator on focus. Defining a pseudo element's
  // content will cause it to render.

  // For checkboxes, radios, and slide toggles, render the focus indicator
  // when the class .cdk-focused is present.
  .cdk-focused.mat-checkbox .mat-focus-indicator::before,
  .cdk-focused.mat-radio-button .mat-focus-indicator::before,
  .cdk-focused.mat-slide-toggle .mat-focus-indicator::before,

  // For options, render the focus indicator when the class .mat-active
  // is present.
  .mat-focus-indicator.mat-option.mat-active::before,

  // For all other components, render the focus indicator on focus.
  .mat-focus-indicator:focus::before {
    content: '';
  }
}

/// Mixin that sets the color of the focus indicators.
///
/// @param {color|map} $themeOrMap
///   If theme, focus indicators are set to the primary color of the theme. If
///   color, focus indicators are set to that color.
///
/// @example
///   .demo-dark-theme {
///     @include mat-strong-focus-indicators-theme($darkThemeMap);
///   }
///
/// @example
///   .demo-red-theme {
///     @include mat-strong-focus-indicators-theme(#F00);
///   }
@mixin mat-strong-focus-indicators-theme($themeOrColor) {
  .mat-focus-indicator::before {
    border-color: if(
      type-of($themeOrColor) == 'map',
      mat-color(map_get($themeOrColor, primary)),
      $themeOrColor);
  }
}