import { html } from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import './cr_shared_vars.css.js';
const styleMod = document.createElement('dom-module');
styleMod.appendChild(html `
  <template>
    <style>

:host {
  align-items: center;
  align-self: stretch;
  display: flex;
  margin: 0;
  outline: none;
}

/* [effectively-disabled_] is a private attribute to allow custom elements
 * to toggle the attribute based on state, such as whether or not the
 * internal control element is disabled, without affecting any public
 * attributes or properties. */
:host(:not([effectively-disabled_])) {
  cursor: pointer;
}

:host(:not([no-hover], [effectively-disabled_]):hover) {
  background-color: var(--cr-hover-background-color);
}

:host(:not([no-hover], [effectively-disabled_]):active) {
  background-color: var(--cr-active-background-color);
}

/* Do not show hover or active states for cr-icon-buttons that are
 * embedded within the row to avoid showing multiple layers of
 * backgrounds. */
:host(:not([no-hover], [effectively-disabled_])) cr-icon-button {
  --cr-icon-button-hover-background-color: transparent;
  --cr-icon-button-active-background-color: transparent;
}
    </style>
  </template>
`.content);
styleMod.register('cr-actionable-row-style');
