/* Region btn */
.kt-ui-btn-like {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: var(--kt-ui-btn-like-height);
  padding-block: var(--kt-ui-btn-like-padding-block);
  padding-inline: var(--kt-ui-btn-like-padding-inline);
  border-radius: var(--kt-ui-btn-like-border-radius);
  cursor: pointer;
  color: var(--kt-ui-btn-like-color);
  border: var(--kt-ui-btn-like-border-width) solid var(--kt-ui-btn-like-border-color);
  background-color: var(--kt-ui-btn-like-background);
  transition-property: color, border-color, background-color, box-shadow;
  transition-duration: 160ms;
  transition-timing-function: linear;
}

/* Hover */
.kt-ui-btn-like:hover,
.kt-ui-btn-like.kt-ui-btn-like-hover {
  color: var(--kt-ui-btn-like-color-hover);
  border-color: var(--kt-ui-btn-like-border-color-hover);
  background-color: var(--kt-ui-btn-like-background-hover);
}

/* Focus */
.kt-ui-btn-like:focus-visible,
.kt-ui-btn-like.kt-ui-btn-like-focus {
  border-color: var(--kt-ui-btn-like-focus-color);
  box-shadow: 0 0 0 1px var(--kt-ui-btn-like-focus-color) inset;
}

/* Disabled */
.kt-ui-btn-like:disabled,
.kt-ui-btn-like.kt-ui-btn-like-disabled {
  color: var(--kt-ui-btn-like-color-disabled);
  border-color: var(--kt-ui-btn-like-border-color-disabled);
  background-color: var(--kt-ui-btn-like-background-disabled);
  cursor:  default;
}

/* Endregion */
/* Region grey-theme */
.kt-ui-btn-like-grey {
  --kt-ui-btn-like-color: var(--kt-ui-btn-like-grey-color);
  --kt-ui-btn-like-color-hover: var(--kt-ui-btn-like-grey-color-hover);
  --kt-ui-btn-like-color-disabled: var(--kt-ui-btn-like-grey-color-disabled);
  --kt-ui-btn-like-border-color: var(--kt-ui-btn-like-grey-border-color);
  --kt-ui-btn-like-border-color-hover: var(--kt-ui-btn-like-grey-border-color-hover);
  --kt-ui-btn-like-border-color-disabled: var(--kt-ui-btn-like-grey-border-color-disabled);
  --kt-ui-btn-like-background: var(--kt-ui-btn-like-grey-background);
  --kt-ui-btn-like-background-hover: var(--kt-ui-btn-like-grey-background-hover);
  --kt-ui-btn-like-background-disabled: var(--kt-ui-btn-like-grey-background-disabled);
}

.kt-ui-btn-like-grey[data-active=true] {
  --kt-ui-btn-like-color: var(--kt-ui-btn-like-grey-active-color);
  --kt-ui-btn-like-color-hover: var(--kt-ui-btn-like-grey-active-color-hover);
  --kt-ui-btn-like-color-disabled: var(--kt-ui-btn-like-grey-active-color-disabled);
  --kt-ui-btn-like-background: var(--kt-ui-btn-like-grey-active-background);
  --kt-ui-btn-like-background-hover: var(--kt-ui-btn-like-grey-active-background-hover);
  --kt-ui-btn-like-background-disabled: var(--kt-ui-btn-like-grey-active-background-disabled);
  --kt-ui-btn-like-border-color: var(--kt-ui-btn-like-grey-active-border-color);
  --kt-ui-btn-like-border-color-hover: var(--kt-ui-btn-like-grey-active-border-color-hover);
  --kt-ui-btn-like-border-color-disabled: var(--kt-ui-btn-like-grey-active-border-color-disabled);
}

/* Endregion */
/* Region white-theme */
.kt-ui-btn-like-white {
  --kt-ui-btn-like-color: var(--kt-ui-btn-like-white-color);
  --kt-ui-btn-like-color-hover: var(--kt-ui-btn-like-white-color-hover);
  --kt-ui-btn-like-color-disabled: var(--kt-ui-btn-like-white-color-disabled);
  --kt-ui-btn-like-border-color: var(--kt-ui-btn-like-white-border-color);
  --kt-ui-btn-like-border-color-hover: var(--kt-ui-btn-like-white-border-color-hover);
  --kt-ui-btn-like-border-color-disabled: var(--kt-ui-btn-like-white-border-color-disabled);
  --kt-ui-btn-like-background: var(--kt-ui-btn-like-white-background);
  --kt-ui-btn-like-background-hover: var(--kt-ui-btn-like-white-background-hover);
  --kt-ui-btn-like-background-disabled: var(--kt-ui-btn-like-white-background-disabled);
}

.kt-ui-btn-like-white[data-active=true] {
  --kt-ui-btn-like-color: var(--kt-ui-btn-like-white-active-color);
  --kt-ui-btn-like-color-hover: var(--kt-ui-btn-like-white-active-color-hover);
  --kt-ui-btn-like-color-disabled: var(--kt-ui-btn-like-white-active-color-disabled);
  --kt-ui-btn-like-background: var(--kt-ui-btn-like-white-active-background);
  --kt-ui-btn-like-background-hover: var(--kt-ui-btn-like-white-active-background-hover);
  --kt-ui-btn-like-background-disabled: var(--kt-ui-btn-like-white-active-background-disabled);
  --kt-ui-btn-like-border-color: var(--kt-ui-btn-like-white-active-border-color);
  --kt-ui-btn-like-border-color-hover: var(--kt-ui-btn-like-white-active-border-color-hover);
  --kt-ui-btn-like-border-color-disabled: var(--kt-ui-btn-like-white-active-border-color-disabled);
}

/* Endregion */