/* Global styles */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell;
  line-height: 1.6;
  background: #EEE5D0;
  overflow: hidden;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}


/* Classless elements */

hr {
  border: none;
  height: 2px;
  background: linear-gradient(to right, transparent, #C4B998 25%, #C4B998 75%, transparent);
}

select,
textarea,
input[type="text"],
input[type="number"] {
  width: 100%;
  padding: .2rem .4rem;
  border: 1px solid #DDD;
  border-radius: 4px;
  font-size: 1rem;
  background: white;
  transition: border-color .3s;
  font-family: inherit;
  &:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, .1);
  }
  &:disabled {
    background: #f5f5f5;
    opacity: .5;
  }
}

input[type="checkbox"],
input[type="radio"] {
  margin-right: .4rem;
  &:not(:disabled) {
    cursor: pointer;
  }
}

textarea {
  padding: .2rem;
  font-family: monospace;
  resize: vertical;
}


/* Contents of the sidebars */

.hidden {
  display: none !important;
}

.mt {
  margin-top: 1.3rem;
}

.richrow {
  display: flex;
  gap: 1rem;
  white-space: nowrap;
  & > div {
    flex: 1;
  }
}

.for-control {
  display: flex;
  cursor: pointer;
}

.indented {
  margin-left: 1.3rem;
}

label {
  display: block;
  margin-bottom: .1rem;
  color: #4A4230;
  &:has(*:disabled), &:not(.for-control):has(+ *:disabled) {
    opacity: .5;
    cursor: default;
  }
}


/* Interactive components */

.sidebar {
  width: 19rem;
  padding: .8rem 1rem;
}

.toolbar {
  display: flex;
  justify-content: center;
  gap: 1rem;
  padding: 0 1rem .8rem;
}

button {
  width: 8rem;
  font-size: 1rem;
  padding: .2rem;
  cursor: pointer;
  color: #FFF;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  background: #B9753A;
  border: 1px solid #555;
  border-radius: 4px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .25),
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 0 0 rgba(0, 0, 0, .5) inset,
    0 1.25rem 0 rgba(255, 255, 255, .08) inset,
    0 -1.25rem 1.25rem rgba(0, 0, 0, .3) inset,
    0 1.25rem 1.25rem rgba(255, 255, 255, .1) inset;
  transition: all 160ms linear 0s;
}
button:hover {
  box-shadow:
    0 2px 5px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 0 0 rgba(0, 0, 0, .25) inset,
    0 20px 0 rgba(255, 255, 255, .03) inset,
    0 -20px 20px rgba(0, 0, 0, .15) inset,
    0 20px 20px rgba(255, 255, 255, .05) inset;
}
button:disabled {
  background-color: #AAA;
  box-shadow: none;
  cursor: default;
}

#preview-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #F5F0E5;
  position: relative;
}
#preview-content {
  flex: 1 1 0;
  padding: 1rem;
  display: grid;
  place-items: center;
}
#preview-content svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

#loading-overlay {
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
#loading-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid #E0E0E0;
  border-top-color: #3498DB;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

.sidebar, #preview-container, #preview-content svg {
  animation: fadeInScale 160ms ease-in-out;
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1);  }
}


/* Responsiveness */

@media (max-width: 38rem) { /* Should approximately correspond to twice the sidebar width */
  body     { flex-direction: column; }
  .sidebar { margin: auto; }
}