/**
 * WSAL Wizard Styles
 */

 $color-primary: #009344;
 $color-secondary: #bdd63a;
 $color-disable: #b4b9be;

 body {
	 margin: 65px auto 24px;
	 -webkit-box-shadow: none;
	 box-shadow: none;
	 background: #f1f1f1;
	 padding: 0;
 }

 // Header logo.
 #wsal-logo {
	 border: 0;
	 margin: 0 0 24px;
	 padding: 0;
	 text-align: center;

	 img {
		 width: 400px;
	 }
 }

 // Wizard steps.
 .steps {
	 display: flex;
	 list-style-type: none;
	 margin: 0;
	 padding: 0 0 25px;
	 text-align: center;

	 li {
		 flex: 1 0 auto;
		 font-weight: 700;
		 margin: 0 0 5px;
		 color: $color-disable;
		 padding-bottom: 15px;
		 position: relative;

		 &.is-active {
			 color: $color-primary;

			 &::before {
				 border: 4px solid $color-primary;
				 background: $color-primary;
			 }
		 }

		 &::before {
			 content: '';
			 border: 4px solid $color-disable;
			 border-radius: 100%;
			 width: 4px;
			 height: 4px;
			 position: absolute;
			 bottom: 0;
			 left: 50%;
			 margin-left: -6px;
			 margin-bottom: -8px;
			 background: $color-disable;
		 }
	 }
 }

 // Wizard Content.
 .wsal-setup-content {
	 box-shadow: 0 1px 3px rgba(0,0,0,.13);
	 padding: 2em;
	 margin: 0 0 20px;
	 background: #fff;
	 overflow: hidden;
	 zoom: 1;
	 text-align: left;

	 h4,
	 fieldset {
		 line-height: 1.5;
	 }
 }

 .wsal-setup-actions {
	 text-align: center;

	 .button {
		 box-shadow: none;
		 font-size: 14px;
		 height: auto;
		 padding: 8px 20px;
		 min-width: 12em;
		 min-width: auto;
		 transition: 0.1s all linear;
	 }

	 .button-primary {
		 background-color: $color-primary;
		 border-color: $color-primary;
		 box-shadow: none;
		 text-shadow: none;
		 margin: 0;
		 opacity: 1;

		 &:hover,
		 &:focus {
			 background: lighten($color: $color-primary, $amount: 5%);
			 border-color: lighten($color: $color-primary, $amount: 5%);
			 box-shadow: none;
			 color: #fff;
		 }
	 }
 }

 // Wizard footer.
 .wsal-setup-footer {
	 text-align: center;

	 a {
		 color: $color-primary;
		 font-size: 14px;
		 text-decoration: none;
	 }
 }

 .wsal-setup-form {
	 label[for="editor-users-box"],
	 label[for="editor-roles-box"],
	 label[for="exuser-query-box"],
	 label[for="exrole-query-box"],
	 label[for="ipaddr-query-box"] {
		 display: inline-block;
		 margin: 5px 0;

		 span {
			 display: inline-block;
			 min-width: 100px;
		 }
	 }
 }

 .sectoken-user,
 .sectoken-role,
 .sectoken-ip,
 .sectoken-other {
	 display: inline-block;
	 border-width: 1px;
	 border-style: solid;
	 padding: 2px 4px;
	 margin: 2px 0 0 2px;
	 border-radius: 3px;
	 cursor: default;
	 line-height: 1.3;
	 font-size: 14px;

	 a {
		 text-decoration: none;
		 font-size: 12px;
		 font-weight: bold;
		 color: #FFF;
		 margin-left: 2px;
		 background: #BBB;
		 border-radius: 25px;
		 height: 14px;
		 display: inline-block;
		 vertical-align: middle;
		 width: 14px;
		 text-align: center;
		 line-height: 12px;

		 &:hover {
			 background: #FB9;
		 }
	 }
 }
 .sectoken-other { display: table; border-collapse: separate; }
 .sectoken-role { background: #EFE; border-color: #5B5; }
 .sectoken-user { background: #EFF; border-color: #5BE; }
 .sectoken-ip { background: #FFE; border-color: #ED5; }
 .sectoken-other { background: #FFE; border-color: #ED5; }