/* Hide disabled status buttons */

.k-header-buttons .k-status-icon[data-disabled=true] {
  display: none;
}

/* Reduce visual importance of tag fields */

.k-tag {
  background-color: var(--color-gray-200);
  outline: 1px solid var(--color-gray-400);
}

.k-tag .k-tag-text,
.k-tag .k-tag-toggle {
  color: var(--color-black);
}

.k-tag .k-tag-toggle {
  border-left-color: var(--color-gray-300);
}

/* Improve appearance of the date field with the time future */

.k-date-field:has([data-type="time"]) [data-type="date"] {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.k-date-field:has([data-type="time"]) [data-type="time"] {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* Greatly improve appearance of the sylvainjule/color-palette plugin */

.k-color-palette-field .color-palette_input-color {
  border-radius: var(--rounded);
}

.k-color-palette-field ul.color-palette_input-list {
  padding: 0;
  background: none;
  gap: 0.25rem;

  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.k-color-palette-field li {
  transition: .2s opacity ease;
  border: 0;
  height: 38px;
  width: unset !important;
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  box-shadow: var(--shadow);
}

.k-color-palette-field li.active {
  position: relative;
  border: 0;
  border-radius: var(--rounded);
  outline: 0;
  box-shadow: var(--shadow-md);
}

.k-color-palette-field li.active::after {
  content: '';
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='icon-check' viewBox='0 0 16 16' width='100%25' height='100%25'%3E%3Cpath d='M7 11.414L3.586 8 5 6.586l2 2 4-4L12.414 6z'%3E%3C/path%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 18px;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.k-color-palette-field li:not(.active):not(:hover) {
  opacity: 0.7;
}