<commit_before>@import 'colors';
@import 'typography';
@import 'layers';
// Using px because the gap needs to be px so that it does not disappear, and can only add with same units.
$bar-height: 26px; // drag, settings, delete, etc are square so width = height.
$bar-parent-height: 20px;
$bar-bd-height: 3px;
$bar-gap: 1px;
$bar-label-width: 76px;
$bar-bg-color: rgba(23,130,169,.95);
$bar-parent-bg-color: rgba(139,191,211,.95);


// Wrapper around parent and component.
.component-bar-wrapper {
  position: relative;
}

// Parent's bar hidden for now.
.component-bar-wrapper.selected-parent > .component-bar {
  display: none;
  opacity: 0;
}

// Selected bar
.component-bar-wrapper.selected > .component-bar {
  display: flex;
  opacity: 1;
}

// Bar on a selected component
.component-bar {
  @include overlay-copy();
  @include component-toolbar-layer();

  align-content: flex-end;
  align-items: stretch;
  display: none;
  flex-flow: row nowrap;
  height: $bar-height;
  justify-content: flex-start;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -$bar-height;
  transition: opacity .15s ease-in-out;
  width: 100%;
}

// Bar items
.component-bar > span {
  @include label();

  background: $bar-bg-color;
  color: #fff;
  display: block;
  flex-basis: $bar-height;
  flex-grow: 0;
  font-family: Arial, sans-serif;
  font-size: 11px;
  height: $bar-height;
  line-height: $bar-height;
  margin: 0 $bar-gap 0 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

// Selected label
.component-bar > .label {
  cursor: default;
  flex-basis: auto;
  max-width: calc(100% - 28px);
  min-width: $bar-label-width;
  order: 1;
  padding: 0 .5rem;
  text-align: left;
  width: auto;
}

// Parent's label
.component-bar > .parent.label {
  background: $bar-parent-bg-color;
  cursor: pointer;
  height: $bar-parent-height;
  left: 0;
  line-height: $bar-parent-height;
  position: absolute;
  top: -$bar-gap - $bar-parent-height;
}

// Actions
.component-bar > span img {<commit_msg>one more<commit_after>@import 'colors';
@import 'typography';
@import 'layers';
// Using px because the gap needs to be px so that it does not disappear, and can only add with same units.
$bar-height: 26px; // drag, settings, delete, etc are square so width = height.
$bar-parent-height: 20px;
$bar-bd-height: 3px;
$bar-gap: 1px;
$bar-label-width: 76px;
$bar-bg-color: rgba(23,130,169,.95);
$bar-parent-bg-color: rgba(139,191,211,.95);


// Wrapper around parent and component.
.component-bar-wrapper {
  position: relative;
}

// Parent's bar hidden for now.
.component-bar-wrapper.selected-parent > .component-bar {
  display: none;
  opacity: 0;
}

// Selected bar
.component-bar-wrapper.selected > .component-bar {
  display: flex;
  opacity: 1;
}

// Bar on a selected component
.component-bar {
  @include overlay-copy();
  @include component-toolbar-layer();

  align-content: flex-end;
  align-items: stretch;
  display: none;
  flex-flow: row nowrap;
  height: $bar-height;
  justify-content: flex-start;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -$bar-height;
  transition: opacity .15s ease-in-out;
  width: 100%;
}

// Bar items
.component-bar > span {
  @include label();

  background: $bar-bg-color;
  color: #fff;
  display: block;
  flex-basis: $bar-height;
  flex-grow: 0;
  font-family: Arial, sans-serif;
  font-size: 11px;
  height: $bar-height;
  line-height: $bar-height;
  margin: 0 $bar-gap 0 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
}

// Selected label
.component-bar > .label {
  cursor: default;
  flex-basis: auto;
  max-width: calc(100% - 28px);
  min-width: $bar-label-width;
  order: 1;
  padding: 0 5px;
  text-align: left;
  width: auto;
}

// Parent's label
.component-bar > .parent.label {
  background: $bar-parent-bg-color;
  cursor: pointer;
  height: $bar-parent-height;
  left: 0;
  line-height: $bar-parent-height;
  position: absolute;
  top: -$bar-gap - $bar-parent-height;
}

// Actions
.component-bar > span img {
{'fraction_non_alphanumeric': 0.15464918669579994, 'fraction_numerical': 0.02573440155377519, 'mean_word_length': 3.434876210979548, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 15, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2865434', 'n_tokens_mistral': 1606, 'n_tokens_neox': 1490, 'n_words': 401}