// TODO: Old and wrong and bad
.toolbar {
  @include usevar('background-color', 'editor-toolbar-background');
  @include usevar('border-color', 'editor-toolbar-border-color');

  border-radius:3px;
  height: 2.2em;
  overflow-y:scroll;
  transition:all 0.3s;
  border: 1px solid transparent;

  .button, input[type=button] {
    @include usevar('background-color', 'editor-toolbar-button-background');
    @include usevar('border-color', 'editor-toolbar-button-border-color');

    line-height: 2.2em;
    box-shadow:none;
    border:0px;
    border-right:1px solid transparent;
    border-radius:0px;
    margin:0px;
    padding:0px 10px;
    height:100%;
    vertical-align:bottom;
    text-transform:none;
    font-weight:300;

    &:hover {
      @include usevar('background-color', 'editor-toolbar-button-background-hover');
    }
  }

  input[type="text"] {
    height:2.2em;
    border:0px solid transparent; /* Not themed */
  }
}

#preview:empty::after {
  content: 'A preview of your post will appear here.';
  @include usevar(color, dimmer-color);
  font-style: italic;
}

@media #{$breakpoint-not-small} {
  #preview-container {
    max-height: calc(100vh - 20rem);
    overflow: auto;
  }
}

.edit-form {
  .edit-form-row {
    @extend .flex;
    @extend .flex-column;
    @extend .flex-row-ns;
    @extend .mv3;

    > :first-child {
      @extend .w-100;
      @extend .w4-ns;
      @extend .flex-grow-0;
      @extend .flex-shrink-0;
      @extend .tl;
      @extend .tr-ns;
      @extend .pr0;
      @extend .pr2-ns;
      @extend .pb1;
      @extend .pb0-ns;
      font-weight: 500;
    }

    > :nth-child(2) {
      @extend .flex-grow-1;
      @extend .overflow-hidden;
    }

    .pt-input-ns {
      // NOTE(ben): This could maybe be more general someday?
      @media #{$breakpoint-not-small} {
        padding-top: $input-padding;
      }
    }
  }

  input[type=text] {
    @extend .w-100;
    @extend .mw5-ns;
  }

  input[type=text]:invalid {
    @include usevar(border-color, form-error-color);
  }

  textarea {
    @extend .w-100;
    @extend .w6-ns;
    @extend .mw-100;
    @extend .h3;
  }

  &.project-edit {
    .project_description {
      width: 100%;
      min-height: 400px;
      height: 30vh;
    }

    input.project_blurb, 
    input.project_name,
    {
      min-width: 300px;
      width: 50%;
    }

    .quota-bar {
      // @include usevar(border-color, 'project-edit-quota-bar-border-color');

      width: 500px;
      border-width: 1px;
      margin-bottom: 10px;

      .quota-filled {
        // @include usevar(background-color, 'project-edit-quota-bar-filled-background');

        height: 100%;
      }
    }
  }
}