@import url(./nav.css);
@import url(./footer.css);

/* change-password */
.form-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center
}

.form-section .change-password {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--size24-5);
  box-sizing: border-box;
  width: min(600px, 100%);
  justify-content: center;
  padding: var(--size24-5);
  backdrop-filter: blur(8px);
  margin-top: var(--size24-5);
  border-radius: var(--size24-5);
  background-color: var(--blur-default)
}

.form-section .change-password h1 {
  width: 100%;
  text-align: center;
  font-size: var(--size40-10)
}

.form-section .change-password .fields input {
  font-size: 16px;
  padding: var(--size24-5) var(--size24-5) calc((var(--size24-5)) / 2);
}

.form-section .change-password .fields input[name="uf"] { text-transform: uppercase }
.form-section .change-password .fields input[name="phone"] { padding-left: min(88px, 24vw) }

.form-section .change-password .fields label {
  cursor: text;
  z-index: 1;
  left: var(--size24-5);
  top: calc((var(--size24-5) - ((var(--size24-5)) / 4)));
}

.form-section .change-password .fields label.example {
  font-size: .75em;
  color: var(--disabled);
  transition: var(--transition);
  top: calc((var(--size24-5)) * 1.5) !important
}

.form-section .change-password .fields input[readonly],
.form-section .change-password .fields label[aria-readonly]{ color: var(--disabled) }
.form-section .change-password .fields label[aria-readonly]{ font-size: .75em }

.form-section .change-password .fields input:focus~select,
.form-section .change-password .fields input:valid~select,
.form-section .change-password .fields select:focus { transform: scale(1) }

.form-section .change-password .fields input:focus~label,
.form-section .change-password .fields input:valid~label,
.form-section .change-password .fields select:focus~label,
.form-section .change-password .fields label[aria-readonly] { top: calc((var(--size24-5)) / 4) }

.form-section .change-password .fields input:focus~label.example,
.form-section .change-password .fields input:valid~label.example,
.form-section .change-password .fields select:focus~label.example { transform: scale(0) }

.form-section .change-password .submit {
  width: 100%;
  padding: 16px 8px;
  border-radius: 180px;
  text-transform: uppercase;
}

.form-section .change-password.disabled { display: none }


/* STEPS */
.form-section .change-password .fields details {
  width: 100%;
  overflow: hidden
}

.form-section .change-password .fields details summary {
  z-index: 1;
  width: 100%;
  display: flex;
  font-weight: 500;
  position: relative;
  border-radius: 8px;
  align-items: center;
  pointer-events: none;
  box-sizing: border-box;
  color: var(--text-primary);
  text-shadow: var(--btn-icon-shadow);
  padding: calc((var(--size16-5)) + 3px) var(--size24-5);
}

.form-section .change-password .fields details .content {
  z-index: 0;
  width: 100%;
  display: flex;
  margin-top: 8px;
  gap: var(--size16-5);
  flex-direction: column
}

.form-section .change-password .fields details .content .attribute {
  width: 100%;
  height: 100%;
  position: relative
}

.form-section .change-password .fields details[open] .content { animation: open ease-in-out .75s }

/* .form-section .change-password .fields details[close] .content { animation: close ease-in-out .75s } */

@keyframes open {
  0% { transform: translateY(-100%) }
  100% { transform: translateY(0) }
}

@keyframes close {
  0% { transform: translateY(0) }
  100% { transform: translateY(-100%) }
}



/* CHANGE COLOR */
/* Primary */
.primary .form-section .change-password h1 { color: var(--primary) }
.primary .form-section .change-password .fields details summary { background-color: var(--primary) }

/* Secondary */
.secondary .form-section .change-password h1 { color: var(--secondary) }
.secondary .form-section .change-password .fields details summary { background-color: var(--secondary) }

/* Ternary */
.ternary .form-section .change-password h1 { color: var(--ternary) }
.ternary .form-section .change-password .fields details summary { background-color: var(--ternary) }



/* CONTROLLER HOVER */
/* .desktop.primary .form-section .change-password .submit:hover {
  box-shadow: var(--shadow0005-primary),
              var(--shadow0010-primary),
              var(--shadow0015-primary),
              var(--shadow0020-primary),
              var(--shadow0025-primary)
}

.desktop.secondary .form-section .change-password .submit:hover {
  box-shadow: var(--shadow0005-secondary),
              var(--shadow0010-secondary),
              var(--shadow0015-secondary),
              var(--shadow0020-secondary),
              var(--shadow0025-secondary)
}

.desktop.ternary .form-section .change-password .submit:hover {
  box-shadow: var(--shadow0005-ternary),
              var(--shadow0010-ternary),
              var(--shadow0015-ternary),
              var(--shadow0020-ternary),
              var(--shadow0025-ternary)
} */