<div id='root'></div>

@use postcss-nested;
@use postcss-cssnext;
/*imports*/
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
@import url('https://fonts.googleapis.com/css?family=Lobster');

/* variables */
:root {
  /* colors */
  --primary-color: #f44336;
  --primary-color-dark: color(#f44336 shade(12%));
  --primary-color-tint: color(#f44336 tint(70%));
  --secondary-color: #222;
  --secodnary-color-dark: color(#222 shade(12%));
  --secondary-color-tint: color(#222 tint(70%));
  
  /* width */
  --form-width: 16rem;
}

body {
  color: #fff;
  background: #222;
  font-family: 'Open Sans', sans-serif;
}

.form {
  width: var(--form-width);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem auto 0 auto;
  
  &_logo {
    font-family: 'Lobster', cursive;
    font-size: 2.5rem;
    margin-bottom: 8px;
    & span {
      color: var(--primary-color);
    }
  }
  &_title{
    font-weight: bold;
    margin-bottom: 8px;
    & span {
      color: var(--primary-color);
    }
  }
  
  &_items{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  &_inputs{
    width: var(--form-width);
    color: var(--secondary-color-tint);
    margin: 1rem 0;
    position: relative;
    
    & label {
      font-size: 16px;
      position: absolute;
      top: 10px;
      left: 0;
      pointer-events: none;
      transition: all 0.15s ease;
    }
    
    & input {
      width: 100%;
      height:36px;
      background: inherit;
      border: none;
      border-bottom: 1px solid;
      color: inherit;  
 
      &:focus, &:valid{
        outline: none;
        border-width: 2px;
        margin-bottom: -1px;
        border-color: var(--primary-color);
      }

      &:focus + label , &:valid + label{
        transform: translateY(-20px);
        font-size: 70%;
        color: var(--primary-color);
      }
    }
  }
  
  &_button {
    width: 100%;
    height: 36px;
    margin-top: 16px;
    padding-left: 16px;
    padding-right: 16px;
    border: none;
    border-radius: 2px;
    color: white;
    background: var(--primary-color);
    box-shadow:2px 2px 2px var(--primary-color-dark);
    
    &:focus {
      outline: none;
    }
    
    &:active {
      outline: none;
      background: var(--primary-color-dark);
    }
  }
  
  &_other {
    width: 100%;
    margin-top: 8px;
    display: flex;
    justify-content: space-between;
    & a {
      color: var(--primary-color);
      text-decoration: none;
    }
  }
  
}

/* Sidebar.jsx */

/* App.jsx */
class App extends React.Component { 
  render() {
    return (
      <div className='form'>
        <div className='form_logo'>
          Lo<span>g</span>o
        </div>
        <div className='form_title'>
          Log<span>I</span>n
        </div>
        <form className='form_items'>
          <div className='form_inputs'>
            <input 
              type='text'
              required
              />
            <label>username or email</label>
          </div>
          <div className='form_inputs'>
            <input
              type='password'
              required
              />
            <label>password</label>
          </div>
          <button className='form_button'>Log In</button>
        </form>
        <div className='form_other'>
          <a href='#'>forgot password?</a>
          <a href='#'>Join Now</a>
        </div>
      </div>
    );
  }
  
}

/* main.js */
class Main extends React.Component{
  render(){
    return (
      <div>
        <App />
      </div>
    );
  }
};

ReactDOM.render(
  <Main />,
  document.querySelector('#root')
);