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

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

  &__nav {
    padding: 2rem 0rem;
    background-color: var(--main-darker);

    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 {
            border-right-color: var(--main-light);
            font-weight: bold;
          }

          &:focus {
            outline: 4px solid var(--focus-outline);
          }
        }
      }
    }
  }

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

  .user-avatar {
    gap: 1rem;

    &__picture {
      height: 120px;
      width: 120px;
      flex: 0 0 120px;
      background-color: var(--main-darker);
      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: var(--main-darker);
    }
  }

  .alert {
    margin-bottom: 1rem;
  }

  .authorization {
    &__client {
      display: flex;
      flex-direction: row;
      min-height: 120px;
      margin-bottom: 1rem;

      &-image {
        width: 120px;
        height: 120px;
        flex-shrink: 0;
        background-color: var(--main-darker);

        img {
          max-width: 100%;
          max-height: 100%;
        }
      }

      &-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding: 0 8px;
      }

      &-title {
        font-size: 1.5rem;
      }

      &-urls {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
      }

      &-url {
        margin-top: 2px;
      }

      &-description {
        margin-bottom: 4px;
      }

      @include break-on(xs, down) {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
      }
    }
  }
}