@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --white: #fff;
  --black: #000;
  --body-color: #363636;
  --gray: #f0f0f0;
  --gray-dark: #e9e9e9;
  --gray-darken: #666666;
  --border-color: #e0e0e0;
  --blue: #3298dc;
  --green: #257942;
  --orange: #ffa500;
  --red: hsl(348, 100%, 61%);

  --spacing-025: 0.25em;
  --spacing-05: 0.5em;
  --spacing: 1em;
  --spacing-15: 1.5em;
  --spacing-2: 2em;
  --spacing-25: 2.5em;
  --spacing-3: 3em;
  --spacing-35: 3.5em;
  --spacing-4: 4em;

  --font-small: 0.8em;
  --font-md: 0.9em;
  --font-lg: 1.2em;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --border-radius: 0.3em;
}

.page-enter-active,
.page-leave-active {
  transition: opacity 0.2s;
}
.page-enter,
.page-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}

.fade-enter,
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.draggable-forms-container {
  counter-reset: row-number;
}

.draggable-forms-container__actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--spacing);
}

.smooth-dnd-container.vertical > .smooth-dnd-draggable-wrapper.columns {
  display: flex;
  overflow: visible;
}

/* Global drop element style */
.drop-preview {
  border: 1px dashed var(--gray-dark);
  margin: var(--spacing-05) 0;
  background-color: var(--gray);
}
/* end */

/* Make bulma select style to display full width */
.control .select--full-width,
.control .select--full-width select {
  width: 100%;
}
/* end */

.panel-block__inner {
  width: 100%;
}

/* Autosuggest */
.autosuggest__results-container {
  position: absolute;
  z-index: 99;
  background-color: var(--white);
  width: 100%;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  user-select: none;
  box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),
    0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),
    0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086),
    0 100px 80px rgba(0, 0, 0, 0.12);
}

.autosuggest__results-item {
  padding: var(--spacing-05) var(--spacing);
}

.autosuggest__results-item--highlighted,
.autosuggest__results-item:hover {
  background-color: var(--gray-dark);
}

.autosuggest__results-item:first-of-type {
  padding-top: var(--spacing);
}

.autosuggest__results-item:last-of-type {
  padding-bottom: var(--spacing);
}