/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require codemirror/codemirror
 *= require_self
 *= require_tree .
 */

@import "bootstrap";
@import "rails_bootstrap_forms";
@import "font-awesome";

.turbolinks-progress-bar {
  background-color: $primary;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 40px;
  line-height: 40px;
  background-color: $light;
}

/* Custom style for navbar toggler due to CSP problems */
.navbar-toggler-icon {
  background-image: none !important;
}

/* Style for buttons in the corner of problems/translations */
.problem-buttons {
  position: relative;
  display: block;
}

.problem-buttons .problem-buttons-inner {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 10;
}

/* Style for links to previous and next problem */
.problem-prev {
  float: left;
  margin: 20px -30px 0;
}

.problem-next {
  float: right;
  margin: 20px -30px 0;
}

/* Style for translation diffs */

.diff {
  overflow:auto;
  margin-bottom: 20px;
  ul{background:#fff;overflow:auto;font-size:13px;list-style:none;margin:0;padding:0;display:table;width:100%;}
  del, ins{display:block;text-decoration:none;}
  li {
    padding:0;
    display:table-row;
    margin: 0;
    height:1em;
    ins {
      background:#dfd;
      color:#080;
      strong{font-weight:normal;background:#9f9;}
    }
    del {
      background:#fee;
      color:#b00;
      strong{font-weight:normal;background:#fcc;}
    }
    /* try 'whitespace:pre;' if you don't want lines to wrap */
    del, ins, span {white-space:pre-wrap;font-family:courier;}
  }
}

/* Custom css for fixing styles within problem content */

.problem-content {
  blockquote {
    margin: 0px;
    font-size: 14px;
    border-left: medium none;
  }

  div {
    margin: 0px 0px 10px;
  }

  table {
    border-collapse: separate;
    border-spacing: 2px;
  }

  td {
    padding: 1px;
  }

  // Make info/note boxes styled like bootstrap info alerts
  > .info, > .note {
    @extend .alert;
    @extend .alert-info;
    margin-bottom: 0px;
    > a {
      @extend .alert-link;
    }
  }

  dfn {
    border-bottom: 1px dotted;
    font-style: normal;
    cursor: help;
  }
}