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

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

  .form-container {
    .form-label:first-of-type {
      margin-top: 0;
    }
  }

  .d-flex p:first-of-type {
    margin-top: 0;
  }

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

    &-content {
      display: flex;
      flex-grow: 1;
    }

    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);
            background-color: var(--main-darkish);
          }

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

        &:last-child {
          margin-top: auto;
        }
      }
    }
  }

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

  &__nav {
    &-content {
      @include break-on(xs, down) {
        display: none;
      }
    }

    &-mobile {
      @include break-on(xs, up) {
        display: none;
      }
    }

    @include break-on(xs, down) {
      position: absolute;
      background-color: transparent;
      padding: 1rem;

      &:hover,
      &:focus,
      &:focus-within {
        left: 0;
        top: 0;
        right: 0;
        padding: 0;
        background-color: var(--main-darker);
        box-shadow: 0px 6px 62px -14px rgba(0, 0, 0, 0.45);
        flex-direction: column;

        & > .settings__nav-content {
          display: block;
          margin-top: 1rem;
        }

        & > .settings__nav-mobile {
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}