// "Suggested" put ANY scss imports files or libraries if needed
// imports

// Variable Declaration  with value
$heading-font-size: 14pt;   // font-size: 14pt
$heading-color: red;
$primary-color: #007bff;
$font-size-large: 18px;
$border-radius: 5px;

// Style h1 element
h1 {
    font-weight: bold;  // css value
    font-size: $heading-font-size; // scss variable
    color: $heading-color // scss variable
}

// Mixin 
// Form Button
@mixin button-style {  //@directive and var name same line
    display: inline-block; // css
    padding: 10px 20px; // css
    border: 1px solid $primary-color; // css css scss
    border-radius: $border-radius; // scss
    background-color: $primary-color; // scss
    color: #fff;  // shortcode HEX
    text-decoration: none;

    &:hover {

        background-color: darken($primary-color, 10%);

    } // hover

} // mixin

// Define using the mixin in our css
// apply the fixin to an html element
.button // button for our form
{
    @include button-style;
}

.another-button {
    @include button-style; // mixin
    background-color: #00FF00; // css
    border-color: $primary-color; // scss
}

// Media queries for responsive design
// max 576  phones
// max 768  tables
@media (max-width: 768px) {
    .custom-heading {
        font-size: 16px; // css
    } // class
} // @media

@media (max-width: 576px) {
    .button {
        font-size: 14px;
    } // class
} // @media

// mathemathic operations
// variable for base
$base-font-size: 18px;
$base-font-size-large: $base-font-size * 1.2;
$base-font-size-small: $base-font-size * .8;

h1 {
    font-size: $base-font-size-large;
    // font-size: 12pt;
}

h2 { 
    font-size: $base-font-size;
}

h3 {
    font-size: $base-font-size-small;
}

/****  Compiled CSS in css/components/form.css  lines 73-84 

.form-required:after {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 0.3em;
  content: "";
  vertical-align: super;
  background-image: url(../../images/icons/required.svg); :after
  background-repeat: no-repeat;
  background-size: 6px 6px;
}  */

/*** SCSS comparative
1. use scss variables for at least 2 keys
2. css for the others
3. form-required
4. pseudo class handle after background-image:
***/

//// form.required scss ////
// variables
$form-required-display: inline-block;
$form-required-width: 6px;
$form-required-height: 6px;

// mixins
@mixin form-required {
    display: $form-required-display;
    width: $form-required-width;
    height: $form-required-height;
    margin: 0 0.3em;
    content: "";
    vertical-align: super;

    &:after {
        background-image: url(../../images/icons/required.svg);
        background-repeat: no-repeat;
        background-size: 6px 6px;
    } // after

} // form-required

// includes
.form {
    @include form-required; // remove method()
}

//// EOB form.required scss ////