.ui-icon-set,
.ui-icon-set__scope {
  --ui-icon-set__icon-base-size: 24px;
  --ui-icon-set__icon-base-color: var(--ui-color-base-90);
  --ui-icon-set__icon-path: url();
}
.ui-icon-set {
  display: inline-block;
  width: var(--ui-icon-set__icon-size, var(--ui-icon-set__icon-base-size));
  height: var(--ui-icon-set__icon-size, var(--ui-icon-set__icon-base-size));
  flex-shrink: 0;
  -webkit-mask-image: var(--ui-icon-set__icon-path);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  background: var(--ui-icon-set__icon-color, var(--ui-icon-set__icon-base-color));
  transition: background 0.15s ease-in-out;
}
.ui-icon-set:hover {
  transition-duration: 0s;
}
.ui-icon-set.--hoverable-default:hover {
  background: color-mix(
    in srgb,
    var(--ui-icon-set__icon-color, var(--ui-icon-set__icon-base-color)) 100%,
    var(--ui-color-bg-state-hover-default-overlay-hex) var(--ui-color-bg-state-hover-default-overlay-opacity)
  );
}
.ui-icon-set.--hoverable-default:active {
  background: color-mix(
    in srgb,
    var(--ui-icon-set__icon-color, var(--ui-icon-set__icon-base-color)) 100%,
    var(--ui-color-bg-state-click-default-overlay-hex) var(--ui-color-bg-state-click-default-overlay-opacity)
  );
}
.ui-icon-set.--hoverable-alt:hover {
  background: color-mix(
    in srgb,
    var(--ui-icon-set__icon-color, var(--ui-icon-set__icon-base-color)) 100%,
    var(--ui-color-bg-state-hover-alt-overlay-hex) var(--ui-color-bg-state-hover-alt-overlay-opacity)
  );
}
.ui-icon-set.--hoverable-alt:active {
  background: color-mix(
    in srgb,
    var(--ui-icon-set__icon-color, var(--ui-icon-set__icon-base-color)) 100%,
    var(--ui-color-bg-state-click-alt-overlay-hex) var(--ui-color-bg-state-click-alt-overlay-opacity)
  );
}