.kt-ui-icon-wrapper {
  display: inline-flex;
}

.kt-ui-icon {
  display: inline-flex;
  position: relative;
  width: var(--wc-icon-size);
  height: var(--wc-icon-size);
  -webkit-mask: var(--wc-icon-image) center no-repeat;
          mask: var(--wc-icon-image) center no-repeat;
  -webkit-mask-size: var(--wc-icon-size);
          mask-size: var(--wc-icon-size);
  background-color: var(--wc-icon-color);
}

.kt-ui-picture-icon {
  display: inline-flex;
  flex-shrink: 0;
  width: var(--wc-icon-size);
  height: var(--wc-icon-size);
  background: var(--wc-icon-image) center no-repeat;
}

.kt-ui-picture-icon.--picture-book {
  --wc-icon-image: var(--kt-ui-picture-icon-book);
}

.kt-ui-picture-icon.--picture-briefcase {
  --wc-icon-image: var(--kt-ui-picture-icon-briefcase);
}

.kt-ui-picture-icon.--picture-calendar {
  --wc-icon-image: var(--kt-ui-picture-icon-calendar);
}

.kt-ui-picture-icon.--picture-chat {
  --wc-icon-image: var(--kt-ui-picture-icon-chat);
}

.kt-ui-picture-icon.--picture-checklist {
  --wc-icon-image: var(--kt-ui-picture-icon-checklist);
}

.kt-ui-picture-icon.--picture-earth {
  --wc-icon-image: var(--kt-ui-picture-icon-earth);
}

.kt-ui-picture-icon.--picture-gift {
  --wc-icon-image: var(--kt-ui-picture-icon-gift);
}

.kt-ui-picture-icon.--picture-photo {
  --wc-icon-image: var(--kt-ui-picture-icon-photo);
}

.kt-ui-icon-xl {
  --wc-icon-size: var(--wc-icon-size-xl);
}

.kt-ui-icon-lg {
  --wc-icon-size: var(--wc-icon-size-lg);
}

.kt-ui-icon-md {
  --wc-icon-size: var(--wc-icon-size-md);
}

.kt-ui-icon-sm {
  --wc-icon-size: var(--wc-icon-size-sm);
}

.kt-ui-icon-xs {
  --wc-icon-size: var(--wc-icon-size-xs);
}