:host {
  --md-icon-button-foreground-color: inherit;

  --md-icon-button-background-color: transparent;

  --md-icon-button-rounded-border-radius: 2rem;

  --md-icon-button-border-color: transparent;

  --md-icon-button-font-size: 0.875rem;
  --md-icon-button-border-size: 0.063rem;

  --md-icon-button-pressed-state-color: transparent;
}

:host {
  display: inline-block;
  position: relative;
  inline-size: fit-content;
  cursor: pointer;
  border-radius: 100%;

  background-color: var(--md-icon-button-background-color);
}

.icon-button {
  display: flex;
  position: relative;

  font-family: inherit;

  inline-size: fit-content;

  justify-content: center;
  align-items: center;

  user-select: none;
  cursor: pointer;
  white-space: nowrap;
  border-width: 0;
  z-index: 0;
  color: inherit;

  border-radius: inherit;
  border: var(--md-icon-button-border-size) solid
    var(--md-icon-button-border-color);
  text-decoration: none;
  margin: 0;
  box-sizing: border-box;
  appearance: none;
  color: var(--md-icon-button-foreground-color);
  line-height: 1.125rem;
  padding: calc(0.5rem - 0.063rem);
  font-size: 1.5rem;
  background: none;
}

.icon-button::-moz-focus-inner {
  border: 0;
}

.icon-button:focus {
  /* outline: none; */
}

.icon-button:focus-visible::before {
  outline: none;
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
}

.icon-button_disabled {
  cursor: not-allowed;
}

.icon-button__spin {
  color: inherit;
}

.icon-button__ripple {
  --md-ripple-pressed-color: var(--md-icon-button-pressed-state-color);
  --md-ripple-pressed-opacity: 1;
}

:host([disabled]) .icon-button__ripple {
  display: none;
}