import { css } from 'lit'

export default css`
  :host {
    --md-ripple-hover-state-layer-color: var(--md-sys-color-primary);
    --md-ripple-focus-state-layer-color: var(--md-sys-color-primary);
    --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);
    --_container-background-color: var(--md-sys-color-surface);
    --_container-elevation: var(--md-sys-elevation-1);
    --_surface-color: var(--md-sys-color-primary);
    --_content-color: var(--md-sys-color-primary);
  }

  :host(:hover) {
    --_container-elevation: var(--md-sys-elevation-2);
    --_state-background-color: var(--md-sys-color-primary);
    --_state-opacity: var(--md-sys-state-hover-state-layer-opacity);
  }

  :host(:focus) {
    --_container-elevation: var(--md-sys-elevation-1);
  }

  :host(:active),
  :host .pressed {
    --_container-elevation: var(--md-sys-elevation-1);
    --_state-background-color: var(--md-sys-color-primary);
    --_state-opacity: var(--md-sys-state-pressed-state-layer-opacity);
  }

  :host([disabled]) {
    --_container-background-color: var(--md-sys-color-on-surface);
    --_container-opacity: 0.12;
    --_container-elevation: var(--md-sys-elevation-0);
    --_content-opacity: 0.38;
    --_content-color: var(--md-sys-color-on-surface);
  }
`
