@use "./../Profile/view.scss";

.wp-block-govpack-profile-self {

    $block : &;


    &__contacts ul,
	&__comms ul,
    &__container {
        display: flex;  
        flex-direction: row;
        width:100%;
    }

    .inline-list{
		margin: 0;
		padding: 0;
		list-style: none;

		> li {
			float: left;
		}
	}

    &__container {

        $element : &;

        flex-direction: column;

        &--right {
            flex-direction: row-reverse;

            #{$block}__avatar{
                margin-right:0;
                margin-left:1rem;
            }
        }

        &--left {
            flex-direction: row;
        }

        &--align-center{
            margin-left: auto;
            margin-right: auto;

            #{$block}__social_group, #{$block}__comms{
                justify-content: center;
            }

            .wp-block-govpack-profile__line {
                text-align: center;
            }

            #{$block}__comms-other{

                dt,dd {
                    float: none;
                    padding: 0;
                }
            }
        }

        &--align-right{

            #{$block}__social_group, #{$block}__comms{
                justify-content: flex-end;
            }

            .wp-block-govpack-profile__line {
                text-align: right;
            }

            #{$block}__comms-other{

                dd {
                    float: right;                    
                }
            }

        }

    }

	&__comms{
		display: flex;
		flex-wrap: wrap;

		&-icons{
			width: auto !important; //todo rafctor
		}
	}

	&__comms-other{
		width: 100%;
		margin-top:0;
		overflow: auto;
		
		dt,dd{
			font-size: 0.8rem;
			float:left;
			margin: 0;
		}

		dt{
			clear:left;           

			&:after{
				display:inline-block;
				content: ": ";
				margin-right:.5em;
			}
		}

        dd{
            .alignright & {
                float: right;
            }
        }
        
	}

	&__label{
		margin-right: 1rem;
	}

	&__contact {
		
        $elm : &;
		

        &__link,
        a{
            display:block;
            text-decoration: none;
        }

        &__icon{
            display:inline-block;
            max-width:20px;
            max-height:20px;
            width:auto;
            height:auto;
    
            svg{
                max-width:20px;
                max-height:20px;
                display:block;
            }
        }

        &__label{
            display:inline-block;
        }

        &--hide-label{
            #{$elm}__label{
                display:none;
            }
        }

		&--address{
			width:100%;
		}
    }

	&__social_group{
		display: flex;

        .aligncenter &{
            justify-content: center;
        }
	}

	.editor-styles-wrapper &__contacts,
	.editor-styles-wrapper &__comms,
	.editor-styles-wrapper &__social,
	&__social,
	&__comms,
    &__contacts{

        ul{
            margin:0;
            padding:0;
            list-style: none;
        }

        ul li{
            margin-right:.5rem;

            &:last-of-type{
                margin-right:0;
            }
        }
    }

    &__avatar {

        margin-right:1rem;
        width:50%;

        figure {
            margin: 0;
            overflow:hidden;

            img{
                display:block;
                width:100%;
            }
        }
    }

    &__info{
        width:50%;
        display: flex;
        flex-direction: column;
        margin-left:1rem;
        justify-content: center;

        h3{
            margin-top:0;
        }

        &:only-child{
            width:100%;
            flex-grow: 1;
            margin-left:0;
        }
    }

    &__line{
        padding-top:.5rem;
        padding-bottom:.5rem;
        border-bottom: 1px solid;

        &:first-of-type{
            padding-top:0rem;
        }
    }

    &.is-style-boxed_centered,
    &.is-style-center{

        #{$block}__avatar {
            margin-left:0;
            margin-right:0;
            margin-bottom:1rem;
        }
        #{$block}__info,
        #{$block}__container {
            flex-direction: column;
            width:100%;
            align-items: center;
            align-content: center;
        }

        #{$block}__line{
            width:100%;
            text-align:center;
        }

        #{$block}__contacts ul{
            justify-content: center;
        }
    }

    &.is-style-boxed_centered,
    &.is-style-boxed{
        padding:2rem;
        border:1px solid rgba(0,0,0,0.04);
        background-color:rgba(0,0,0,0.02);
        margin-top: 0 !important;
    }
}