h1 {
  margin-bottom: 48px;
}

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

  #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;
  }
  > span {
    max-width: 400px;
  }
}

.slider-col {
  flex: 1 1 0;
  /* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
  mat-slider {
    width: 100%;
  }
}

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

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

    > div {
      position: absolute;
    }
  }
}
