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

$color1: #00A0B0;
$color2: #6A4A3C;
$color3: #CC333F;
$color4: #EB6841;
$color5: #EDC951;

// .asciicasts {
//   list-style: none;

//   .asciicast-preview {
//     h3 {
//       font-size: 16px;

//       a {
//         color: $color1;
//       }
//     }

//     margin-bottom: 30px;
//   }
// }

.player {
  /* border: 1px solid #777;*/
  /* background-color: #333;*/
  float: left;
  display: block;
  padding: 0px;
  // margin: 0px 0px 30px 20px;
  position: relative;

  .terminal {
    overflow: hidden;
    padding: 2px;
    margin: 0px;
    display: block;
    font-size: 12px;
    // font-family: Monaco,"Courier New","DejaVu Sans Mono","Bitstream Vera Sans Mono",monospace;
    font-family: monospace;
    // font-family: 'Droid Sans Mono', Monospace;
    white-space: pre;
    background-color: black;
    // line-height: 1.2em;
    line-height: inherit;
    color: #ccc;
    cursor: pointer;

    .loading {
      background-image: url(image-path('loader.gif'));
      background-repeat: no-repeat;
      background-position: center;
      z-index: 10;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .start-prompt {
      background-image: url(image-path('play-button-1.png'));
      background-repeat: no-repeat;
      background-position: center;
      z-index: 20;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }

    .line {
      font-size: 12px;
      /* background-color: black;*/
      /* padding: 0;*/
      /* margin: 0;*/
    }

    &.cursor-on {
      .line {
        .cursor.visible {
          background-color: #D3D7CF;
        }
      }
    }
  }

  .hud {
    background-color: #333;
    opacity: 0;
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 30px;
    color: white;
    font-weight: bold;
    font-family: monospace;

    -webkit-transition: opacity 0.3s ease-in-out;

    .toggle {
      background-color: $color1;
      width: 30px;
      height: 100%;
      float: left;
      cursor: pointer;

      &.paused {
        background-color: $color4;
      }
    }

    .progress {
      background-color: $color2;
      width: 60%;
      // height: 100%;
      float: left;
      // cursor: pointer;

      // .gutter {
      //   background-color: $color5;
      //   width: 0px;
      //   height: 100%;
      // }
    }

    .time {
      background-color: $color3;
      width: 30%;
      height: 100%;
      float: left;
      text-align: center;
    }
  }

  &:hover .hud {
    opacity: 1.0;
  }

  .bright { font-weight: bold }
  .underline { text-decoration: underline }
  .italic { font-style: italic }

  .fg8 { font-weight: bold }
  .fg9 { font-weight: bold }
  .fg10 { font-weight: bold }
  .fg11 { font-weight: bold }
  .fg12 { font-weight: bold }
  .fg13 { font-weight: bold }
  .fg14 { font-weight: bold }
  .fg15 { font-weight: bold }

}