@import 'css/master/settings/settings';

/*
	Toggle Switch sample markup
	----------------------------------------------------------------------------
	<div class="switch">
		<a class="switch1 switchOn">Order Once</a>    // switchOn class will highlight the active switch
		<a class="switch2 switchOff">Subscribe</a>    // switchOff will grey out the inactive switch
	</div>
*/

.switch,
.switch:hover
{
  margin: .5em 0;
  padding: 0;
  outline: 0;
  overflow: visible;
  height: auto;
  font-family: inherit;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  font-stretch: normal;
  text-transform: none;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  color: $white;
  vertical-align: middle;
  -webkit-appearance: none;
  display: inline-block;
  width: 160px;
  /*ie7 inline-block*/
  zoom: 1;
  *display: inline;

  .switch1{
    -webkit-border-radius: 8px 0 0 8px;
    -moz-border-radius: 8px 0 0 8px;
    border-radius: 8px 0 0 8px ;
    margin: 0 -2px 0 0;
    padding: 6px 6px;
    font-size: 11px;
    border-width: 1px 0 1px 1px;
    border-style: solid;
    display: inline-block;
    width: 41%;
  }
  .switch2{
    -webkit-border-radius: 0 8px 8px 0;
    -moz-border-radius: 0 8px 8px 0;
    border-radius: 0 8px 8px 0 ;
    margin: 0 0 0 -2px;
    padding: 6px 6px;
    font-size: 11px;
    border-width: 1px 1px 1px 0;
    border-style: solid;
    display: inline-block;
    width: 41%;
  }

  .switchOn {
    color: $white;
    background-color: $blue;
  }
  .switchOn:hover {
    cursor: auto;
  }
  .switchOff {
    border-color: $white;
    background-color: $grayLight;
    color: $gray;
  }
  .switchOff:hover {
    border-color: $white;
    background-color: $grayMedium;
    color: $gray;
  }
}