// Place all the styles related to the recipes controller here.
// They will automatically be included in application.css.
// You can use Sass (SCSS) here: http://sass-lang.com/

@mixin editor {

  @extend .well;
  @extend .well-sm;

  margin-bottom: 10px;
  padding-top: 4px;

  .form-group {
    margin-bottom: 10px;
  }

  .remove-button {
    @extend .btn;
    @extend .btn-danger;
    @extend .btn-sm;

    position: absolute;
    top: 0;
    right: 9px;
  }
}

div.ingredient-editor {
  @include editor;

}

div.step-editor {
  @include editor;

  padding-bottom: 4px;

  .form-group {
    margin-bottom: 0;
  }

  .sort-order-display {
    font-size: 120%;
    font-weight: normal;
    line-height: 50px;
    padding-left: 15px;
  }
}

div#ingredient-list, div#step-list {
  padding-bottom: 15px;
}

div#ingredient-list {

  @media (min-width: $screen-md-min) {
    .ingredient-editor .control-label {
      display: none;
    }

    .ingredient-editor:first-child .control-label {
      display: inline-block;
    }
  }
}

div.recipe-view {

  .source {
    @extend .col-xs-6;
    word-wrap: break-word;
  }

  .ingredients div {
    padding-bottom: 15px;
  }

  .steps div {
    padding-bottom: 15px;
  }

  li.checked {
    text-decoration: line-through;
  }
}