/*
  Keycloak templates use Patternfly components for everything, see
  https://www.patternfly.org/v4/components/form-control

  This files overrules Patternfly components to look more like Atwork components and defines
  other global styles for non-patternfly components.
*/

a:focus {
  outline-color: var(--aw-color-primary-50);
  outline-offset: 5px;
}

.login-pf, 
.login-pf body {
  background: var(--aw-color-primary-90);
}

.pf-c-form__label {
  z-index: 1;
  position: relative;
  display: block;
  height: 0;
  top: 12px;
  left: 10px;

  transition: all 0.1s ease-in-out;
  font-family: IBM Plex Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.03em;
  color: var(--aw-color-grey-50);
}

.pf-c-form-control {
  transition: all 0.1s ease-in-out;

  border-radius: var(--aw-border-radius);
  border-color: transparent;

  --pf-c-form-control--BackgroundColor: white;
  --pf-c-form-control--hover--BorderBottomColor: var(--aw-color-grey-30);
  --pf-c-form-control--focus--BorderBottomWidth: 2px;
  --pf-c-form-control--BorderWidth: 2px;
  --pf-c-form-control--Height: 46px;

  --pf-c-form-control--PaddingTop: 20px;
  --pf-c-form-control--PaddingRight: 10px;
  --pf-c-form-control--PaddingBottom: 4px;
  --pf-c-form-control--PaddingLeft: 9px;

  /* Remove icon 'invalid' from input */
  --pf-c-form-control--invalid--BackgroundUrl: "";

  outline: none;

  font-family: IBM Plex Sans, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.03em;
}

.pf-c-form-control[type="text"] {
  width: 380px;
}

.pf-c-form-control:focus {
  border-color: var(--aw-color-primary-50);
  padding: 20px 10px 4px 9px;
}

.pf-c-form-control[aria-invalid="true"] {
  border-color: var(--aw-color-danger);
  --pf-c-form-control--invalid--BorderBottomWidth: 2px;
}

.pf-c-button {
  transition: all 0.1s ease-in-out;
  border-radius: var(--aw-border-radius);
  padding: 13px 16px;
  outline: none;

  --pf-c-button--LineHeight: 20px;

  --pf-c-button--m-primary--BackgroundColor: var(--aw-color-primary-50);
  --pf-c-button--m-primary--hover--BackgroundColor: var(--aw-color-primary-60);
  --pf-c-button--m-primary--focus--BackgroundColor: var(--aw-color-primary-50);
  --pf-c-button--m-primary--active--BackgroundColor: var(--aw-color-primary-50);

  --pf-c-button--m-secondary--BackgroundColor: white;
  --pf-c-button--m-secondary--hover--BackgroundColor: var(--aw-color-primary-hover);
  --pf-c-button--m-secondary--focus--BackgroundColor: white;
  --pf-c-button--m-secondary--active--BackgroundColor: white;

  --pf-c-button--disabled--BackgroundColor: var(--aw-color-grey-30);

  --pf-c-button--m-primary--Color: white;
  --pf-c-button--m-secondary--Color: var(--aw-color-primary-50);
  --pf-c-button--m-secondary--hover--Color: var(--aw-color-primary-50);
  --pf-c-button--m-secondary--active--Color: var(--aw-color-primary-50);
  --pf-c-button--disabled--Color: white;

  font-family: IBM Plex Sans, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
  .pf-c-button:focus {
    outline: none;
    box-shadow: 
      0 0 0 2px white, 
      0 0 0 4px var(--aw-color-primary-50);
  }

  .pf-c-button::after {
    border: 0;
  }

  .pf-c-button + .pf-c-button {
    margin-top: 28px;
  }

.pf-c-form__helper-text.pf-m-error.kc-feedback-text {
  --pf-c-form__helper-text--m-error--Color: var(--aw-color-danger);
}

.pf-c-form__helper-text.pf-m-error.kc-feedback-text::before {
  content: "";
  -webkit-mask: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' class='svg-inline--fa fa-arrow-up-long' viewBox='0 0 320 512' %3E%3Cpath fill='currentColor' d='M312.1 176.1C308.3 181.7 302.2 184 296 184s-12.28-2.344-16.97-7.031L184 81.94V488c0 13.25-10.75 24-24 24s-24-10.75-24-24V81.94L40.97 176.1c-9.375 9.375-24.56 9.375-33.94 0s-9.375-24.56 0-33.94l136-136c9.375-9.375 24.56-9.375 33.94 0l136 136C322.3 152.4 322.3 167.6 312.1 176.1z'%3E%3C/path%3E%3C/svg%3E ")
    no-repeat 50% 50%;
  mask: url("data:image/svg+xml,%3Csvg role='img' xmlns='http://www.w3.org/2000/svg' class='svg-inline--fa fa-arrow-up-long' viewBox='0 0 320 512' %3E%3Cpath fill='currentColor' d='M312.1 176.1C308.3 181.7 302.2 184 296 184s-12.28-2.344-16.97-7.031L184 81.94V488c0 13.25-10.75 24-24 24s-24-10.75-24-24V81.94L40.97 176.1c-9.375 9.375-24.56 9.375-33.94 0s-9.375-24.56 0-33.94l136-136c9.375-9.375 24.56-9.375 33.94 0l136 136C322.3 152.4 322.3 167.6 312.1 176.1z'%3E%3C/path%3E%3C/svg%3E ")
    no-repeat 50% 50%;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 6px;
  height: 10px;
  display: inline-block;
  background-color: var(--aw-color-danger);

  margin-right: 6px;
}

.pf-c-alert {
  --pf-c-alert--m-success__icon--Color: var(--aw-color-primary-60);
  --pf-c-alert--m-danger__icon--Color: var(--aw-color-danger);

  --pf-c-alert--m-success__title--Color: var(--aw-color-primary-60);
  --pf-c-alert--m-danger__title--Color: var(--aw-color-danger);

  --pf-c-alert__title--FontWeight: 500;

  background-color: white;
  border-radius: var(--aw-border-radius);
  border: 0;
  margin-bottom: 28px;
}

/* Non Patternfly styling */

.form-group {
  position: relative;
  transition: all 0.1s ease-in-out;
  margin-bottom: 6px;
  min-height: 68px;
}

.form-group.-has-value label,
.form-group:focus-within label {
  transition: all 0.1s ease-in-out;
  top: 2px;
  font-size: 12px;
}

.form-group:focus-within label {
  color: var(--aw-color-primary-50);
}

.form-group label:has(+ input[aria-invalid="true"]) {
  color: var(--aw-color-danger);
}