@import "src/assets/styles/responsive-base.scss";

mat-icon{
  user-select: none;
  cursor: pointer;
}

.setting-row{
  display: flex;
  align-items: center;
  max-width: 600px;
  margin-bottom: 20px;

  @include screen('phone'){
    .setting-title{
      flex-basis:0;
    }
  }

  #avatar-container{
    position: relative;    
    border-right: 16px solid transparent;
    cursor: pointer;

    mat-icon{
      position: absolute;
      bottom: 0;
      right: 0;
      z-index: 30;
    }    
    >app-avatar{
      width: 75px;
      height: 75px;
    }
  }  
}
.setting-info-col{
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  margin: 8px;
  
  >label{
    text-transform: uppercase;
    display: flex;
    align-items: center;
    padding: 10px 0 5px 0;
  }
  >span{
    max-width: 400px;
  }
}

#show-email-container{
  display: flex;
  align-items: center;
}
.show-button{
  margin-left: 10px;
}

:host {
  display: flex;
  height: 100%;

  > div {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;

    > div {
      position: absolute;
    }
  }
}
