/*!
 * Copyright (c) Région Hauts-de-France, Département de la Seine-et-Marne, CGI, 2016.
 *     This file is part of OPEN ENT NG. OPEN ENT NG is a versatile ENT Project based on the JVM and ENT Core Project.
 *
 *   This program is free software; you can redistribute it and/or modify
 *   it under the terms of the GNU Affero General Public License as
 *   published by the Free Software Foundation (version 3 of the License).
 *   For the sake of explanation, any module that communicate over native
 *   Web protocols, such as HTTP, with OPEN ENT NG is outside the scope of this
 *   license and could be license under its own terms. This is merely considered
 *   normal use of OPEN ENT NG, and does not fall under the heading of "covered work".
 *
 *   This program is distributed in the hope that it will be useful,
 *   but WITHOUT ANY WARRANTY; without even the implied warranty of
 *   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 */

//Beautify radio group button

.radio-label {
  width: 100%;
  margin-bottom: 1em;
  text-align: center;
}

.radio-pillbox {
  height: 3em;
  width: 29%;
  font-size: 0.83em;
  border: 0;
  border-radius: 75px;
  overflow: hidden;
  color: $primary;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  display: inline-block;
  margin: 0 55px 20px;
}

.radio-pillbox radiogroup {
  height: 100%;
  width: 100%;
  display: flex;
}

.radio-pillbox radiogroup div {
  width: 100%;
  position: relative;
}

.radio-pillbox radiogroup div input {
  -webkit-appearance: inherit;
  width: 100%;
  height: 100%;
  transition: background 300ms ease-out;
  margin: 0;
  outline: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.radio-pillbox radiogroup div input:checked {
  color: #5f6982;
  border: none;
  box-shadow: inset 0 10px 50px rgba(25, 25, 25, 0.1);
}

.radio-pillbox radiogroup .first {
  border-radius: 75px 0 0 75px;
  border-left: none;
}

.radio-pillbox radiogroup .last { border-radius: 0 75px 75px 0; }

.radio-pillbox radiogroup div label {
  position: absolute;
  top: 32%; /* top plus line-height centers text */
  line-height: 1;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
}

.radio-pillbox input:focus { outline: 0; }

.radio-pillbox label:after {
  content: "\2714";
  display: inline-block;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -o-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  -webkit-transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -moz-transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  -moz-transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  -o-transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  -o-transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
  transition: margin 250ms cubic-bezier(0.6, -0.28, 0.735, 0.045) 100ms,  transform 250ms cubic-bezier(0.895, 0.03, 0.685, 0.22);
}

.radio-pillbox input:checked + label:after {
  margin-left: 12px;
  -webkit-transform: scale(1.25);
  -moz-transform: scale(1.25);
  -o-transform: scale(1.25);
  -ms-transform: scale(1.25);
  transform: scale(1.25);
  -webkit-transition: -webkit-transform 500ms  cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms,  margin 500ms,  -webkit-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
  -moz-transition: -moz-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)  250ms,  margin 500ms,  -moz-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
  -o-transition: -o-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275)  250ms,  margin 500ms,  -o-transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms,  margin 500ms, transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 250ms;
}