/**
 * Oneall.less
 *
 * This file loads all styles used by the VC4A design of the One All Social login service.
 * This file is compiled into a oneall.css file (resources/css/oneall.min.css)
 *
 * @author Damien Senger <damien@vc4a.com>
 */

/**
 * VC4A Base CSS declarations
 *
 * The CSS base contains all really generic CSS declarations
 * used by this project, such as HTML markup reseting,
 * generic and accessibility helpers, @font-face declarations,
 * etc.
 */

/**
 * VC4A Less variables file
 *
 * This file is used to store all variables used by the second version
 * of the VC4A platform design.
 * Firstly, this file store all project variables, by group.
 * Lastly, this file override Bootstrap variables.
 *
 * @author Damien Senger <damien@vc4a.com>
 */

/**
 * Generic fonts, font stacks and font sizes
 *
 * @see https://medium.design/system-shock-6b1dc6d6596f#.l6fru9od8
 */

/**
 * Brand colors
 */

/**
 * Generic colors
 */

/**
 * Generic sizes
 */

/**
 * Paddings & margins
 */

/**
 * Borders
 */

/**
 * Grid width
 */

/**
 * Transitions
 */

/**
 * Box shadows on hover
 */

/**
 * Accessibility helpers
 */

/**
 * Z-index list
 */

/**
 * Buttons
 */

/**
 * Inputs
 */

/**
 * Academy specific variables
 */

/**
 * Welcome pages specific variables
 */

/**
 * VC4A Less new icon-font file
 *
 * This file is used to store all signs of the new icon font into
 * variables and to load the correct file when an icon from the new
 * iconfont exist on a page of the VC4A platform.
 *
 * @author Damien Senger <damien@vc4a.com>
 */

/**
 * Icon font loading
 */

@font-face {
  font-family: "VC4A Icons";
  font-style: normal;
  font-display: block;
  font-weight: 400;
  src: url('../../../vc4africa/resources/fonts/vc4a-icons.woff') format('woff'), url('../../../vc4africa/resources/fonts/vc4a-icons.ttf') format('truetype');
}

.vc4a-icon {
  display: inline-block;
  font-family: "VC4A Icons";
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * Icons variables
 */

/**
 * OneAll Social Login's social networks iconfont
 */

@font-face {
  font-family: "Icons";
  font-display: block;
  font-style: normal;
  font-weight: 400;
  src: url("data:application/x-font-woff;charset=utf-8;base64,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") format('woff');
}

/**
 * OneAll Social login specific variables
 */

/**
 * Oneall's VC4A design specific rules
 */

.plugin {
  padding-bottom: 0;
}

.plugin * {
  box-sizing: border-box;
}

.plugin #providers,
.plugin #providers .providers_group,
.plugin #providers .providers_block,
.plugin #providers .providers_row,
.plugin #providers .provider {
  width: 100%;
}

.plugin #providers .provider {
  display: block;
  float: none;
  box-sizing: border-box;
  margin-bottom: 3px;
}

.plugin #providers .provider .button {
  display: -ms-flexbox;
  display: flex;
  height: auto;
  max-width: 350px;
  min-width: 32px;
  width: 100%;
  background: transparent !important;
  border: 2px solid;
  border-radius: 2px;
  color: #000;
  overflow: hidden;
  text-decoration: none;
}

.plugin #providers .provider .button#button_facebook {
  border-color: #3b5998;
}

.plugin #providers .provider .button#button_facebook > span:not(.tick)::before {
  background: #3b5998;
}

.plugin #providers .provider .button#button_facebook > span:not(.tick)::after {
  content: '\ea90';
}

.plugin #providers .provider .button#button_facebook:focus > span:not(.tick)::after,
.plugin #providers .provider .button#button_facebook:hover > span:not(.tick)::after {
  color: #3b5998;
}

.plugin #providers .provider .button#button_twitter {
  border-color: #56a3d9;
}

.plugin #providers .provider .button#button_twitter > span:not(.tick)::before {
  background: #56a3d9;
}

.plugin #providers .provider .button#button_twitter > span:not(.tick)::after {
  content: '\ea96';
}

.plugin #providers .provider .button#button_twitter:focus > span:not(.tick)::after,
.plugin #providers .provider .button#button_twitter:hover > span:not(.tick)::after {
  color: #56a3d9;
}

.plugin #providers .provider .button#button_google {
  border-color: #dd4b39;
}

.plugin #providers .provider .button#button_google > span:not(.tick)::before {
  background: #dd4b39;
}

.plugin #providers .provider .button#button_google > span:not(.tick)::after {
  content: '\ea88';
}

.plugin #providers .provider .button#button_google:focus > span:not(.tick)::after,
.plugin #providers .provider .button#button_google:hover > span:not(.tick)::after {
  color: #dd4b39;
}

.plugin #providers .provider .button#button_linkedin {
  border-color: #0077b5;
}

.plugin #providers .provider .button#button_linkedin > span:not(.tick)::before {
  background: #0077b5;
}

.plugin #providers .provider .button#button_linkedin > span:not(.tick)::after {
  content: '\eaca';
}

.plugin #providers .provider .button#button_linkedin:focus > span:not(.tick)::after,
.plugin #providers .provider .button#button_linkedin:hover > span:not(.tick)::after {
  color: #0077b5;
}

.plugin #providers .provider .button > span:not(.tick) {
  position: relative;
  display: -ms-flexbox !important;
  display: flex !important;
  -ms-flex-align: center;
  align-items: center;
  height: auto !important;
  min-height: 2.5em !important;
  padding: 5px 15px;
  padding-right: 50px;
  width: 100%;
  color: inherit;
  font-size: 16px !important;
  line-height: 1.3;
  transition: color 0.3s ease-in-out;
}

.plugin #providers .provider .button > span:not(.tick)::before,
.plugin #providers .provider .button > span:not(.tick)::after {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50px;
}

.plugin #providers .provider .button > span:not(.tick)::before {
  display: block;
  content: '';
  transition: right .3s ease,
                                    width .3s ease;
  z-index: -1;
}

.plugin #providers .provider .button > span:not(.tick)::after {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-align: center;
  align-items: center;
  color: #fff;
  font-family: Icons;
  transition: color 0.3s ease-in-out;
  width: 48px;
}

.plugin #providers .provider .button:focus > span:not(.tick),
.plugin #providers .provider .button:hover > span:not(.tick) {
  color: #fff !important;
}

.plugin #providers .provider .button:focus > span:not(.tick)::before,
.plugin #providers .provider .button:hover > span:not(.tick)::before {
  right: 50px;
  width: calc(100% - 40px);
}

.plugin #providers .provider .button:focus > span:not(.tick)::after,
.plugin #providers .provider .button:hover > span:not(.tick)::after {
  color: #000;
}

.plugin #providers .provider .button > span.tick {
  display: none;
}