//Singl article

.single-article
    display: flex
    justify-content: center
    .article__info
        margin-bottom: 40px
    .tags
        margin-bottom: 60px	

    ul
        li
            color: $orange
        li::before
            color $orange
            content: '\2500';
            font-size: 1em;
            padding-right: 1.225em;
            position: relative;
            top: 0em;

.article-sidebar
    width: 10%
    background-color: $white
    margin-right: 40px
    margin-top: 10px
    border-top: 3px solid $black
    // TODO: implement sidebar quotes
    &.quotes
        visibility: hidden

pre
    padding-left: 40px
    code
      font-family: "Concourse T3"



blockquote
    color: $gray
    font-family: "Concourse T3"
    font-size: 1.5rem
    font-style: italic
    line-height: 28px
    text-align: left
    &:nth-child(1)
      padding-top: 20%
    &:nth-child(2)
      padding-top: 84%
    &:nth-child(3)
      padding-top: 75%		

.article-content
	width: 100%

.single-article__title
	color: $black
	font-family: "Concourse T3"
	font-size: 53px
	font-weight: 700
	line-height: 58px
	margin-bottom: 30px

.single-article__description
	color: $black
	font-weight: 700
	margin-bottom: 40px

.single-article__text

    @include text-link

    color: $black
    font-family: "Concourse T3"
    font-size: 23px
    font-weight: 400
    margin-bottom: 60px
    em
        border-bottom: 2px solid $orange-2
        box-shadow: inset 0 -4px 0 $orange-2
        -webkit-box-shadow: inset 0 -4px 0 $orange-2
    blockquote
        font-size: 0.9em
        background-color: $orange-light
        font-style: normal
        border-left: 5px solid $orange
        padding-top: 1rem
        padding-bottom: 15px
        padding-left: 25px
        margin-bottom: 1rem
        padding-right: 10px
        h1,h2,h3,h4
            color: $black-yellow
        p, pre
            color: $black-3

    p
        margin-bottom: 20px
        strong
          color: $black	


//Comments
.comments
	width: 100%
	background-color: $comments-bg
	padding: 50px 0			
	.comments-wrap
		width: 60%
		padding-left: 1%
		margin: 0 auto

	.comment__responses__form
		width: 100%
		position: relative
		padding-bottom: 20px
		margin-bottom: 40px
		border-bottom: 1px dotted $border-color
		.user-avatar
			width: 34px
			position: absolute
			left: 10px
			top: 17px
			height: 34px
			border-radius: 50%
			overflow: hidden
			img
				max-width: 100%
		textarea
			width: 100%
			height: 64px
			resize: none
			border: 1px solid #f0f0f0
			background-color: $white
			padding-left: 50px
			font-size: 16px
			color: $black
			box-sizing: border-box
			margin-bottom: 50px

.comment__responses__title,
.count-comments
	color: $black
	font-family: "Concourse T3"
	font-size: 20px
	font-weight: 700
	line-height: 30px
	margin-bottom: 10px

.sort-comments
	display: flex
	color: $black
	font-family: "Concourse T3"
	font-size: 16px
	font-weight: 400
	line-height: 30px
	select
		border: 1px solid #f0f0f0
		background-color: $white
		padding: 4px 10px
.responses__form__info
	display: flex
	justify-content: space-between
	align-items: center
.sort__text
	margin-right: 10px

.comment__item
	margin-bottom: 50px
	&.border--active
		border-left: 3px solid $orange
.comment__title
	background-color: $orange
	padding: 5px 12px
	color: $black-3
	font-family: "Concourse T3"
	font-size: 17px
	font-weight: 900

.reply--comment
	padding-left: 57px
	border: none
	.comment__title
		background-color: $light-orange	

.comment__text
	color: $black
	font-family: "Concourse T3"
	font-size: 17px
	font-weight: 400
	line-height: 26px
	padding-bottom: 30px

.comment__content
	padding: 20px 0 30px 15px
.comment__control 
	display: flex
	font-size: 15px

	a
		display: inline-block
		margin-right: 5px
		color: $blue-2
	.date
		color: $gray