@import './variables.css';
@import './browser-specific.css';
@import './utilities/utilities.css';
@import './layouts/portal.css';
@import './layouts/module.css';

/* Base styles */
html, :host {
  -webkit-tap-highlight-color: transparent;
  font-family: 'Roboto', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  color: var(--font-clr-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height);
  background-color: var(--clr-bg-white);
}

*, *:before, *:after {
  box-sizing: border-box;
  transition: all ease 0.2s;
}

.ol-dragbox {
  transition: none !important;
  transition-duration: 0s !important;
  background-color: rgba(255, 255, 255, 0.376);
}

.ol-overlay-container.ol-selectable {
  transition: none !important;
  transition-duration: 0s !important;
}

.ol-viewport * {
  transition: none !important;
  transition-duration: 0s !important;
}

svg {
  width: 18px;
  height: 18px;
}

span {
  height: fit-content;
}

.alert-danger {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px 12px;
    border-radius: 4px;
}

@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}

/* Run animation only once */
.shake-once {
    animation: shake 0.4s ease;
}