/**
 * @license
 * Copyright 2020 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

@use '@material/checkbox/checkbox' as mdc-checkbox;
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@use '@material/theme/custom-properties';
@use '@material/theme/theme-color';
@use '@material/mwc-ripple/ripple-theme';
@use './checkbox-theme';

@mixin static-styles() {
  :host {
    @include mdc-checkbox.static-styles();

    outline: none;
    display: inline-flex;
    -webkit-tap-highlight-color: transparent;
  }
}

@mixin core-styles() {
  .mdc-checkbox {
    @include mdc-checkbox-theme.theme-deprecated(
      mdc-checkbox-theme.$light-theme-deprecated
    );
  }
  @include mdc-checkbox.static-styles();

  :host {
    @include checkbox-theme.checked-selector() {
      @include ripple-theme.theme-deprecated(
        (
          state:
            custom-properties.create-var(
              theme-color.get-custom-property(secondary)
            ),
        )
      );
    }

    outline: none;
    display: inline-flex;
    -webkit-tap-highlight-color: transparent;
  }

  .mdc-checkbox {
    // TODO(b/162887560): Use MDC core style mixins instead.
    // This style block is required since MWC does not include ripple styles.
    .mdc-checkbox__background::before {
      content: none;
    }
  }
}