@import 'cropperjs/dist/cropper.css';

.settings {
  max-width: 1000px;
  display: flex;
  flex-direction: row;
  padding: 0;

  &__nav {
    padding: 2rem 0rem;
    background-color: #005b74;

    ul {
      display: flex;
      flex-direction: column;
      list-style: none;
      margin: 0;
      padding: 0;

      li {
        display: flex;
        flex-direction: column;

        a {
          text-decoration: none;
          padding: 1rem;
          border-right: 4px solid transparent;
          transition: outline 0.15s linear;

          &:hover {
            text-decoration: underline;
          }

          &.active,
          &:focus-visible {
            border-right-color: #519eb9;
          }

          &:focus {
            outline: 4px solid #00c0ff8a;
          }
        }
      }
    }
  }

  &__content {
    padding: 2.75rem;
    flex-grow: 1;
  }

  .user-avatar {
    gap: 1rem;

    &__picture {
      height: 120px;
      width: 120px;
      flex: 0 0 120px;
      margin: auto;
    }
  }

  #avatar-modal {
    #cropper {
      max-height: 50vh;
    }

    [data-upload-step='3'] {
      display: flex;
      flex-direction: column;
      align-items: center;

      p {
        margin-top: 0;
      }
    }

    #crop-result {
      max-width: 100%;
      max-height: 50vh;
      background-color: #005b74;
    }
  }
}