/*
  @project: monepi/administrateur
  @create: 11 Oct 2020
  @description: Form stylesheet
*/

/* ----------------------------------------------------------------------------- == SUMMARY */
/*
  1. Form
    1.1 input
    1.1 Form-field
      1.1.a. grey
      1.1.b. with-separator
      1.1.c. quantity-controller
    1.2 Form-icon
    1.3 Form-legend
    1.4 Form-label
    1.5 Form-input
    1.6 Form-select
    1.7 Form-checkbox
    1.8 Form-message
*/

/* ----------------------------------------------------------------------------- == Form */
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }

  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }

  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}

.Form.error {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.Form-input,
.Form-select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ----------------------------------------------------------------------------- == input */
input,
input:invalid,
select {
  box-shadow: none;
  outline: none;
}

/* ----------------------------------------------------------------------------- == Form-field */
.Form-field {
  align-items: center;
  background: var(--white);
  border-radius: 6px;
  box-shadow: 0 0 0 0 #ffffff00;
  box-sizing: border-box;
  color: var(--grey-700);
  display: flex;
  font-family: var(--font-emphase);
  font-size: 1rem;
  height: 40px;
  line-height: 1.25em;
  padding: 5px;
  position: relative;
  outline: none;
  transition: box-shadow 100ms var(--ease-out);
}

.Form-field:focus-within {
  box-shadow: 0 0 0 3px #ffffff72;
}

.Form-field.grey {
  background-color: #fafafa;
  border: thin solid #efefef;
}

.Form-field.grey:focus-within {
  box-shadow: 0 0 0 3px #efefef72;
}

.Form-field.with-separator .Form-label {
  padding-right: 30px;
}

.Form-field.with-separator .Form-label:after {
  content: "";
  border-right: thin solid var(--grey-301);
  height: 100%;
  max-height: 18px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.Form-field.quantity-controller > .Button {
  background-color: transparent;
  border: none;
  color: var(--grey-500);
  padding: 0;
  height: 24px;
  width: 24px;
}

.Form-field.quantity-controller > .Button > svg {
  height: 100%;
  width: 100%;
}

/* ----------------------------------------------------------------------------- == Form-icon */
.Form-icon {
  flex: 0 0 30px;
  height: 30px;
  order: -1;
}

.Form-field > .Form-input:invalid + .Form-icon,
.Form-field > .Form-select:invalid + .Form-icon {
  color: var(--red-100);
}

.Form-field > .Form-input:valid + .Form-icon,
.Form-field > .Form-select:valid + .Form-icon {
  color: var(--green-500);
}

.Form-field > .Form-input:valid + .Form-icon.orange,
.Form-field > .Form-select:valid + .Form-icon.orange {
  color: var(--orange-100);
}

.Form-field > .Form-input:valid + .Form-icon.blue,
.Form-field > .Form-select:valid + .Form-icon.blue {
  color: var(--blue-300);
}

.Form-field.has-validation-state .Form-input,
.Form-field.has-validation-state .Form-select {
  padding-left: 0;
}

/* ----------------------------------------------------------------------------- == Form-legend */
.Form-legend {
  color: var(--grey-600);
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5em;
  position: relative;
  margin-bottom: 1rem;
}

/* ----------------------------------------------------------------------------- == Form-label */
.Form-label {
  color: var(--grey-500);
  font-family: var(--font-base);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5em;
  position: relative;
}

/* ----------------------------------------------------------------------------- == Form-input */
.Form-input,
.Form-select {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--grey-700);
  flex: 1;
  font-weight: inherit;
  height: 100%;
  padding-left: 10px;
}

.Form-input::placeholder {
  color: var(--grey-500);
  opacity: 1;
}

.Form-input:disabled {
  color: var(--grey-500);
  pointer-events: none;
}

/* ----------------------------------------------------------------------------- == Form-select */
.Form-select {
  appearance: none;
  color: var(--grey-700);
  padding-right: 30px;
  position: relative;
}

.Form-select:invalid {
  color: var(--grey-500);
}

.Form-select-chevron {
  color: #e8dce5;
  height: 30px;
  pointer-events: none;
  position: absolute;
  right: 0;
  width: 30px;
}

/* ----------------------------------------------------------------------------- == Form-checkbox */
.Form-checkbox {
  align-items: flex-start;
  display: inline-flex;
  margin: 0;
}
.Form-checkbox .Form-checkbox-input {
  height: 14px;
  margin-right: 12px;
  margin-top: 2px;
  min-width: 14px;
  width: 14px;
}

.Form-checkbox .Form-checkbox-label {
  color: var(--grey-600);
  text-align: left;
}

/* ----------------------------------------------------------------------------- == Form-message */
.Form-message {
  color: var(--grey-500);
}