@import "common";
@import "controls";
@import "resizer";

*, *:before, *:after {
  box-sizing: inherit;
}

html, body {
  box-sizing: border-box;
  font-family: proxima-nova, Helvetica Neue, Helvetica, Arial, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 0.9em;
  color: $primaryColor;
}

.container {
  display:         flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
  width: 100%;
}

.block {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.block-item {
  flex: 1;

}

.custom-editor {
  padding: 1rem;
}

h1,h2,h3,h4 {
  text-transform: lowercase;
  font-weight: 100;
  color: $primarySelectionBackgroundColor
}

.table {
  border-collapse: collapse;
  width: 100%;
}
.table > thead {
  width: 100%;
}

.table > thead > tr {
  width: 100%;
}

.table > thead > tr > th {
   font-weight: bold;
   text-transform: uppercase;
   text-align: left;
   padding: 0.2rem 1rem 0.5rem 1rem;
   vertical-align: bottom;
   border-bottom: 0.1rem solid #ddd;
   border-right: 0.1rem solid #ddd;
   font-size: 0.8rem;
 }

.table > tbody > tr {
  vertical-align: middle;
  cursor: pointer;
  width: 100%;
  border-bottom: 0.2rem solid $primarySelectionColor;
  cursor: pointer;
}

.table > tbody > tr.active {
  background-color: $primaryHoverBackgroundColor;
  color: $primaryHoverColor;
}

.table > tbody > tr:hover {
  background-color: $secondaryHoverBackgroundColor;
  color: $primaryHoverColor;
}

.table > tbody > tr > td > a:link {
  text-decoration: inherit;
  display: block;
  color: inherit;
  cursor: pointer;
}

.table > tbody > tr > td > a:visited {
  text-decoration: inherit;
  display: block;
  color: inherit;
  cursor: pointer;
}

.table > tbody > tr > td {
  font-weight: normal;
  padding: 0.6rem;
  border: 0;
  font-size: 0.8rem;
  cursor: pointer;
}

.table > tbody> tr:not(:hover):not(.active) > td.selection {
  background-color: $secondaryBackgroundColor;
  color: $primaryColor;
}