body {
  @apply bg-body-background-color dark:bg-gray-700 dark:text-white;
}

/* Button */
.btn {
  outline: none !important;
  @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded h-10;
}
.btn:hover {
  @apply text-slate-200;
}
.btn-rounded {
  @apply rounded-full;
}
.btn-outlined-,
.btn-outlined-primary {
  @apply bg-transparent text-black dark:text-white font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
}
.btn-outlined-:hover,
.btn-outlined-primary:hover {
  @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
}
.btn-disabled {
  @apply opacity-50 cursor-not-allowed;
}
.btn-danger {
  @apply bg-mbz-danger;
}
.btn-success {
  @apply bg-mbz-success;
}

/* Field */
.field {
  margin-top: 0.5rem;
}
.field-label {
  @apply block text-gray-700 dark:text-gray-100 text-base font-bold mb-2;
}
.field-danger {
  @apply text-red-500;
}

.o-field.o-field--addons .control:last-child:not(:only-child) .button {
  @apply inline-flex text-gray-800 bg-gray-200 h-9 mt-[1px] rounded text-center px-2 py-1.5;

  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}

.field-message-info {
  @apply text-mbz-info;
}

.field-message-danger {
  @apply text-mbz-danger;
}

/* Input */
.input {
  @apply appearance-none border w-full py-2 px-3 text-black leading-tight;
}
.input-danger {
  @apply border-red-500;
}
.input-icon-right {
  right: 0.5rem;
}

.icon-warning {
  @apply text-amber-600;
}

.icon-danger {
  @apply text-red-500;
}

.o-input__icon-left {
  @apply dark:text-black h-10 w-10;
}

.o-input-iconspace-left {
  @apply pl-10;
}

/* InputItems */
.inputitems-item {
  @apply bg-primary mr-2;
}

.inputitems-item:first-child {
  @apply ml-2;
}

/* Autocomplete */
.autocomplete-menu {
  @apply max-h-[200px] drop-shadow-md text-black;
}

.autocomplete-item {
  @apply py-1.5 px-4;
}

/* Dropdown */
.dropdown {
  @apply inline-flex relative;
}
.dropdown-menu {
  min-width: 12em;
  @apply bg-white dark:bg-gray-700 shadow-lg rounded-sm;
}
.dropdown-item {
  @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer w-full;
}

.dropdown-item-active {
  /* @apply bg-violet-2; */
  @apply bg-white;
}

/* Checkbox */

.checkbox {
  @apply appearance-none bg-blue-500 border-blue-500;
}

.checkbox-checked {
  @apply bg-blue-500;
}

.checkbox-label {
  margin-left: 0.2rem;
}

/* Modal */

.modal-content {
  @apply bg-white dark:bg-gray-700 rounded px-2 py-4 w-full;
}

/* Switch */
.switch {
  @apply cursor-pointer inline-flex items-center relative mr-2;
}

.switch-label {
  @apply pl-2;
}

/* Select */
.select {
  @apply dark:bg-white dark:text-black rounded pl-2 pr-6 border-2 border-transparent h-10 shadow-none;
}

/* Radio */
.form-radio {
  @apply bg-none;
}
.radio-label {
  @apply pl-2;
}

/* Editor */
button.menubar__button {
  @apply dark:text-white;
}

/* Notification */
.notification {
  @apply p-7 bg-secondary text-black rounded;
}

.notification-primary {
  @apply bg-primary;
}

.notification-info {
  @apply bg-mbz-info;
}

.notification-warning {
  @apply bg-amber-600 text-black;
}

.notification-danger {
  @apply bg-mbz-danger;
}

/* Table */
.table tr {
  @apply odd:bg-white dark:odd:bg-gray-800 even:bg-gray-50 dark:even:bg-gray-900 border-b;
}

.table-td {
  @apply py-4 px-2 whitespace-nowrap;
}

/* Snackbar */
.notification-dark {
  @apply text-white;
  background: #363636;
}