@use 'pix-design-tokens/typography';

.manage-authentication-window {
  display: flex;
  flex-direction: column;
  padding: var(--pix-spacing-6x);
  background-color: var(--pix-neutral-20);

  &__title {
    @extend %pix-title-xs;

    margin: 0;
    color: var(--pix-neutral-900);
  }

  label {
    padding-bottom: 5px;
    color: var(--pix-neutral-500);
    font-weight: 500;
    font-size: .88rem;
  }

  .disabled {
    background-color: var(--pix-neutral-20);
    border: none;
  }

  .help {
    color: var(--pix-neutral-900);
    font-weight: normal;
    font-size: 0.85rem;
    letter-spacing: normal;
    text-transform: none;
  }

  &__clipboard {
    display: flex;
    gap: var(--pix-spacing-4x);
    align-items: flex-end;

    .pix-input {
      width: 100%;
    }

    input {
      box-sizing: border-box;
      background-color: var(--pix-neutral-20);
    }

    &__copy-password-button {
      color: var(--pix-neutral-100);
    }
  }

  &__warning {
    display: flex;
    color: var(--pix-neutral-0);
    font-size: .875rem;

    span {
      margin-left: 10px;
    }
  }

  &__informations {
    display: flex;
    flex-direction: column;
    padding-left: var(--pix-spacing-4x);
    color: var(--pix-neutral-0);
    font-size: .875rem;

    li {
      margin: var(--pix-spacing-1x) 0;
    }
  }

  &__footer {
    margin-top: var(--pix-spacing-4x);
    padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
    background-color: var(--pix-neutral-800);
    border-radius: var(--pix-spacing-2x);

    button {
      margin-bottom: var(--pix-spacing-1x);
      font-weight: 600;
    }

    label {
      color: var(--pix-neutral-0);
    }
  }

  &__box {
    margin-top: var(--pix-spacing-4x);
    padding: var(--pix-spacing-4x) var(--pix-spacing-6x);
    background-color: var(--pix-neutral-0);
    border-radius: 8px;

    hr {
      margin-bottom: var(--pix-spacing-4x);
      color: var(--pix-neutral-100);
    }

    > .input-container {
      margin-bottom: 0;
    }
  }

  &__subTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--pix-spacing-4x);

    &--mediacentre {
      margin-bottom: 0;
    }

    .green-icon {
      fill: var(--pix-success-700);
    }

    .grey-icon {
      fill: var(--pix-neutral-500);
    }
  }
}

