Lambda-School-Labs/designhub-fe

@import '../../common/SASS/palette';
@import '../../common/SASS/mixins';

.Settings {
  margin-bottom: 2%;
  background: $bg2;
  width: 98%;
  border-radius: 10px;
  text-align: center;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  color: $text;
  box-sizing: border-box;

  @include themify($themes) {
    color: themed('text');
    background-color: themed('bg2');
  }

  @media screen and (max-width: 700px) {
    display: flex;
    flex-flow: column nowrap;
  }
  .settings-left-column {
    align-self: flex-start;
    width: 12%;
    margin: 2% 0;
    min-width: 10rem;
    height: 100%;

    @media screen and (max-width: 700px) {
      align-self: center;
      margin-top: 20px;

      img {
        margin-bottom: 10px;
      }
    }
    .settings-logout {
      color: $alert;
    }

    h4 {
      letter-spacing: 0.11em;
      color: $link;
      font-size: 14px;
      font-weight: normal;
      line-height: 16px;
      margin-top: 40px;
      cursor: pointer;

      &:hover {
        color: $text;

        @include themify($themes) {
          color: themed('text');
        }
      }

      @media screen and (max-width: 700px) {
        margin-top: 15px;
      }
    }

    a {
      text-decoration: none;

      &.active h4 {
        color: $text;

        @include themify($themes) {
          color: themed('text');
        }
      }
    }
  }

  .settings-right-column {
    // border: 1px solid white;
    border-left: 3px solid $bg;
    text-align: left;
    padding: 0 60px;
    width: 85%;
    @include themify($themes) {
      border-left: 3px solid themed('bg');
    }
  }

  img {
    border-radius: 50%;
    width: 130px;
    min-width: 130px;
    object-fit: cover;
    height: 130px;
  }

  .full-name {
    margin: 20px 0;
  }
}

.account-form-container {
  .account-form {
    // border: 1px solid red;
    @include onboard-form;
    margin: 0;
    width: 100%;

    button {
      @include primary-btn;
      margin: 30px 0;

      &.formSuccess-btn {
        background: green;
      }
      @media screen and (max-width: 700px) {
        width: 100%;
      }
    }
  }
}

@media (max-width: 1024px) {}