
// ICTU Theme discipl.org (2019) - 02-mixins.less
// ----------------------------------------------------------------------------------
// mixins
// ----------------------------------------------------------------------------------
// @package discipl-2019
// @author  StudioPress / Paul van Buuren
// @license GPL-2.0+
// @version 1.0.2
// @desc.   Bugfixes css en functions.php.
// @link    https://github.com/paulvanbuuren/discipl.org-wordpress-theme-2019



//========================================================================================================

.widhtheightem( @type: ~"height", @fontsize_px: 16 ) {

  @{type}: ( @fontsize_px * 1px );
  @{type}: ( ( @fontsize_px / 10 ) * 1rem );

}

//========================================================================================================

.fontsize( @fontsize_px: 16 ) {

  font-size: ( ( @fontsize_px / 10 ) * 1rem ); // /* 10px browser default */
  
}

//========================================================================================================

.bodyfont() {
  
  font-family: muli, sans-serif;
  font-weight: 400;
  font-style: normal;
  
}

//========================================================================================================

.headerfont() {

  font-family: poppins, sans-serif;
  font-weight: 700;
  font-style: normal;  

}

//========================================================================================================

.socialmedia_styling() {

  .social-media {

    overflow: hidden;
    margin-bottom: 0;

    display: flex;
    justify-content: center;
    
    &, li {
      list-style: none;
      margin-left: 0;
      padding-left: 0;
    }
    
    & > li {
      list-style-type: none !important;
    }
    
    li {

      margin-right: .5em;
      
      @media screen {
        a {
          border: 1px solid transparent;
          text-indent: -9999em;
          display: block;
          width: 2.5em;
          height: 2.5em;
          background-size: 2em 2em;
          background-repeat: no-repeat;
          background-position: center center;
          color: @txt;
          
          &:hover,
          &:active,
          &:focus {
            border-color: @txt;
            background-color: @txt;
          }
        }
        
      .twitter {
        .icon_socmed_icon('../images/icon-twitter.svg', @txt);

        &:hover,
        &:active,
        &:focus {
          .icon_socmed_icon('../images/icon-twitter.svg', @wit);
        }
      }
      .github {
        .icon_socmed_icon('../images/icon-github.svg', @txt);

        &:hover,
        &:active,
        &:focus {
          .icon_socmed_icon('../images/icon-github.svg', @wit);
        }
      }
      .website {
        .icon_socmed_icon('../images/icon-website.svg', @txt);

        &:hover,
        &:active,
        &:focus {
          .icon_socmed_icon('../images/icon-website.svg', @wit );
        }
      }
      .linkedin {
        .icon_socmed_icon('../images/icon-linkedin.svg', @txt);

        &:hover,
        &:active,
        &:focus {
          .icon_socmed_icon('../images/icon-linkedin.svg', @wit);
        }
      }
    }
  }
}
}

//========================================================================================================

.icon_socmed_icon(@src, @fill-new) {
  @data-uri:          data-uri('image/svg+xml;charset=UTF-8', "@{src}");
  @replace-default:   escape('fill="#000000"');
  @replace-new:       escape('fill="@{fill-new}"');
  @replacesrc1:       replace("@{data-uri}", @replace-default, @replace-new, "g");
  
  background-image: e(@replacesrc1);
}

//=========================================================================================================

.visuallyhidden() {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

//=========================================================================================================

.visuallyvisual() {
  border: inherit;
  clip: auto;
  height: auto;
  margin: auto;
  overflow: auto;
  padding: inherit;
  position: inherit;
  width: auto;
}

//=========================================================================================================

