#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;
  }
}

}