/* Define CSS variables for colors */
:root {
  --wicket-ac-danger-100: var(--state-error, #DC3545);
  --wicket-ac-danger-020: var(--state-error-light, #F5C2C7);
  --wicket-ac-success-100: var(--state-success, #198754);
  --wicket-ac-success-020: var(--state-success-light, #D1E7DD);
}

.wicket-acc-block-password {

  .alert {
    border-left: solid var(--border-alert, 4px);
    padding: var(--space-250, 20px 15px);
    border-radius: var(--alerts-corner-radius, 0px);

    &.alert-danger {
      border-color: var(--wicket-ac-danger-100);
      background-color: var(--wicket-ac-danger-020);
    }

    &.alert-success {
      border-color: var(--wicket-ac-success-100);
      background-color: var(--wicket-ac-success-020);
    }

    ul {
      list-style-type: disc;
      padding-left: 30px;

      li {
        text-decoration: underline;
      }
    }
  }

	.manage_password_form {
    .form__label {
        display: block;
        font-size: var(--form-label-font-size, 1rem);
        font-weight: var(--form-label-font-weight, 700);
        line-height: var(--form-label-line-height, 1.5rem);
        margin-bottom: var(--space-050, 6px);

        span.required {
          color: var(--wicket-ac-danger-100);
        }
      }

    .form__input {
      width: 100%;
      margin-bottom: var(--space-400, 23px);

      &.error_input {
        border-color: var(--wicket-ac-danger-100);
        padding-right: calc(1.5em + .75rem);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right calc(.375em + .1875rem) center;
        background-size: calc(.75em + .375rem) calc(.75em + .375rem);
      }
    }

    .small-text {
      font-size: var(--body-sm-font-size, 80%);
      color: var(--text-content-secondary);
      line-height: 1.5rem;
      margin-bottom: 6px;
    }
  }
}