@import url('variables.css');

/********** FLOATING **********/
.floating-form {
  width: 100%;
  margin-right: 2%;
  padding: 5px 0px 0px 10px;
  /*border:1px solid #000;*/
}

.floating-label {
  position: relative;
  margin-bottom: 20px;
  padding-left: 5px;
  /*border:1px solid yellow;*/
}

.floating-input,
.floating-select {
  outline: auto;
  border: var(--font-color-secondary);
  font-size: 15px;
  font-weight: bold;
  padding: 5px 5px;
  display: block;
  width: 100%;
  height: 30px;
  text-transform: uppercase;
  color: var(--font-color-secondary);
  background: transparent;
  /* box-shadow: var(--neu-flat-secondary); */
}

.floating-input:focus,
.floating-select:focus,
.floating-textarea:focus {
  outline: none;
  border: none;
  color: var(--font-color-primary);
  background: var(--bg-color-secondary);
  box-shadow: var(--neu-pressed-secondary);
}

.form-control:disabled,
.form-control[readonly] {
  color: var(--font-color-default);
  background: var(--bg-color-primary);
  box-shadow: var(--neu-flat-primary);
  opacity: 1;
}

.floating-label>label {
  color: var(--font-color-secondary);
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 5px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.floating-label>p {
  color: var(--font-color-primary);
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  left: 15px;
  top: -20px;
}

.floating-input:focus~label,
.floating-input:not(:placeholder-shown)~label {
  top: -20px;
  font-size: 12px;
  color: var(--font-color-secondary);
}

.floating-select:focus~label,
.floating-select:not([value=""]):valid~label {
  top: -20px;
  font-size: 12px;
  color: var(--font-color-primary);
}

.floating-input:focus~.bar:before,
.floating-input:focus~.bar:after,
.floating-select:focus~.bar:before,
.floating-select:focus~.bar:after,
.floating-textarea:focus~.bar:before,
.floating-textarea:focus~.bar:after {
  width: 50%;
}

/* highlighter */
.highlight {
  position: absolute;
  height: 50%;
  width: 100%;
  top: 15%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

/* active state */
.floating-input:focus~.highlight,
.floating-select:focus~.highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* animation */
@-webkit-keyframes inputHighlighter {
  from {
    background: var(--font-color-secondary);
  }

  to {
    width: 0;
    background: transparent;
  }
}

@-moz-keyframes inputHighlighter {
  from {
    background: var(--font-color-secondary);
  }

  to {
    width: 0;
    background: transparent;
  }
}

@keyframes inputHighlighter {
  from {
    background: var(--font-color-secondary);
  }

  to {
    width: 0;
    background: transparent;
  }
}

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/********** FLOATING **********/