@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;
  gap: 20px;

  @include screen('phone') {
    .setting-button-col{
      align-self: flex-end;
    }

    #avatar-container{
      align-self: center;
    }
  }

  .name-input{
    word-break: break-all;
  }

  #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;

  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;
    }
  }
}

.delete-button {
  margin-left: 8px;
}
