/* -----------------------------------------------------------------
    - Single post
----------------------------------------------------------------- */ 

.header-post {
  margin-top: rem(16px);
  text-align: center;
  
  @media only screen and (max-width: $small) {
    margin-top: rem(16px);
  }
  
  .title {
	font-size: rem(40px);
	margin-bottom: rem(24px);
	
	@media only screen and (max-width: $large) {
		font-size: rem(36px);
		margin-bottom: rem(18px);
	}
    
	@media only screen and (max-width: $medium) {
		font-size: rem(32px);
	}

	@media only screen and (max-width: $small) {
	  font-size: rem(28px);
	  margin-bottom: rem(16px);
	}
  }
  
  &__image-wrap {
    height: rem(400px);
	margin-left: rem(-30px);
	margin-right: rem(-30px);
	margin-bottom: rem(40px);
	
	@media only screen and (max-width: $small) {
	  height: rem(240px);
	  margin-left: rem(-20px);
	  margin-right: rem(-20px);
	  margin-bottom: rem(24px);
	}
  }
}

.caption-post {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: rem(32px);
  width: 80%;
  
  @media only screen and (max-width: $large) {
    width: 100%;
  }
  
  @media only screen and (max-width: $small) {
    margin-bottom: rem(19px);
  }
}

.gallery-post {
  @include flex($wrap: wrap);
  margin-left: rem(-16px);
  margin-right: rem(-16px);
  
  @media only screen and (max-width: $small) {
    margin-left: 0;
    margin-right: 0;
  }
  
  &__item {
    flex: calc(50% - 32px);
	height: auto;
	max-height: 80vw;
	margin-left: rem(16px);
	margin-right: rem(16px);
    width: calc(50% - 32px);
	
	@media only screen and (max-width: $small) {
	  flex: 100%;
	  margin-left: 0;
	  margin-right: 0;
	  margin-bottom: rem(16px);
      width: 100%;
	}
  }
  
  &__caption {
    font-size: rem(13px);
	font-style: italic;
	padding: rem(16px) rem(16px) rem(32px);
	text-align: center;
	width: 100%;
	
	@media only screen and (max-width: $small) {
	  padding: 0 0 rem(16px);
	}
	
	a {
	  color: var(--color-accent);
	}
  }
}

.footer-post {
  @include flex($align: center, $justify: center, $wrap: wrap);
  margin-bottom: rem(32px);
  margin-top: rem(32px);
  padding-top: rem(32px);
  position: relative;
  
  @media only screen and (max-width: $small) {
    margin-bottom: rem(16px);
    margin-top: rem(16px);
  }
  
  &::before {
    content: '';
	background-color: var(--color-border);
	height: rem(1px);
	margin: auto;
	@include position(absolute, $top: 0, $left: 0, $right: 0);
	max-width: rem(100px);
	width: 15%;
  }
  
  &__share {
    @include flex($align: baseline);
	font-size: rem(13px);
	color: var(--color-paragraph);
	margin: 0 rem(17px);

	@media only screen and (max-width: $small) {
	  margin: 0 rem(6px);
	}

	&:hover {
	  color: var(--color-accent);
	  text-decoration: none;
	}
	
	.font-icon {
	  margin-right: rem(11px);
	}
	
	span {
	  @media only screen and (max-width: $small) {
	    display: none;
	  }
	}
  }
}

// Comments
.comment-box {
  @include flex($direction: column);
  
  & & {
	margin-left: rem(48px);
	
	@media only screen and (max-width: $small) {
	  margin-left: rem(19px);
	}
  }

  &__inner {
	border-radius: var(--radius-16);
	box-shadow: var(--box-shadow-50);
	@include flex();
	margin-bottom: rem(20px);
    padding: rem(20px) rem(20px) rem(16px) rem(20px);
	
	@media only screen and (max-width: $small) {
	  border-radius: var(--radius-12);
	  box-shadow: var(--box-shadow-30);
	  flex-direction: column;
	  padding: rem(16px);
	  margin-bottom: rem(16px);
	}
  }
  
  &__body {
	flex: 1;
	padding-left: rem(16px);
	
	@media only screen and (max-width: $small) {
	  margin-top: rem(12px);
	  padding-left: rem(0);
	}
	
	p {
	  margin-bottom: rem(11px);
	  
	  @media only screen and (max-width: $small) {
	    margin-bottom: rem(8px);
	  }
	}
	
	.emoji {
	  margin: 0 rem(5px);
	  vertical-align: bottom;
	  
	  @media only screen and (max-width: $small) {
	    margin: 0 rem(2px);
		height: rem(17px);
		width: rem(17px);
	  }
	}
  }
  
  &__details {
    @include flex($justify: space-between);
    font-size: rem(18px);
	margin-top: rem(8px);
    margin-bottom: rem(8px);
	
	@media only screen and (max-width: $small) {
      font-size: rem(15px);
	  flex-direction: column;
	  margin-top: 0;
    }
	
	a {
	  text-decoration: none;
	}
  }
  
  &__details-date {
    font-size: rem(12px);
	font-weight: 400;
	opacity: .5;
	
	@media only screen and (max-width: $small) {
	  font-size: rem(12px);
	  margin-top: rem(5px);
	}
  }
  
  .avatar {
    margin-right: rem(16px);
	flex-shrink: 0;
  }
  
  &__footer {
	@include inline-flex();
    list-style: none;
	margin: 0;
	padding: 0;
	
	li {
	  cursor: pointer;
	  font-weight: 400;
	  margin-right: rem(32px);
	  
	  @media only screen and (max-width: $small) {
	    margin-right: rem(16px);
	  }
	  
	  &:last-child {
		margin-right: 0;
      }	  
	}
	
	.font-icon {
	  font-size: rem(16px);
	  vertical-align: text-bottom;
	  
	  @media only screen and (max-width: $small) {
	    font-size: rem(14px);
	  }
	}	
  }
}

// Comment form
.comment-form {
  margin-top: rem(16px);
  position: relative;
  
  .textarea {
	padding: rem(24px) rem(72px);
	max-height: rem(200px);
	overflow: hidden!important;
	
	@media only screen and (max-width: $small) {
	  padding: rem(14px) rem(52px);
	}
  }
  
  .btn {
    $size-btn: rem(48px);
    height: $size-btn;
    margin-bottom: auto;
    margin-top: auto;
	padding: 0;
	@include position(absolute, $top: 0, $bottom: 0);
    width: $size-btn;
	
	@media only screen and (max-width: $small) {
	  height: #{$size-btn / 1.4};
	  width: #{$size-btn / 1.4};
	}
	
	i {
	  background: var(--color-gradient-text);
	  -webkit-background-clip: text;
			  background-clip: text;
	  -webkit-text-fill-color: transparent;
	  -webkit-text-decoration-skip: objects;
	  cursor: pointer;
	  font-size: rem(16px);
	  margin: 0;

	  @media only screen and (max-width: $small) {
		font-size: rem(16px);
	  }
	}
  }
  
  .btn-submit {
    right: 0;
	margin-right: rem(12px);

	@media only screen and (max-width: $small) {
		margin-right: rem(10px);
	}
  }
  
  .btn-emoji {
    line-height: 0;
  }

  .dropdown {
	height: rem(19px);
	line-height: 1.2;
    margin-top: auto;
    margin-bottom: auto;
	margin-left: rem(12px);
	@include position(absolute, $top: 0, $bottom: 0);
	
	&-menu {
	  background: var(--color-surface-2);
	  border: 1px solid var(--color-border);
	  border-radius: var(--radius-16);
	  box-shadow: var(--box-shadow-50);
	  margin-left: rem(-16px);
	  min-width: rem(239px);
	  max-width: rem(239px);

	  &::before {
		content: '';
        height: 0; 
        border-left: rem(6px) solid transparent;
        border-right: rem(6px) solid transparent;
        border-top: rem(6px) solid var(--color-surface-2);
		@include position(absolute, $left: rem(16px), $bottom: rem(-6px));
		width: 0;
	  }
	}

	@media only screen and (max-width: $small) {
		margin-left: rem(10px);
	}
  }
  

}

// Emoji
.emoji-wrap {
  @include flex($justify: space-around, $wrap: wrap);
  padding: rem(6px) rem(13px) rem(3px);
  
  .emoji {
    cursor: pointer;
	border-radius: rem(3px);
	margin: rem(2px);
    padding: rem(3px);
    
    &:hover {
	  background-color: var(--color-bg);
	}	
  }
}

// Scroll Indicator
.scroll-line{
  height: rem(3px);
  @include position(fixed, $top: 0);
  width: 0;
  z-index: 3;
}

// Social auth
.social-auth {
  color: var(--color-heading);
  list-style: none;
  padding: 0;
  margin-top: rem(16px);
  
  @media only screen and (max-width: $small) {
    font-size: rem(14px);
  }
  
  &__item {
    @include inline-flex();
	margin-right: rem(6px);
  }
  
  &__link {
    color: var(--color-heading);
	
	&:hover {
	  color: var(--color-heading);
	  opacity: .7;
	}
  }
  
  .font-icon {
	border-radius: 50%;
	font-size: rem(12px);
	padding: rem(6px);
	
	@media only screen and (max-width: $small) {
	  font-size: rem(11px);
	}
  }
  
  .icon-facebook {
    background-color: #3B5998;
  }
  
  .icon-twitter {
    background-color: #55ACEE;
  }
  
  .icon-dribbble {
    background-color: #F26798;
  }
  
  .icon-behance {
    background-color: #4176FA;
  }
}