@import "../../../base-styles.scss";

.body{
    display: grid;
    height: 100%;
    place-items: center;
    text-align: center;

}

.containers{
    position: relative;
    padding: 20px 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    .validation-error{
        color: $danger;
        font-size: 10px;
    }

    .post{
        &.hide{
            display: none;
        }
    }
    
    .text{
        font-size: 25px;
        color: #666;
        font-weight: 500;
      }
    
    .star-widget {
        &.hide{
            display: none;
        }

        min-height: 40px;
        input{
            display: none;
        }
      
        label{
            font-size: 30px;
            padding: 10px;
            // transition: all 0.1s ease;
        }
    }


    .msform{ 
        header{
            width: 100%;
            font-size: 25px;
            color: #fe7;
            font-weight: 500;
            margin: 5px 0 20px 0;
            text-align: center;
            // transition: all 0.1s ease;
        }
        
          
        .textarea{
            width: 100%;

            textarea{

              height: 100%;
              width: 100%;
              outline: none;
              color: #333;
              border: 1px solid #333;
              background: #eee;
              padding: 10px;
              resize: none;
              :focus{
                border-color: #444;
              }
            }
        }
    }
  }
  
  label{
    &.checked{
        color: #fd4;
    }
    &.unchecked {
        color: #333;
    }
  }
/*
input{
    
    &:not(:checked){
        & ~ label{
            &:hover{
                color: #fd4;
                & ~ label{
                    color: #fd4;
                }
            }        
        }
    }
    &:checked {
        & ~ label{
            color: #fd4;
        }
    }
    #rate-5{
        &:checked {
            & ~ label{
                color: #fe7;
                text-shadow: 0 0 20px #952;
            }
        }
    }


    #rate-1{
        &:checked {
            & ~ header{
                &:before{
                    content: "I just hate it 😡";
                }
            }
        }
    }
    
    #rate-2{
        &:checked {
            & ~ header{
                &:after{
                    content: "I don't like it 🙁";
                }
            }
        }
    }
    #rate-3{
        &:checked {
            & ~ header{
                &:after{
                    content: "It is awesome 😃";
                }
            }
        }
    }
    #rate-4{
        &:checked {
            & ~ header{
                &:after{
                    content: "I just like it 😎";
                }
            }
        }
    }
    #rate-5{
        &:checked {
            & ~ header{
                &:after{
                    content: "I just love it 😍";
                }
            }
        }
    }
    

}
*/
// input:checked ~ form{
//     display: block;
//   }