@import './base.css';

*[hidden] { display: none !important; }

body {
  display: flex;
  direction: row;
}

main {
  height: 100dvh;
  flex-grow: 1;
  overflow: auto;
}

main section {
  margin: 1em;
  padding: 1em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
}

.main-sidebar {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: var(--z-index-sidebar);
  background-color: var(--color-background);
}

.main-header {
  height: var(--header-height);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: row;
  align-items: center;
}

a {
  text-decoration: none;
  color: var(--color-blue);
  transition: 0.4s;
  padding: 3px;
}

button, .button {
  color: var(--color-text);
  background-color: var(--color-surface-strong);
  padding: 0.6em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

button.hollow, .button.hollow {
  background: none;
  border: none;
}

button.hollow:hover {
  border: none;
}

button:hover {
  color: var(--color-heading);
  border-color: var(--color-border-hover);
}

button.hollow.primary { color: var(--color-primary); }
button.hollow.error { color: var(--color-error); }

input, textarea, select {
  font-size: inherit;
  padding: 0.6em;
  border: 1px solid var(--color-border);
  color: var(--color-text);
  background-color: var(--color-surface-input);
  border-radius: var(--border-radius);
}

input:hover, textarea:hover, select:hover {
  border: 1px solid var(--color-border-hover);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border: 1px solid var(--color-primary);
}

input:disabled, textarea:disabled, select:disabled {
  background-color: var(--color-surface);
}

.with-sidebar-expanded .when-sidebar-collapsed {
  display: none;
}