/*
 * Copyright 2020 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */
@scope to (devtools-widget > *) {
  .webauthn-pane {
    overflow: auto;
    min-width: 500px;
  }

  .webauthn-toolbar-container {
    display: flex;
    background-color: var(--sys-color-cdt-base-container);
    border-bottom: 1px solid var(--sys-color-divider);
    flex: 0 0 auto;
  }

  .webauthn-toolbar {
    display: inline-block;
  }

  .authenticators-view {
    padding: 0 var(--sys-size-9);
    min-height: auto;
    display: none;
  }

  .webauthn-pane.enabled .authenticators-view {
    display: block;
  }

  /* New Authenticator Section */
  .new-authenticator-title {
    display: block;
    padding: var(--sys-size-7) 0 var(--sys-size-5) 0;
    font: var(--sys-typescale-headline5);

    &:has(devtools-button) {
      padding-top: var(--sys-size-4);
    }
  }

  .new-authenticator-container {
    display: none;
    padding-left:  var(--sys-size-9);
  }

  .authenticator-option {
    > select {
      margin: 0 var(--sys-size-9) var(--sys-size-3) var(--sys-size-9);
    }

    > devtools-button {
      margin: var(--sys-size-3) var(--sys-size-9);
    }

    > input[type="checkbox"] {
      margin: var(--sys-size-5) var(--sys-size-9);
    }
  }

  .webauthn-pane.enabled .new-authenticator-container {
    display: block;
  }

  .new-authenticator-form {
    border: none;
    flex: 0 0 auto;
    margin: 0;
    padding-bottom: var(--sys-size-5);
  }

  .webauthn-pane select {
    width: 120px;
  }
  /* Active Authenticator Section */
  .authenticator-section {
    display: block;
  }

  .divider {
    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
    margin: 10px calc(var(--sys-size-9) * -1) 0;
  }

  .authenticator-fields {
    border: none;
    flex: 0 0 auto;
    margin-bottom: 10px;
  }

  .authenticator-section-header {
    margin: var(--sys-size-4) 0 var(--sys-size-5) calc(var(--sys-size-5) * -1);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }

  .authenticator-section-title {
    line-height: 24px;
    display: inline-flex;
  }

  .authenticator-section-title .authenticator-name-field {
    display: inline-block;
    border: none;
    animation: save-flash 0.2s;
    text-overflow: ellipsis;
    font: var(--sys-typescale-headline5);
  }

  .authenticator-section-title.editing-name .authenticator-name-field {
    border-bottom: 1px solid var(--sys-color-neutral-outline);
    font-weight: normal;
    animation: none;
  }

  .authenticator-field-value {
    font: var(--sys-typescale-monospace-regular);
    line-height: 18px;
  }

  .authenticator-field {
    margin: var(--sys-size-3) 0;
  }

  .authenticator-field,
  .authenticator-option {
    display: flex;
    align-items: center;
  }

  .authenticator-option-label {
    color: var(--sys-color-on-surface-subtle);
    font: var(--sys-typescale-body5-medium);
    padding-right: var(--sys-size-6);
    text-align: left;
    min-width: 152px;
    line-height: 18px;
  }

  ::part(action-button) {
    min-width: 20px;
    margin: 4px;
  }

  .active-button-container {
    display: inline-block;
    min-width: 28px;
  }

  .edit-name-toolbar {
    display: inline-block;
    vertical-align: middle;
  }

  @keyframes save-flash {
    from { opacity: 0%; }
    to { opacity: 100%; }
  }
  /* Credentials Table */

  ::part(credentialId-column),
  ::part(isResidentCredential-column),
  ::part(rpId-column),
  ::part(userHandle-column),
  ::part(signCount-column),
  ::part(actions-column) {
    vertical-align: middle;
  }

  .credentials-title {
    display: block;
    font: var(--sys-typescale-headline5);
    padding: var(--sys-size-7) 0 var(--sys-size-5) 0;
    border-top: var(--sys-size-1) solid var(--sys-color-divider);
    margin-right: calc(var(--sys-size-9) * -1);
  }

  .code {
    font-family: monospace;
  }

  .learn-more {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    text-align: center;
    overflow: hidden;
  }

  .webauthn-pane.enabled .learn-more {
    display: none;
  }
}