main.posts {
  @include display(flex);
}

main.posts > section {
  @include flex(1);
  @include display(flex);
  @include flex-direction(column);
  @include justify-content(center);
  padding-top: 1em;

  & > div {
    @include flex(0 180px);
    margin: 0 auto;
    padding: 1em;
  }

}

main.posts div.done {
  @include transition(color 0.3s ease);
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  font-size: 1.5em;
  text-align: center;
  padding: 2em 0;
  color: lighten($light-blue, 5%);
  &:hover {
    color: darken($light-blue, 25%);
    a {
      text-decoration: underline;
    }
  }

  h6 {
    font-size: 1.4em;
    margin: 0;
  }

  a {
    color: inherit;
    cursor: pointer;
  }
}

main.posts.view > header > nav > div.publish.state {
  @include transition(background-color 0.2s);
  position: relative;
  padding: 2px;
  margin: 0 2em;
  width: 10em;
  height: 30px;
  background-color: #dddddd;
  border-radius: 60px;
  cursor: pointer;
  overflow: hidden;

  &:hover label:last-child {
    background-color: darken(white, 2%);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6);
  }

  label {
    display: block;
    position: absolute;
    font-weight: bold;
    line-height: 2em;
    text-indent: 0;
    top: 1px;
    left: 1px;
    bottom: 1px;
    cursor: pointer;
    padding: 0 1em;
  }

  label:first-child {
    @include transition(background 0.2s, text-indent 0.2s);
    right: 1px;
    background-color: #f1f1f1;
    border-radius: 30px;
    text-indent: 0;
  }

  label:last-child {
    @include transition(background 0.2s, box-shadow 0.2s, margin 0.2s);
    width: 28px;
    background-color: white;
    border-radius: 100%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    text-indent: 30px;
  }

  &[published='true'] {
    background-color: lighten($gray-blue, 5%);

    label:first-child {
      background-color: lighten($navy-blue, 25%);
      color: darken($navy-blue, 25%);
    }

    label:last-child {
      margin-left: calc(10em - 30px);
      text-indent: 10em;
    }
  }

  &:not([published='true']) {
    label:first-child {
      text-indent: -20em;
    }

    label:last-child {
    }
  }

}

#PostsIndex header {
  min-height: 200px;
  @include display(flex);
  @include align-items(center);

  & > section {
    @include flex(1);
    @include display(flex);
  }
}

#PostsIndex header section.search {
  @include display(flex);
  @include align-items(stretch);

  border: 1px solid lighten($gray-blue, 25%);
  border-radius: 2px;

  input {
    @include flex(1);
    min-width: 200px;
    width: 100%;
    font-size: 1.0em;
    margin: 0 auto;
    border: none;
  }

  svg {
    @include transition(fill 0.3s);
    width: 24px;
    padding: 4px;
  }

  [as='Posts.Filter.Tags'] {
    @include display(flex);
    @include align-items(center);
    @include transition(background-color 0.3s ease, box-shadow 0.3s ease);
    border-right: 1px solid lighten($gray-blue, 25%);
    cursor: pointer;

    &:hover, &.tagged {
      background-color: $light-blue;
    }

    &.tagged:hover svg.clear {
      fill: $red;
    }

    &.tagged {
      box-shadow: inset 0 1px lighten($light-blue, 5%);
      &:active {
        box-shadow: inset 0 1px 2px 0 darken($light-blue, 10%);
      }
    }

    span {
      display: inline-block;
      margin: 0 0.3em 0 1em;
      font-weight: bold;
      font-size: 0.8em;
    }

    svg.clear {
      fill: darken($light-blue, 10%);
      width: 20px;
      margin-top: 1px;
    }
  }
}

#PostsIndex section.posts {
  @include flex-direction(row);
  @include justify-content(space-between);
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
}

#PostsIndex ol.posts {
  @include display(flex);
  @include flex-direction(column);
  @include flex-wrap(wrap);
  @include justify-content(flex-start);

  margin: 2em 1em;

  & > h3 {
    text-align: center;
    font-size: 3em;
    font-weight: bolder;
  }

  li {
    @include display(flex);
    @include flex-direction(column);
    @include flex(0 0 auto);
    @include justify-content(space-between);
    max-width: 400px;
    padding: 1em;
    margin: 0.1em;
    color: darken($navy-blue, 25%);

    .title {
      margin: 1em 0;
      font-weight: bolder;
      font-size: 1.3em;
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }

    a {
      color: inherit;
    }
  }
}

#PostsIndex header section.new {
  margin: 0 1em;
  a {
    @include transition(box-shadow 0.2s);
    text-transform: uppercase;
    font-size: 0.8em;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 2px;
    color: lighten($green, 35%);
    text-shadow: 0 -1px darken($green, 10%);
    text-decoration: none;
    background-color: darken($green, 5%);
    box-shadow: inset 0 1px 1px 0 lighten($green, 15%), 0 1px 1px transparent;

    &:hover {
      box-shadow: inset 0 1px 1px 0 transparent, 0 1px 1px darken($green, 25%);
    }

    &:active {
      box-shadow: none;
    }
  }
}

#PostsIndex ~ div.overlay #TagsList {
  h2 {
    text-align: center;
    margin: 0;
    padding: 1em 0;
    background-color: $gray-blue;
    border-bottom: 1px solid lighten($light-blue, 25%);
    color: lighten($light-blue, 25%);
  }

  li {
    @include transition(background-color 0.2s ease);
    padding: 1em;
    margin: 0;
    cursor: pointer;
    &:hover {
      background-color: $light-blue;
    }
  }
}

#PostsNew form.new.post, #PostsCreate form.new.post {
  @include display(flex);
  @include align-items(center);
  @include justify-content(center);
  @include flex-direction(column);
  @include flex(1);

  fieldset, ul.errors {
    max-width: 500px;
    width: 80vw;
    margin: 0 auto;
    input {
      width: 100%;
    }
  }

  fieldset {
    &.errors input {
      border: 1px solid darken($red, 5%);
    }

    input {
      font-size: 1.5em;
      line-height: 2em;
      border: 1px solid lighten($gray-blue, 25%);
    }
  }

  ul.errors {
    text-align: center;
    background-color: $red;
    border-radius: 0px 0px 2px 2px;
    border-left: 1px solid darken($red, 5%);
    border-right: 1px solid darken($red, 5%);
    border-bottom: 1px solid darken($red, 5%);

    box-shadow: 0 1px 1px darken($red, 15%);

    color: darken($red, 50%);
    text-shadow: 0 1px lighten($red, 5%);
  }
}

main.posts.view > header {

  h2 {
    margin: 2em 0;
    text-align: center;
    text-transform: uppercase;
    color: lighten($gray-blue, 5%);
  }

  nav {
    @include display(flex);
    @include justify-content(space-between);
    @include align-items(center);
    @include flex(1);
    padding: 0 1em 1em 1em;
    border-bottom: 1px solid lighten($gray-blue, 25%);
  }

}


main.posts.view > section:not(.preview) {
  @include flex-direction(column);
  @include align-items(center);
  @include justify-content(flex-start);

  & > section {
    @include display(flex);
    @include flex-direction(column);
    @include justify-content(center);
    @include align-items(center);
  }

  svg.tag.icon {
    width: 3em;
    margin: 3em 0 0 0;
    fill: lighten($gray-blue, 25%);
  }

  h3 {
    @include display(flex);
    @include align-items(center);
    color: lighten($gray-blue, 15%);
    font-size: 2em;
    margin: 0;
  }

  ul {
    max-width: 600px;
    width: 100%;
    margin: 1em 0;

    li {
      @include display(flex);
      @include align-items(center);
      font-size: 1.3em;
      font-weight: bold;
    }

  }
}

main.posts.view > section.preview {
  @include justify-content(flex-start);
  max-width: 800px;
  width: 100%;
  margin: 3em auto;
  padding: 0 2em;

  font-size: 1.3em;
  line-height: 1.6em;

  h1,h2,h3,h4,h5,h6 {
    font-weight: bolder;
  }

  ul, ol {
    padding-left: 1em;
  }

  ul {
    list-style-type: circle;
  }

  ol {
    list-style-type: decimal;
  }

  li {
    margin: 0.3em 0;
  }

  p {
    margin: 1.5em 0;
  }

  pre {
    font-size: 0.7em;
    background: lighten($gray-blue, 40%);
    padding: 0;

    header {
      background: lighten($gray-blue, 20%);
      padding: 0.3em 1em;
    }

    code {
      display: block;
      padding: 0.8em;
    }
  }
}