:host button,
:host a {
  display: inline-block;
  transition: all 150ms;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
}

:host([disabled]) {
  pointer-events: none;
  cursor: none;
}
:host([disabled]) grit-wc-icon {
  color: var(--grit-button-icon-disable-icon-color);
}

:host([primary]) button:hover, :host([primary]) button:focus,
:host([primary]) a:hover,
:host([primary]) a:focus {
  background-color: var(--grit-button-icon-primary-hover-color);
}
:host([primary]) button:active,
:host([primary]) a:active {
  background-color: var(--grit-button-icon-primary-active-color);
}

:host([secondary]) button:hover grit-wc-icon,
:host([secondary]) a:hover grit-wc-icon,
:host([secondary]) button:active grit-wc-icon,
:host([secondary]) a:active grit-wc-icon,
:host([secondary]) button:focus grit-wc-icon,
:host([secondary]) a:focus grit-wc-icon {
  color: var(--grit-button-icon-secondary-color);
}

.sr-only {
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}