// Profile Styling
// Profile (Header)
.profile-header {
    margin-bottom: $line-height-computed;
    margin-top: $line-height-computed;
    .profile-name {
        margin: 0;
        @media (min-width: $screen-sm-min) {
            margin-bottom: $line-height-computed/4;
        }
    }
    .site-name {
        margin-bottom: ($line-height-computed/4);
        @media (min-width: $screen-sm-min) {
            margin-bottom: $line-height-computed;
        }

        .btn {
          .icon {
            display: none;
          }
        }
    }
    .edit-church-site {
        padding-right: 20px;
        .icon {
            display: inline-block;
            font-size: .6em;
            fill: $gray;
            @include transition(all .1s ease-in);
            @include opacity(0);
        }
        &:hover {
            .icon {
                @include opacity(1);
            }
        }
    }
}

.change-profile-pic {
  height: 300px;
}

.profile-pic {
    @extend .absolute-cover;
    display: block;
    overflow: hidden;
    cursor: pointer;
    margin: 0;


    .change-photo {
        display: block;
        position: absolute;
        bottom: -35px;
        height: 30px;
        line-height: 30px;
        left: -1px;
        right: -1px;
        background: $brand-primary;
        text-align: center;
        color: white;
        font-weight: normal;
        @include transition(all .1s ease-in);
        @include opacity(.8);
    }
    &:hover {
        .change-photo {
            bottom: 0;
        }
    }
}

.profile-background-image {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  &.profile-image-default-background {
    background-color: $gray-lighter;
    background-image: url("//crossroads-media.imgix.net/images/avatar.svg");
  }
}

.card-img-wrapper,
.media-card-profile {
  .profile-background-image {
    border-radius: 50%;
  }
}

// Profile (Household section of Personal tab
.profile-card {
    .thumbnail {
        margin-bottom: 0px;
        img {
            max-width: 50px;
            @include opacity(.1); // temporary solution until we find a long term solution for icons
        }
    }
}

.household-cards {
    border-bottom: 1px solid darken($gray-lighter, 5%);
    margin-bottom: $line-height-computed;
}

.address-panel-heading {
    position: relative;
    cursor: pointer;
    .icon {
        margin: 0 5px -2px 0;
    }
    .icon-pencil4 {
        fill: $gray-light;
    }
    &:hover {
        .icon-pencil4 {
            fill: black;
        }
    }
}

.address-show {
    position: absolute;
    top: 11px;
    right: 10px;
}

.address-panel-body {
    padding: 0;
    .list-group-item {
        border-left: 0px;
        border-right: 0px;
    }
    .list-group-item:first-child {
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
    }
    .list-group-item:last-child {
        border-bottom: 0px;
        border-left: 0px;
        border-right: 0px;
    }
}

// Profile (Skills Tab)
.current-skills-list {
    .label {
        padding: .5em .5em .6em 1.9em;
        cursor: default;
        background: $brand-secondary;
        line-height: 3;
        vertical-align: middle;
        a {
            vertical-align: middle;
        }
        .icon {
            @include transition(all .2s ease-in);
            @include opacity(0);
            fill: #fff;
            padding-top: 4px;
        }
        &:hover {
            color: #fff;
            a {
                .icon {
                    @include opacity(1);
                }
            }
        }
    }
}

.add-skill {
    border-top: 1px solid $legend-border-color;
    padding-top: 20px;
    margin-top: 10px;
}

.add-skills {
    border-top: 1px solid $legend-border-color;
    padding-top: 20px;
    .h4 {
        clear: both;
    }
    .cat-skill-group {
        //
        padding: 0 0 20px 0;
        @media (min-width: $screen-sm-min) {
            @include content-columns(3);
        }
        .checkbox {
            margin-top: 0px;
            clear: both;
            margin-left: $grid-gutter-width/2;
            @media (min-width: $screen-sm-min) {
                margin-left: 0;
            }
        }
    }
}

.add-skill {
    border-top: 1px solid $legend-border-color;
    padding-top: 20px;
    margin-top: 10px;
}

.skill-group {
    margin-bottom: 20px;
    .cat-skill-group {
        //
        padding: 0 0 20px 0;
        @media (min-width: $screen-sm-min) {
            @include content-columns(3);
        }
        .checkbox {
            margin-top: 0px;
            clear: both;
            margin-left: $grid-gutter-width/2;
            @media (min-width: $screen-sm-min) {
                margin-left: 0;
            }
        }
    }
}

// Edit Household Modals
.household-choice-modal {
    a:hover {
        text-decoration: none;
        .thumbnail {
            background: $gray-lighter;
            .icon {
                background: white;
                border-radius: 50%;
                position: absolute;
            }
        }
    }
    .close-modal {
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        color: black;
    }
}

.profile-ethnicity {
  padding: 0 0 1px 0;
  @media (min-width: $screen-sm-min) {
      @include content-columns(2);
  }
  .checkbox {
      margin-top: 0px;
      clear: both;
      @media (min-width: $screen-sm-min) {
          margin-left: 0;
      }
  }
}