$aside-section-padding: 28px 25px 12px 25px
$aside-section-padding-mobile: 24px 25px 10px 25px

.aside-section-wrapper
    display: flex
    flex: 1
    flex-direction: column
    // align-items: center
    width: 100%
    padding: $aside-section-padding
    background-color: $color-bright
    margin-bottom: 30px
    overflow: auto

    &--transparent
        background-color: unset
    &--collapse
        padding: unset

.add-entity-entries

    & &__entry
        margin-bottom: 10px

    & &__label
        font-size: 1.2em
        margin-bottom: 8px
        
    & &__button
        line-height: unset;
        height: unset;
        padding: 4px 15px;
        margin: 5px;        

.action-panel
    margin-bottom: 20px

    & &__label
        // font-size: 1.2em
        font-weight: bold
        margin-bottom: 12px

    & &__button-group
        display: flex
        justify-content: space-between
        &--center
            justify-content: center

    & &__button
        line-height: unset
        height: unset
        padding: 4px 15px
        margin: 0 5px
        // width: 100%

.mark-panel
    margin-bottom: 20px 

    & &__status
        font-weight: bold

    & &__rating-star
        position: relative
        top: 2px

    & &__actions
        float: right
        & form
            display: inline
    
    & &__time
        color: $color-light 
        margin-bottom: 10px

    & &__content

    & &__clear
        @include clear

.review-panel
    & &__label
        font-weight: bold
    & &__actions
        float: right
    & &__time
        color: $color-light
        margin-bottom: 10px

    & &__review-title
        display: block
        margin-bottom: 15px
        font-weight: bold

    & &__clear
        @include clear

.user-profile
    & &__header
        display: flex
        align-items: flex-start
        margin-bottom: 15px

    & &__avatar
        width: 72px

    & &__username
        font-size: large
        margin-left: 10px
        margin-bottom: 0

    & &__bio

    & &__report-link
        color: $color-light

.user-relation
    & &__label
        display: inline-block
        font-size: large
        margin-bottom: 10px

    & &__more-link
        margin-left: 5px

    & &__related-user-list
        display: flex
        justify-content: flex-start
        &:last-of-type
            margin-bottom: 0

    & &__related-user
        flex-basis: 25%
        padding: 0px 3px
        text-align: center
        display: inline-block
        overflow: hidden
        & > a
            &:hover
                color: $color-secondary
    
    & &__related-user-avatar
        background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")
        width: 48px
        height: 48px
        @media (min-width: $small-devices) and (max-width: $large-devices)
            height: unset
            width: 60%
            max-width: 96px
            

    & &__related-user-name
        color: inherit
        overflow: hidden
        text-overflow: ellipsis
        // display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;        

$panel-padding : 0

.report-panel
    & &__label
        display: inline-block
        margin-bottom: 10px

    & &__body
        padding-left: $panel-padding

    & &__report-list
    
    & &__report
        margin: 2px 0
    
    & &__user-link
        margin: 0 2px

    & &__all-link
        margin-left: 5px

.import-panel
    overflow-x: hidden

    & &__label
        display: inline-block
        margin-bottom: 10px

    & &__body
        padding-left: $panel-padding
        border: 2px dashed #00a1cc
        padding: 6px 9px
        form
            margin: 0  

        @media (max-width: $large-devices)
            border: unset
            padding-left: 0

    & &__help
        background-color: $color-quinary
        border-radius: 100000px
        display: inline-block
        width: 16px
        height: 16px
        text-align: center
        font-size: 12px
        cursor: help
    
    & &__checkbox
        display: inline-block
        margin-right: 10px
        label
            display: inline
        input[type="checkbox"]
            margin: 0
            position: relative
            top: 2px
        &--last
            margin-right: 0

    & &__file-input
        margin-top: 10px

    & &__button
        line-height: unset
        height: unset
        padding: 4px 15px

    & &__progress
        padding-top: 10px
        // padding-top: 4px
        &:not(:first-child)
            border-top: $color-tertiary 1px dashed
        label
            display: inline
        progress
            background-color: $color-quaternary
            border-radius: 0
            height: 10px
            width: 54%

        progress::-webkit-progress-bar
            background-color: $color-quaternary

        progress::-webkit-progress-value
            background-color: $color-primary

        progress::-moz-progress-bar
            background-color: $color-quaternary

    & &__last-task
        &:not(:first-child)
            padding-top: 4px
            border-top: $color-tertiary 1px dashed
        .index:not(:last-of-type)
            margin-right: 8px
    
    & &__fail-urls
        margin-top: 10px
        li
            word-break: break-all
        ul
            // padding: 4px
            max-height: 100px
            overflow-y: auto
    

.relation-dropdown
    & &__button
        display: none

.entity-card
    display: flex
    margin-bottom: 10px
    flex-direction: column
    &--horizontal
        flex-direction: row

    & &__img
        height: 150px

    & &__rating-star
        position: relative
        top: 4px
        left: -3px

    & &__rating-score
        position: relative
        top: 1px
        margin-left: 2px

    & &__title
        margin-bottom: 10px
        margin-top: 5px
    
    & &__info-wrapper
        &--horizontal
            margin-left: 20px
    
    & &__img-wrapper
        flex-basis: 100px
        

// Small devices (landscape phones, 576px and up)
@media (max-width: $small-devices)
    .add-entity-entries
        display: block !important
        & &__button
            width: 100%
            margin: 5px 0 5px 0;

    .aside-section-wrapper
        &:first-child
            margin-right: 0 !important
            margin-bottom: 0 !important
        &--singular:first-child
            margin-bottom: 20px !important
        // &--no-padding
        //     padding: $aside-section-padding-mobile !important
        //     margin-top: 0 !important
    .action-panel
        flex-direction: column !important

    .entity-card
        &--horizontal
            flex-direction: column !important
        // flex-direction: column !important
        & &__info-wrapper
            margin-left: 10px !important
            &--horizontal
                margin-left: 0 !important
// Medium devices (tablets, 768px and up)
@media (max-width: $medium-devices)
	pass
// Large devices (desktops, 992px and up)
@media (max-width: $large-devices)
    .add-entity-entries
        display: flex
        justify-content: space-around

    .aside-section-wrapper
        padding: $aside-section-padding-mobile
            
        margin-top: 20px
        // &:not(:first-child)
        &:not(:last-child)
            margin-right: 20px         
        &--collapse
            padding: $aside-section-padding-mobile !important
            margin-top: 0
            margin-bottom: 0
            &:first-child
                margin-right: 0
        &--no-margin
            margin: 0          
        
    .action-panel
        flex-direction: row
        & &__button-group
            justify-content: space-evenly

    .relation-dropdown
        margin-bottom: 20px
        & &__button
            padding-bottom: 10px
            background-color: $color-bright
            width: 100%
            display: flex
            justify-content: center
            align-items: center
            cursor: pointer
            transition: transform 0.3s
            &:focus
                background-color: red

        & &__button > .icon-arrow
            transition: transform 0.3s

        & &__button:hover > .icon-arrow > svg
            fill: $color-primary

        & &__button > .icon-arrow--expand
            transform: rotate(-180deg)
                
        & &__button + &__body--expand
            max-height: 2000px
            transition: max-height 1s ease-in

        & &__body
            background-color: $color-bright
            max-height: 0
            transition: max-height 1s ease-out
            overflow: hidden               

    .entity-card
        flex-direction: row
        & &__info-wrapper
            margin-left: 30px
// Extra large devices (large desktops, 1200px and up)
@media (max-width: $x-large-devices)
    pass