:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

:host {
  display: inline-block;
}

.icon-button {
  margin: 0px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--sl-border-radius-medium);
  font-size: inherit;
  color: var(--sl-color-gray-500);
  padding: var(--sl-spacing-x-small);
  cursor: pointer;
  transition: var(--sl-transition-medium) color;
  -webkit-appearance: none;
}
.icon-button:hover:not(.icon-button--disabled), .icon-button:focus:not(.icon-button--disabled) {
  color: var(--sl-color-blue-500);
}
.icon-button:active:not(.icon-button--disabled) {
  color: var(--sl-color-blue-600);
}
.icon-button:focus {
  outline: none;
}

.icon-button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.focus-visible.icon-button:focus {
  box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-focus-ring-color-primary);
}