#TagsPopup > h2 {
  text-align: center;
}

#TagsPopup > ul > li {
  padding: 2% 5%;
  cursor: pointer;

  @include display(flex);
  @include align-items(center);
}

#TagsPopup > ul > li > p {
  @include flex(1);
  font-size: 1.3em;
}

#TagsPopup > ul > li > div.stats {
  @include display(flex);
  @include flex-direction(column);
  @include flex(0 auto);
  
  font-size: 0.9em;
}

#TagsPopup > ul > li:hover {
  background-color: rgba($gray-blue, 0.2);
}

#PostEditContent > div.tags {
  color: $gray-blue;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}

[as='Popup'].tags > form {
  @include display(flex);
  @include flex-direction(column);
}

[as='Popup'].tags > form > input {
  border: 1px solid $gray-blue;
  margin: 1em 1em 0 1em;
  font-size: 1.2em;
  line-height: 1.2em;
}

[as='Popup'].tags > form > h2 {
  text-align: center;
  margin: 8px 0 0 0;
}

[as='Popup'].tags > form > p.message {
  margin: 0 0 1em 0;
  padding: 0 2em;
  text-align: center;
  font-size: 0.8em;
  color: $gray-blue;
}

[as='Popup'].tags > ul.tags > li.empty {
  text-align: center;
  font-size: 1.2em;
  margin: 1em 0;
  color: $gray-blue;
}

[as='Popup'].tags > ul.tags > li.tag {
  @include display(flex);
  margin: 0;
  cursor: pointer;

  input {
    visibility: hidden;
  }

  label {
    @include flex(1);
    padding: 1em;
    cursor: inherit;
  }
  
  input:checked + label {
    font-weight: bold;
  }

  &:hover, &:focus {
    outline: none;
    background-color: $light-blue;
  }
}

body.tags header > form {
  @include display(flex);
  @include align-items(flex-start);
  @include justify-content(center);
  @include flex(1);

  margin: 5em auto 2em auto;
  width: 100%;
  max-width: 500px;
  margin: 5em auto 0 auto;

  div.fieldset {
    @include display(flex);
    @include flex-direction(column);
    width: 100%;
  }

  input {
    @include flex(1);
    borde-radius: 2px 2px 0 0;
    border: 1px solid lighten($gray-blue, 25%);
    font-family: inherit;
    font-size: inherit;
  }

  div.fieldset, ul.errors {
    @include flex(1);
    max-width: 500px;
    width: 100%;
    margin: 0 1em 0 0;
    input {
      width: 100%;
    }
  }

  button {
    @include flex(0 0 auto);
    font-weight: bold;
    color: darken($green, 25%);
    text-decoration: none;
    background-color: $green;
    box-shadow: inset 0 1px 0 0 transparent;

    &:hover {
      color: lighten($green, 35%);
      background-color: $green;
      box-shadow: inset 0 1px 0 0 lighten($green, 15%);
    }

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

  div.fieldset.errors {

    input {
      border: 1px solid darken($red, 5%);
      border-radius: 2px 2px 0 0;
    }

    input + ul.errors {
      font-size: 0.8em;
      margin: 0;
      padding: 0 1em;
      background-color: lighten($red, 5%);
      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%);

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

      li {
        @include justify-content(center);
      }
    }
  }
}

body.tags ol.tags {
  width: 100%;
  max-width: 500px;
  margin: 2em auto;

  li {
    @include display(flex);
    @include align-items(stretch);
    @include transition(border-left 0.2s);

    margin: 3em 0;
    padding: 0.5em 1em;
    border-left: 3px solid transparent;

    & > div {
      @include flex(1);
      margin-right: 1em;
    }

    &:hover {
      border-color: lighten($navy-blue, 35%);
    }

    h3 {
      font-weight: bolder;
      margin: 0;
      font-size: 1.3em;
    }

    p {
      margin: 0;
    }

    form {
      @include flex(0 auto);
      @include display(flex);
      @include flex-direction(column);
      @include justify-content(flex-start);
    }

    button {
      margin-top: 2px;
      border-color: $red;
      font-weight: bold;
      color: darken($red, 25%);
      background-color: lighten($red, 15%);

      &:hover:not(:active) {
        background-color: lighten($red, 15%);
        color: lighten($red, 50%);
      }

      &:active {
        background-color: lighten($red, 15%);
        text-shadow: 0 1px lighten($red, 25%);
        box-shadow: inset 0 1px 2px 0 darken($red, 5%), 0 1px 1px transparent;
      }
    }
  }
}

#TagsDestroy button {
  margin: 1em 0;
  font-size: 1em;
  border-color: $red;
  color: $red;
  font-weight: bold;
  background-color: lighten($red, 15%);
  text-shadow: 0 1px lighten($red, 25%);

  &:hover:not(:active) {
    color: darken($red, 25%);
  }

  &:active {
    background-color: lighten($red, 15%);
    text-shadow: 0 1px lighten($red, 25%);
    color: darken($red, 25%);
    box-shadow: inset 0 1px 2px 0 darken($red, 5%), 0 1px 1px transparent;
  }
}


#TagsDestroy header {
  margin: 5em 0 0 0;
  @include display(flex);
  @include flex-direction(column);
  @include align-items(center);

  h2 {
    font-size: 2em;
    font-weight: bolder;
    margin: 0;
    svg {
      width: 0.8em;
    }
  }

  form {
    margin: 1em 0;
  }
}

#TagsDestroy > section {
  @include flex(1);
  @include display(flex);
  @include flex-direction(column);
  @include align-items(center);
  margin: 5em 0;

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

  ul.tags {
    @include display(flex);
    @include flex-direction(column);
    font-weight: bolder;
    margin: 1em 0;

    li {
      @include display(flex);
      @include align-items(center);
    }

    label {
      margin: 0 1em;
      cursor: pointer;
    }
  }
}