@use 'sass:map';
@use '~@angular/material' as mat;

@mixin color($theme) {
  $config: mat.get-color-config($theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map.get($config, is-dark);

  // See: https://github.com/angular/components/blob/master/src/material/form-field/_form-field-outline-theme.scss#L19
  $outline-color: mat.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12));
  $outline-color-hover: mat.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));

  .mtna-inline-editor-controls-container {
    background-color: mat.get-color-from-palette($background, raised-button);
    color: mat.get-color-from-palette($foreground, text);

    &:before,
    .mat-divider {
      border-color: $outline-color;
    }

    &.cdk-focused,
    &:hover {
      &:before {
        border-color: $outline-color-hover;
      }
      .mat-divider {
        border-color: $outline-color-hover;
      }
    }
  }
}