.import-template-overlay,
.import-template-overlay--empty {
  height: 500px;
  display: flex;
}

.import-template-overlay {
  align-items: stretch;
}

.import-template-overlay--templates {
  flex: 2 0 0;
  border-radius: $ix-radius;
}

.import-template-overlay--details {
  flex: 5 0 0;
  margin-left: $ix-marg-b;
}

.import-template-overlay--panel {
  min-height: 500px;
}

.import-template-overlay--name {
  margin-top: 0;
  margin-bottom: $ix-marg-b;
}

.import-template-overlay--description {
  margin-top: 0;
  margin-bottom: $ix-marg-d;
}

.import-template-overlay--heading {
  margin-top: 0;
  border-bottom: $ix-border solid $g5-pepper;
  padding-bottom: $ix-marg-b;
}

.import-templates-overlay--included {
  margin-bottom: 0;
}

.import-template-overlay--name.missing,
.import-template-overlay--included.missing,
.import-template-overlay--description.missing {
  font-style: italic;
  color: $g9-mountain;
}

.import-template-overlay--empty {
  background-color: $g3-castle;
  border-radius: $ix-radius;
  align-content: center;
  align-items: center;
  justify-content: center;
}

.import-template-overlay--template {
  user-select: none;
  border-radius: $ix-radius;
  padding: $ix-marg-b;
  background-color: $g1-raven;
  margin-bottom: $ix-border;
  border: $ix-border solid $g1-raven;
  color: $g11-sidewalk;
  display: flex;
  flex-wrap: none;
  align-items: center;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;

  &:hover {
    border-color: $g5-pepper;
    background-color: $g5-pepper;
    color: $g18-cloud;
    cursor: pointer;
  }

  &.active {
    border-color: $c-rainforest;
    color: $g18-cloud;
    background-color: $g5-pepper;
  }
}

.import-template-overlay--list-label {
  font-size: 13px;
  font-weight: 500;
  margin-left: $ix-marg-b;
}