// This is the source file for luminous.css
// If you want to edit it, you'll need SASS.
// http://sass-lang.com/

/*
 Copyright 2010 Mark Watkinson
 
 This file is part of Luminous.
 
 Luminous is free software: you can redistribute it and/or
 modify
 it under the terms of the GNU General Public License as published by
 the Free Software Foundation, either version 3 of the License, or
 (at your option) any later version.
 
 Luminous is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 GNU General Public License for more details.
 
 You should have received a copy of the GNU General Public License
 along with Luminous.  If not, see <http://www.gnu.org/licenses/>.
 
 */


@mixin vendor-prefix($property, $value) {
  @each $prefix in '', -webkit-, -moz-, -o-, -ms- {
    #{$prefix}#{$property} : $value;
  }
}

@mixin transition($properties, $duration: 0.5s, $easing: ease-in) {
  @each $prefix in '', -webkit-, -moz-, -o-, -ms- {
    #{$prefix}transition-property: $properties;
    #{$prefix}transition-duration : $duration;
    #{$prefix}transition-timing-function: $easing;
  }
}

.luminous {

  font-size:inherit; 
  text-align:left;
  font-family: "Consolas", "DejaVu Sans Mono", monospace;
  
  border: 2px solid #ddd;
  border-radius: 5px;
  
  
  &.inline {
    min-width: 1px;
    max-width: none;
    line-height: normal;
    &, div, pre {
      padding: 0;
      *display: inline;
      display: inline-block;
    }
    pre {
      // this would otherwise get 'overflow auto', but auto seems to
      // cause it to sit a bit out of line with the text. So does 'hidden'.
      // in any case, this shouldn't overflow.
      overflow: visible;
    }
  }
  .link {
    &, &:visited {
      text-decoration: underline;
    }
    &:hover {
      text-decoration: none;
    }
  }

  
  pre {
    margin: 0;
    padding: 0 0 0 1em;
    background: transparent none;
    font-size: inherit;
    font-family: inherit;
    width: auto;
    overflow: auto;
  }
  
  /* line numbers */
  .numbers {
    counter-reset: term;
    margin-left: 0;
    padding-left: 0;
    
    /* We're using a list for the lines, so we'll have to hide 
       that a bit */
    & > ol {
      list-style: none;
      padding: 0;
      margin: 0;
      & > li { 
        padding: 0;
        margin: 0;
      }
    }
    /* each line */
    
    & > ol > li {
      padding: 0 0 0 3em;
      border: none;
      margin: 0;
      //display:block;
      position:relative;
      @include transition(background-color);

      &:before {
        counter-increment: term !important;
        content: counter(term) !important;
        padding: 0;
        margin-right: 0.5em;
        display: inline-block;
        text-align: center;
        @include vendor-prefix(user-select, none);
        width: 2em;
        // necessary to ensure the heights of the line and the 
        // number are the same
        position: absolute;
        height: 100%;
        left: 0;
      }
      &:after {
        // ensures that the browser won't collapse empty lines
        content: " ";
      }
      &:nth-child(5n):before {
        font-weight: bold;
      }
      
    }
    
    &.line-no-width-2 > span { padding-left: 3em; }
    &.line-no-width-3 > span { padding-left: 4em; }
    &.line-no-width-4 > span { padding-left: 5em; }
    &.line-no-width-5 > span { padding-left: 6em; }
    &.line-no-width-6 > span { padding-left: 7em; }

    
    // This enforces the width of all the numbers is consistent
    // i.e. '2' doesn't have a smaller width than '999' when there
    // are 3 digits of numbers. 
    &.line-no-width-2 > span:before { width: 2em !important; }
    &.line-no-width-3 > span:before { width: 3em !important; }
    &.line-no-width-4 > span:before { width: 4em !important; }
    &.line-no-width-5 > span:before { width: 5em !important; }
    &.line-no-width-6 > span:before { width: 6em !important; }
    
    &.line-no-hidden > span {
        padding-left: 0;
        &::before { display: none; }
    }
    
  }
  
  div {
    border-radius: inherit;
  }
    
}