<commit_before>@import 'colors';
@import 'typography';
@import 'buttons';
@import 'layers';

.kiln-toolbar-wrapper {
  @include toolbar-layer();

  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
}

.kiln-toolbar {
  background-color: $black;
  height: 50px;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  @media screen and (min-width: 600px) {
    height: 60px;
  }

  @media screen and (min-width: 1024px) {
    height: 70px;
  }
}

// when the editor toolbar is on the screen, push the page content down
body {
  padding-top: 50px;

  @media screen and (min-width: 600px) {
    padding-top: 60px;
  }

  @media screen and (min-width: 1024px) {
    padding-top: 70px;
  }
}

.kiln-toolbar-inner {
  align-items: center;
  display: flex;
  height: 100%;
  left: 0;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  top: 0;
  width: 100%;
}

.kiln-toolbar-inner > button:not(.publish) {
  @include button-small();
  @include button-filled($black-75);

  flex: 0 0 auto;
}

.kiln-toolbar-inner > button:first-of-type {
  margin-left: 20px;
}

.publish {
  @include button-large();
  @include button-filled($green);

  margin-right: 20px;
}

.toolbar-spacer {
  flex: 1 1 auto;
}

// Status of saving controlled by class on body.
.kiln-toolbar-inner > .status:before {
  display: none;
}

.mobile-button-text {
  display: inline;

  @media screen and (min-width: 600px) {
    display: none;
  }
}

.non-mobile-button-text {
  display: none;

  @media screen and (min-width: 600px) {
    display: inline;
  }
}

// publish pane
.kiln-publish-pane {
  padding: 5px 10px;
  position: absolute;
  text-align: center;
  top: -100px; // make sure it's NEVER shown in the screen, no matter how long the publish text is
  width: 100%;
  z-index: 1;
}

.kiln-publish-pane.success {
  background-color: $green;
}

.kiln-publish-pane.error {
  background-color: $red;
}

.kiln-publish-pane.show {
  top: 50px;
  transition: top 300ms cubic-bezier(.17, .04, .03, .94);

  @media screen and (min-width: 600px) {
    top: 60px;
  }

  @media screen and (min-width: 1024px) {
    top: 70px;
  }
}

.publish-status {
  @include normal-text();
  @include overlay-copy();

  color: #fff;
  font-weight: 600;
}

.publish-link {
  @include button-small();
  @include button-outlined(#fff, $green);

  display: inline-block;
  float: none;
  font-weight: 600;
  margin: 0 0 0 15px;
  text-decoration: none;

  @media (max-width: 599.9px) {
    margin-top: 5px;
  }
}
<commit_msg>move toolbar to the bottom<commit_after>@import 'colors';
@import 'typography';
@import 'buttons';
@import 'layers';

$mobile-height: 50px;
$desktop-height: 60px;

.kiln-toolbar-wrapper {
  @include toolbar-layer();

  left: 0;
  position: fixed;
  top: calc(100% - #{$mobile-height});
  width: 100%;

  @media screen and (min-width: 1024px) {
    top: calc(100% - #{$desktop-height});
  }
}

.kiln-toolbar {
  background-color: $black;
  height: $mobile-height;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;

  @media screen and (min-width: 1024px) {
    height: $desktop-height;
  }
}

// when the editor toolbar is on the screen, push the page content down
body {
  padding-bottom: $mobile-height;

  @media screen and (min-width: 1024px) {
    padding-bottom: $desktop-height;
  }
}

.kiln-toolbar-inner {
  align-items: center;
  display: flex;
  height: 100%;
  left: 0;
  margin: 0 auto;
  max-width: 1200px;
  position: relative;
  top: 0;
  width: 100%;
}

.kiln-toolbar-inner > button:not(.publish) {
  @include button-small();
  @include button-filled($black-75);

  flex: 0 0 auto;
}

.kiln-toolbar-inner > button:first-of-type {
  margin-left: 20px;
}

.publish {
  @include button-large();
  @include button-filled($green);

  margin-right: 20px;
}

.toolbar-spacer {
  flex: 1 1 auto;
}

// Status of saving controlled by class on body.
.kiln-toolbar-inner > .status:before {
  display: none;
}

.mobile-button-text {
  display: inline;

  @media screen and (min-width: 600px) {
    display: none;
  }
}

.non-mobile-button-text {
  display: none;

  @media screen and (min-width: 600px) {
    display: inline;
  }
}

// publish pane
.kiln-publish-pane {
  padding: 5px 10px;
  position: absolute;
  text-align: center;
  top: -100px; // make sure it's NEVER shown in the screen, no matter how long the publish text is
  width: 100%;
  z-index: 1;
}

.kiln-publish-pane.success {
  background-color: $green;
}

.kiln-publish-pane.error {
  background-color: $red;
}

.kiln-publish-pane.show {
  top: 50px;
  transition: top 300ms cubic-bezier(.17, .04, .03, .94);

  @media screen and (min-width: 600px) {
    top: 60px;
  }

  @media screen and (min-width: 1024px) {
    top: 70px;
  }
}

.publish-status {
  @include normal-text();
  @include overlay-copy();

  color: #fff;
  font-weight: 600;
}

.publish-link {
  @include button-small();
  @include button-outlined(#fff, $green);

  display: inline-block;
  float: none;
  font-weight: 600;
  margin: 0 0 0 15px;
  text-decoration: none;

  @media (max-width: 599.9px) {
    margin-top: 5px;
  }
}

{'fraction_non_alphanumeric': 0.15509076558800317, 'fraction_numerical': 0.044396211523283345, 'mean_word_length': 3.081320450885668, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, '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': '6239357', 'n_tokens_mistral': 2167, 'n_tokens_neox': 1905, 'n_words': 501}