/*
 * Create a class with the correct segmented control prefixes
 *
 * $type Can be animation or base
 * $name The name of your class
 */
.segmented-control {
  display: flex;
}

.segmented-control-btn {
  position: relative;
  flex: 1 0;
  height: 100%;
  text-align: center;
  background: #efefef;
}
.segmented-control-btn:last-of-type input + label {
  border-left: none;
}
.segmented-control-btn:first-of-type input + label {
  border-right: none;
}

.segmented-control input {
  position: absolute;
  opacity: 0;
}
.segmented-control input + label {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding-top: 8px;
  padding-bottom: 8px;
  margin: 0;
  color: #333;
  cursor: pointer;
  transition: 0.3s ease;
}
.segmented-control input + label::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  content: "";
  transition: 0.3s ease;
}
.segmented-control input[type=radio]:checked + label {
  color: #000000;
}
.segmented-control input[type=radio]:checked + label::before {
/*  background: #7768ff;*/
  background: #cc4455;
  transition-delay: 0.1s;
}

.segmented-control.sc-fade input + label::before {
  opacity: 0;
}
.segmented-control.sc-fade [type=radio]:checked + label::before {
  opacity: 1;
}

.segmented-control.sc-slide input + label::before {
  top: 50%;
  height: 0;
  opacity: 0;
  transform: translateY(-50%);
}
.segmented-control.sc-slide [type=radio]:checked + label::before {
  height: 100%;
  opacity: 1;
}

.segmented-control.sc-zoom input + label::before {
  transform: scale(0);
}
.segmented-control.sc-zoom [type=radio]:checked + label::before {
  transform: scale(1);
}

.segmented-control.sc-default input + label::before {
  background: #7768ff;
}
.segmented-control.sc-default input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-red input + label::before {
  background: #f44335;
}
.segmented-control.sc-red input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-pink input + label::before {
  background: #e81e61;
}
.segmented-control.sc-pink input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-purple input + label::before {
  background: #9b26af;
}
.segmented-control.sc-purple input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-deep-purple input + label::before {
  background: #663ab6;
}
.segmented-control.sc-deep-purple input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-indigo input + label::before {
  background: #3e50b4;
}
.segmented-control.sc-indigo input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-blue input + label::before {
  background: #2095f2;
}
.segmented-control.sc-blue input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-light-blue input + label::before {
  background: #04a8f3;
}
.segmented-control.sc-light-blue input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-cyan input + label::before {
  background: #00bbd3;
}
.segmented-control.sc-cyan input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-teal input + label::before {
  background: #009587;
}
.segmented-control.sc-teal input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-green input + label::before {
  background: #4bad4f;
}
.segmented-control.sc-green input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-light-green input + label::before {
  background: #8ac249;
}
.segmented-control.sc-light-green input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-lime input + label::before {
  background: #ccdb38;
}
.segmented-control.sc-lime input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-yellow input + label::before {
  background: #feea39;
}
.segmented-control.sc-yellow input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-amber input + label::before {
  background: #fec007;
}
.segmented-control.sc-amber input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-orange input + label::before {
  background: #fe9700;
}
.segmented-control.sc-orange input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-deep-orange input + label::before {
  background: #fe5623;
}
.segmented-control.sc-deep-orange input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-brown input + label::before {
  background: #785447;
}
.segmented-control.sc-brown input[type=radio]:checked + label {
  color: #ffffff;
}

.segmented-control.sc-grey input + label::before {
  background: #9d9d9d;
}
.segmented-control.sc-grey input[type=radio]:checked + label {
  color: #000000;
}

.segmented-control.sc-blue-grey input + label::before {
  background: #5f7c89;
}
.segmented-control.sc-blue-grey input[type=radio]:checked + label {
  color: #ffffff;
}

.sc-round.segmented-control .segmented-control-btn:last-of-type {
  border-radius: 0 25px 25px 0;
}
.sc-round.segmented-control .segmented-control-btn:first-of-type {
  border-radius: 25px 0 0 25px;
}
.sc-round.segmented-control input {
  position: absolute;
  opacity: 0;
}
.sc-round.segmented-control input + label {
  margin: 2px 3px;
}
.sc-round.segmented-control input[type=radio]:checked + label::before {
  border-radius: 25px;
}

.sc-rounded.segmented-control .segmented-control-btn:last-of-type {
  border-radius: 0 5px 5px 0;
}
.sc-rounded.segmented-control .segmented-control-btn:first-of-type {
  border-radius: 5px 0 0 5px;
}
.sc-rounded.segmented-control input {
  position: absolute;
  opacity: 0;
}
.sc-rounded.segmented-control input + label {
  margin: 2px 3px;
}
.sc-rounded.segmented-control input[type=radio]:checked + label::before {
  border-radius: 5px;
}

/*# sourceMappingURL=segmented-control.css.map */