
// Variables
@font-header: Lato, Helvetica, Arial, sans-serif;
@font-content: Georgia, serif;
@font-mono: monospace;

@color-default: #565656;
@bg-color-default: #FF6666;
@bg-color-header: #232323;
@color-header: #FFFFFF;
@bg-color-grouping: #FFCC00;
@color-grouping: #232323;
@bg-color-entry: #FFFFFF;
@color-date: #FF6666;
@color-source: #8B8B8B;
@color-link: #FFFFFF;
@bg-color-link: #E51133;
@color-body-link: #E51133;
@bg-color-progress-bar: #565656;
@bg-color-progress: #FFCC00;

@spine-width: 4px;

@width-medium: 600px;

// Mobile first, meaning original styles are for mobiles and
// we make changes as the screen gets larger.

.tik-tok-container {
  position: relative;
  width: 95%;
  max-width: 70em;
  margin: 0 auto 2em auto;
  font-family: @font-header;
  color: @color-default;
  box-sizing: border-box;

  // Allows the main background color to styled together
  &.tt-bg-color,
  .tt-bg-color {
    background-color: @bg-color-default;
  }

  div, span, section {
    box-sizing: border-box;
  }

  // Mini clearfix
  // http://nicolasgallagher.com/micro-clearfix-hack/
  .cf:before,
  .cf:after {
    display: table;
    content: " ";
  }
  .cf:after {
    clear: both;
  }
  .cf {
    *zoom: 1;
  }

  .tt-header {
    position: relative;
    z-index: 10;
    padding-top: 1.5em;
    font-family: @font-header;
    text-align: center;

    .tt-label {
      margin-bottom: 1em;
      font-size: 1.25em;
    }

    .tt-title {
      margin-bottom: 0.5em;
      font-size: 2em;
    }
  }

  // Allow header colors to be styled together
  .tt-header-color {
    color: @color-header;
    background-color: @bg-color-header;
  }

  // Allow spine and grouping to have a single selector to
  // change the color
  .tt-spine-color {
    color: @color-grouping;
    background-color: @bg-color-grouping;
  }

  .tt-spine-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    text-align: center;

    .tt-spine {
      top: 0;
      bottom: 0;
      display: inline-block;
      width: @spine-width;
      height: 100%;
    }
  }

  .tt-spine-end {
    position: relative;
    padding: 0;
    line-height: 0.5em;
    text-align: center;

    .tt-spine-point {
      display: inline-block;
      width: @spine-width * 4;
      height: @spine-width * 4;
      padding: 0;
      margin: 0;
      border-radius: 50%;
    }

    .tt-spine {
      display: inline-block;
      width: @spine-width;
      height: 2em;
      padding: 0;
      margin: 0;
    }

    &.tt-spine-top {
      padding-top: 2em;

      .tt-spine-point {
        margin-bottom: -1px;
      }
    }

    &.tt-spine-bottom {
      padding-bottom: 2em;
    }
  }

  .tt-groups {
    position: relative;
    z-index: 10;
    padding-top: 1em;
  }

  .tt-group {

    .tt-group-label-wrapper {
      text-align: center;
    }

    .tt-group-label {
      display: inline-block;
      padding: 0.5em 1em;
      margin: 0 auto 1em auto;
    }
  }

  .tt-entries {
    padding: 0 1em 1em 1em;
    margin-bottom: 1em;
  }

  .tt-entry {
    padding: 1em;
    margin-bottom: 1em;
    background-color: @bg-color-entry;

    .tt-entry-date {
      margin-bottom: 1em;
      font-size: 0.85em;
      color: @color-date;
      text-transform: uppercase;
    }

    .tt-entry-link {
      display: block;
      float: right;
      padding: 1em 1em;
      margin-top: -1.17647059em;
      margin-right: -1.17647059em;
      font-size: 0.85em;
      color: @color-link;
      text-decoration: none;
      text-transform: lowercase;
      background-color: @bg-color-link;

      &:hover {
        text-decoration: underline;
      }
    }

    .tt-entry-title {
      padding: 0;
      margin: 0 0 0.75em 0;
      font-size: 1.5em;
      font-weight: normal;
    }

    .tt-entry-media-wrapper.with-body {
      margin-bottom: 1em
    }

    .tt-entry-media {
      margin: 0 -1em 0 -1em;

      &.with-source {
        margin-bottom: 0.5em;
      }

      img {
        max-width: 100%;
      }
    }

    .tt-entry-source {
      font-family: @font-content;
      font-size: 0.85em;
      color: @color-source;
    }

    .tt-entry-body {
      margin-bottom: 0;
      font-family: @font-content;
    }

    .tt-entry-body,
    .tt-entry-source {

      a {
        color: @color-body-link;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }

      code {
        padding: 0.15em 0.25em;
        font-family: @font-mono;
        background-color: #ECECEC;

        &.code-block {
          display: block;
          max-height: 15em;
          padding: 0.5em 1em;
          margin-bottom: 1em;
          overflow: scroll;
        }
      }

      abbr {
        cursor: help;
        border-bottom: 1px dashed #ECECEC;
      }

      // Ensure first and last item has no margin to maintain consistent spacing
      > *:first-child {
        margin-top: 0;
      }

      > *:last-child,
      > *.code-block:last-child {
        margin-bottom: 0;
      }
    }

    // On larger screens split media and body
    @media (min-width: @width-medium) {
      .tt-entry-media-wrapper.with-body,
      .tt-entry-body-wrapper.with-media {
        width: 50%;
        float: right;
      }

      .tt-entry-media-wrapper.with-body {
        margin-bottom: 0;
        padding-left: 1em;

        .tt-entry-media {
          margin-left: 0;
          margin-right: 0;
        }
      }

      .tt-entry-body-wrapper.with-media {
        padding-right: 1em;
      }

      .tt-entry-source {
        margin-bottom: 0;
      }
    }
  }

  .tt-progress-bar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10000;
    width: 100%;
    height: 0;
    background-color: @bg-color-progress-bar;
    transition: height 200ms linear;

    &.enabled {
      height: 0.5em;
    }

    .tt-progress {
      position: relative;
      width: 0;
      height: 100%;
      background-color: @bg-color-progress;
      transition: width 200ms linear;
    }
  }
}
