:host {
  /**
   * @prop --border-radius: Background of the badge
   * @prop --border-width: Border width
   * @prop --border-style: Border style
   * @prop --border-color: Border color
   *
   * @prop --box-shadow: Shadow
   *
   * @prop --padding-top: Top padding of the badge
   * @prop --padding-end: Right padding if direction is left-to-right, and left padding
   *                      if direction is right-to-left of the badge
   * @prop --padding-bottom: Bottom padding of the badge
   * @prop --padding-start: Left padding if direction is left-to-right, and right padding
   *                        if direction is right-to-left of the badge
   */
  --padding-top: 0;
  --padding-end: 0;
  --padding-bottom: 0;
  --padding-start: 0;
  --border-radius: 24px;
  --border-width: 0;
  --border-style: solid;
  --border-color: transparent;
  --background: #fff;
  --box-shadow: 0 3px 5px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.1), 0 6px 10px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.12), 0 1.2px 20px 0 rgba(var(--box-shadow-color, 0, 0, 0), 0.08);
  --transition: 0.2s transform cubic-bezier(0.25, 1.11, 0.78, 1.59), 0.2s box-shadow cubic-bezier(0.25, 1.11, 0.78, 1.59);
  --transform: translateZ(0);
  padding-left: var(--padding-start);
  padding-right: var(--padding-end);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
  display: block;
  height: auto;
  border-width: var(--border-width);
  border-style: var(--border-style);
  border-color: var(--border-color);
  background-color: var(--background);
  contain: content;
  overflow: hidden;
}
@supports (margin-inline-start: 0) or (-webkit-margin-start: 0) {
  :host {
    padding-left: unset;
    padding-right: unset;
    -webkit-padding-start: var(--padding-start);
    padding-inline-start: var(--padding-start);
    -webkit-padding-end: var(--padding-end);
    padding-inline-end: var(--padding-end);
  }
}

:host(.state-activatable) {
  transform: var(--transform);
  transition: var(--transition);
  cursor: pointer;
  will-change: transform, box-shadow;
}

:host(.state-activated) {
  --box-shadow: none;
  --transform: translate3d(0, 1px, 0);
  --transition: 0.2s transform ease-out, 0.2s box-shadow ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :host(.state-activatable) {
    transform: none;
    transition: none;
  }
}