as='Post.Header'

{

@include display(flex);
@include flex(0 auto);
@include align-items(center);
@include justify-content(center);
@include flex-direction(column);
@include transition(background-color 0.3s ease);

position: fixed;
top: 52px;
left: 0;
right: 0;
width: 100%;

@include background(linear-gradient(darken($bright-blue, 5%), $bright-blue));
background-size: cover;
background-position: center left;

border-bottom: 1px solid #E8E8E8;

color: lighten($bright-blue, 50%);

height: 200px;
min-height: 100px;

}

as='Post.Header'

> nav.actions {

top: 0;
font-weight: bold;

}

[as='Post.Header'].image > div.drop {

background-color: rgb(122, 199, 122);
opacity: 1;
z-index: 6;

}

[as='Post.Header'].image > div.title {

opacity: 0;

}

as='Post.Header'

> div.title > input {

visibility: hidden;
height: 1px;
padding: 0;

}

as='Post.Header'

> h2 {

@include display(flex);
@include flex(1);
font-size: 2.3em;
margin: 1em 0;
text-align: center;
color: lighten($gray-blue, 50%);

}

as='Post.Header'

> nav {

@include display(flex);
@include justify-content(space-between);
@include align-items(center);
@include flex(0 auto);
@include transition(opacity 0.2s);

z-index: 100;
width: 100%;
margin: 12px 0 0 0;
padding: 0 1em;
position: absolute;

&.hidden {
  opacity: 0;
  z-index: -1;
}

}

as='Post.Header'

> div.title {

@include display(flex);
@include flex(1);
@include flex-direction(column);
@include transition(opacity 0.2s linear);
@include justify-content(center);
text-align: center;
width: 100%;
z-index: 5;

& > p.browse {
  @include transition(color 0.3s);
  font-size: 0.7em;
  cursor: pointer;
  &:hover {
    color: rgb(114, 153, 204);
  }
}

svg.clear {
  @include transition(fill 0.3s);
  width: 30px;
  position: absolute;
  right: 1em;
  bottom: 1em;
  fill: #D8ABAB;
  cursor: pointer;
  &:hover {
    fill: #C23131;
  }
}

}

as='Post.Header'

a.title {

@include flex(0 auto);
@include transition(box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease);

font-size: 2.3em;
line-height: 1.4em;
cursor: pointer;
text-decoration: none;
color: inherit;
margin: 0 auto;

&:hover {
  color: $link-color;
}

}

as='Post.Header'
as='Editor.Save'

{

margin-right: 2em;
border-color: darken($green, 25%);
background-color: darken($green, 10%);

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

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

}

as='Post.Header'

div.drop {

@include transition(opacity 0.3s ease);
@include display(flex);
@include flex-direction(column);
@include align-items(center);
@include justify-content(center);
position: absolute;
opacity: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
font-size: 1em;
text-align: center;
margin: 0;

svg {
  width: 40px;
  fill: rgb(66, 152, 66);
}

p {
  color: rgb(66, 152, 66);
  text-shadow: 0 1px 0 rgb(143, 213, 143);
}

}

as='Post.Header'

div.progressbar {

position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;

& > span.progress {
  @include transition(width 0.3s ease-out);
  display: block;
  height: 100%;
  width: 0%;
  background: #5FFF6A;
}

}

as='Post.Header'

div.drop > div.status.error {

@include flex-direction(column);
@include align-items(center);
@include justify-content(center);
width: 100%;
height: 100%;

background: $red;
color: $dark-red-color;

&:not(.hidden) {
  @include display(flex);
}

svg {
  fill: rgb(89, 18, 18);
}

ul {
  color: $dark-red-color;
  text-shadow: 0 1px 0 #BD4141;
  font-weight: bolder;
}

button {
  @include transition(box-shadow 0.2s ease);
  border: 1px solid #8B0B0B;
  border-radius: 2px;
  box-shadow: inset 0 0px 1px 0 #D85D5D;
  padding: 6px 1em;

  &:hover {
    box-shadow: inset 0 0px 3px 0 #D85D5D;
  }

  &:active {
    box-shadow: inset 0 0px 2px 0 #813131;
  }
}

}

as='Post.Header'

div.publish.state {

@include transition(background-color 0.2s);
position: relative;
padding: 2px;
width: 10em;
height: 30px;
background-color: rgba(black, 0.2);
color: darken($bright-blue, 25%);
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: rgba(black, 0.5);

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

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

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

  label:last-child {
  }
}

}