/**
name: Button
type: ui
desc: >
	# Structure

	1. Button needs required structure, each text description has to be wrapped with element with class name 'button\_\_text' for text vertical aligning

	2. __Don't use icon's classes in button's attribute class__


	# Icons

	1. You can add icon both to the 'button\_\_label' and 'button\_\_label--success' elements

	2. All icons have property 'vertical-align' equal 'middle'

	3. If you want an icon for the button, you have to wrap 'button\_\_text' element with 'button\_\_label' element and add additional classes:

		1. Class name for icon's position:

			1. 'icon\-\-left' - uses :before for icon (hides :after). Icon has margin-right: 8px by default

			2. 'icon\-\-right' - uses :after for icon (hides :before). Icon has margin-left: 8px by default

		2. Class name for icon symbol


	# Animations

	1. Loading button state needs:

		1. Attribute 'data-loading="true"' for the button

		2. Element with class name 'button\_\_spinner' inside the button

	2. Loaded button state needs:

		1. Attribute 'data-loaded="true"' for the button

		2. Element with class name 'button\_\_label--success' inside the button

		3. Icon for success state can be added based on the same rules as for the basic icon

examples:
  - name: Default button
    tmpl: >
        <button class="button button--default">
        	<span class="button__label">Button default</span>
        </button>
  - name: Default button small
    tmpl: >
        <button class="button button--default button--small">
        	<span class="button__label">Button default</span>
        </button>
  - name: Default button with 'a' tag
    tmpl: >
        <a href="#" class="button button--default">
        	<span class="button__label">Button default</span>
        </a>
  - name: Grey for modal (button is visually identical with default, but with no special styling inside section--negative to avoid unwanted inheritance for modals)
    tmpl: >
        <button class="button button--modal">
        	<span class="button__label">Button modal</span>
        </button>
  - name: No background, but with changed color styles
    tmpl: >
        <button class="button button--naked">
        	<span class="button__label">Button naked</span>
        </button>
  - name: Underlined
    tmpl: >
        <button class="button button--underlined">
        	<span class="button__label">Button underlined</span>
        </button>
  - name: Green
    tmpl: >
        <button class="button button--success">
        	<span class="button__label">Button success</span>
        </button>
  - name: Blue
    tmpl: >
        <button class="button button--action">
        	<span class="button__label">Button blue</span>
        </button>
  - name: Blue dark
    tmpl: >
        <button class="button button--action-dark">
        	<span class="button__label">Button blue dark</span>
        </button>
  - name: Yellow
    tmpl: >
        <button class="button button--accept">
        	<span class="button__label">Button yellow</span>
        </button>
  - name: Yellow with next arrow
    tmpl: >
        <button class="button button--accept">
        	<span class="button__label icon--right icon-arrow-next">Next</span>
        </button>
  - name: Yellow small with next arrow
    tmpl: >
        <button class="button button--small button--accept">
        	<span class="button__label icon--right icon-arrow-next">Next</span>
        </button>
  - name: Yellow with previous arrow
    tmpl: >
        <button class="button button--accept">
        	<span class="button__label icon--left icon-arrow-prev">Prev</span>
        </button>
  - name: Link
    tmpl: >
        <a class="button button--link" href="#">Button link</a>
  - name: Link with arrow
    tmpl: >
        <a class="button button--link" href="#">
        	<span class="button__label icon--left icon-bullet">Button link</span>
        </a>
  - name: Inline button with arrow
    tmpl: >
        <button class="button button--link button--inline">
        	<span class="button__label icon--left icon-bullet">Button link</span>
        </button>
  - name: Blue next button
    tmpl: >
        <button class="button button--action">
        	<span class="button__label icon-arrow-next"></span>
        </button>
  - name: Blue prev button
    tmpl: >
        <button class="button button--action">
        	<span class="button__label icon-arrow-prev"></span>
        </button>
  - name: Grey with spinner
    tmpl:
    	include: grey-spinner.html
  - name: Blue with spinner
    tmpl:
    	include: blue-spinner.html
  - name: Yellow with spinner
    tmpl:
    	include: yellow-spinner.html
  - name: Button group
    tmpl: >
        <div class="button-group">
        	<button class="button button--default">
       			<span class="button__label">Button</span>
       		</button>
       		<button class="button button--default">
       			<span class="button__label">Button</span>
       		</button>
        </div>
  - name: Button with full width
    tmpl: >
        <button class="button button--default button--stretch">
       		<span class="button__label">Button</span>
        </button>
  - name: Button with vertical middle alignment
    tmpl: >
        <button class="button button--default align--middle">
       		<span class="button__label">Button</span>
        </button>
        <button class="button button--default button--small align--middle">
       		<span class="button__label">Button</span>
        </button>
  - name: Button with vertical bottom alignment
    tmpl: >
        <button class="button button--default align--bottom">
       		<span class="button__label">Button</span>
        </button>
        <button class="button button--default button--small align--bottom">
       		<span class="button__label">Button</span>
        </button>
  - name: Converter
    tmpl:
      include: converter.html
*/

.button {
  $root: &;
  $button-loading-distance: 30px;
  $button-height: 40px;
  $button-height-small: 32px;

  display: inline-block;
  vertical-align: top;
  height: $button-height;
  max-width: 100%;
  min-width: 72px;
  padding: 0 16px;
  line-height: $button-height - 2;
  border: 1px solid transparent;
  border-radius: $radius-button;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  position: relative;
  text-align: center;
  transition: all .125s;
  -webkit-appearance: none;
  background: none;
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &--small {
    font-size: 13px;
    line-height: $button-height-small - 2;
    height: $button-height-small;
  }

  &--stretch {
    width: 100%;
  }

  &[disabled]:hover,
  &[disabled] {
    color: $color-steel-grey;
    border-color: $color-smoke-grey;
    background: $color-paper-white;
  }

  // styles for default and modal buttons without styles for section--negative
  &--modal,
  &--default {
    border-color: $color-silver-grey;
    @include gradient-vertical($start-color: #fff, $end-color: #f5f5f5);
    color: $color-graphite-black;

    &:hover {
      border-color: $color-steel-grey;
      @include gradient-vertical($start-color: #fff, $end-color: #e8e8e8);
    }

    &.is-active {
      border-color: $color-steel-grey;
      background: $color-steel-grey;
      color: $color-white;
    }

    &.is-selected {
      background: $color-white;
      color: $color-stone-grey;
    }

    &:focus {
      border-color: $color-telenor-blue;
    }
  }

  // default button with styles for section--negative
  &--default {
    .section--negative & {
      border-color: transparent;

      &:focus {
        border-color: $color-stroke-blackblue;
      }
    }
  }

  // button without background
  &--naked {
    color: $color-graphite-black;

    &:hover {
      color: $color-telenor-blue;
    }
    &[disabled]:hover,
    &[disabled] {
      color: $color-steel-grey;
      border-color: transparent;
      background: transparent;
    }

    .section--negative & {
      color: $color-blue-white;

      &:hover {
        color: $color-white;
      }
    }
    .section--negative &[disabled]:hover,
    .section--negative &[disabled] {
      color: $color-blue-white;
    }
  }

  // button underlined
  &--underlined {
    #{$root}__label {
      text-decoration: underline;
    }

    &:hover {
      #{$root}__label {
        text-decoration: none;
      }
    }
  }

  // blue button
  &--action {
    border-color: $color-telenor-blue-dark;
    @include gradient-vertical($start-color: #0296e5, $end-color: #038cd6);
    color: $color-white;

    &:hover {
      border-color: $color-stroke-darkblue;
      @include gradient-vertical($start-color: #0296e5, $end-color: #0282c7);
    }

    &:focus {
      border-color: $color-stroke-blackblue;
    }
  }

  // dark blue button
  &--action-dark {
    border-color: $color-stroke-darkblue;
    @include gradient-vertical($start-color: #0068a8, $end-color: #00619e);
    color: $color-white;

    &:hover {
      border-color: $color-telenor-blue-darker;
      @include gradient-vertical($start-color: #0068a8, $end-color: #005c96);
    }

    &:focus {
      border-color: $color-stroke-blackblue;
    }

    .section--negative & {
      color: $color-white;
      background-color: $color-blue-dark;
    }
    .section--negative &[disabled]:hover,
    .section--negative &[disabled] {
      color: $color-text-blue-nav;
      border-color: $color-stroke-darkblue;
      @include gradient-vertical($start-color: #0068a8, $end-color: #00619e);
    }
  }

  // green button
  &--success {
    border-color: $color-green-dark;
    @include gradient-vertical($start-color: #43c682, $end-color: #02a962);
    color: $color-white;
  }

  // yellow button
  &--accept {
    border-color: $color-yellow-dark;
    @include gradient-vertical($start-color: #fce173, $end-color: #ffb900);
    color: $color-graphite-black;

    &:hover {
      border-color: $color-yellow-dark;
      @include gradient-vertical($start-color: #fce173, $end-color: #f5b202);
    }

    &[disabled] {
      border-color: $color-smoke-grey;
      background: $color-paper-white;
      color: $color-steel-grey;
    }
    // check disabled state

    .section--negative & {
      @include gradient-vertical($start-color: #fce173, $end-color: #ffb900);
      border-color: transparent;

      &:focus {
        border-color: $color-stroke-blackblue;
      }

      &:hover {
        @include gradient-vertical($start-color: #fce173, $end-color: #f5b202);
      }
    }
    .section--negative &[disabled]:hover,
    .section--negative &[disabled] {
      @include gradient-vertical($start-color: #fce173, $end-color: #ffb900);
      border-color: transparent;
    }
  }

  // button like link
  &--link {
    border-color: transparent;
    color: $color-telenor-blue;
  }

  // button inline (without height)
  &--inline {
    height: auto;
    line-height: inherit;
    padding: 0;
    border: 0;
  }

  // loading state for button
  &[data-loading="true"],
  &[data-loaded="true"] {
    cursor: default;
  }

  // loaded state for button
  &[data-loaded="true"] {
    &,
    &:hover,
    &:focus {
      border-color: $color-green-dark;
      @include gradient-vertical($start-color: #43c682, $end-color: #02a962);

      color: $color-telenor-green;
    }
  }

  &__label,
  &__label--success {
    vertical-align: top;
    height: 100%;
    transition: top 0.2s ease;
    position: relative;
  }

  &__label {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    white-space: nowrap;

    #{$root}[data-loading="true"] &,
    #{$root}[data-loaded="true"] & {
      opacity: 0;
      top: -100%;
    }

    #{$root}[data-loaded="true"] & {
      display: block;
      width: 100%;
    }

    &--success {
      display: block;
      width: 0;
      color: $color-white;

      &:before {
        animation: buttonSuccess 0.3s cubic-bezier(.535, .235, .22, 1.63);
      }

      #{$root}[data-loaded="true"] & {
        display: inline-block;
        //width: auto;
        transform: translate(0, 0);

        &:before {
          left: 0;
          opacity: 1;
          padding-right: 5px;
        }
      }
    }
  }

  // button spinner
  &__spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 150%);
    transition: transform 0.2s ease;

    #{$root}[data-loading="true"] & {
      transform: translate(-50%, -50%);
    }

    #{$root}[data-loaded="true"] & {
      transform: translate(-50%, -150%);
    }
  }

  &__spinner-container {
    @extend %loader-spinner;

    #{$root}--action-dark &,
    #{$root}--action &,
    #{$root}--success & {
      @extend %loader-spinner--light;
    }
  }

  // icons for buttons
  [class*="icon-"] {
    &:before {
      line-height: $button-height;
    }
  }

  &--small {
    [class*="icon-"]:before {
      line-height: $button-height-small;
    }
  }

  &--inline {
    [class*="icon-"]:before {
      line-height: inherit;
    }
  }

  .icon--left,
  .icon--right {
    &:before {
      position: absolute;
      top: 0;
    }
  }

  .icon--left {
    padding-left: 18px;

    &.icon-thumb-up {
      padding-left: 25px;
    }

    &:before {
      left: 0;
    }
  }

  .icon--right {
    padding-right: 18px;

    &:before {
      right: 0;
    }
  }

  .icon-bullet:before {
    font-size: 7px;
    margin-top: -1px;
  }

  .icon-arrow-down:before {
    font-size: 10px;
  }

  .icon-arrow-next,
  .icon-arrow-prev {
    &:before {
      font-size: 10px;
      font-weight: bold;
    }
  }
}

// Button Group for 2 items
.button-group {
  .button {
    width: 40%;
    margin-right: $small-spacing-unit;

    &:first-child {
      margin-right: 0;
    }

    @include until($bp-small) {
      width: 100%;
      margin-right: 0;

      &:first-child {
        margin-bottom: $small-spacing-unit;
      }
    }
  }
}

@keyframes buttonSuccess {
  from {
    opacity: 0;
    left: -50px;
  }
  to {
    opacity: 1;
    left: 0;
  }
}

//add by wwj
.button--micro {
  font-size: 7px;
  height: 24px;
  width: 24px;
  line-height: 24px;
  padding: 0;
  min-width: auto;
}

//add by wwj
.button.button--bar {
  &:hover {
    border-color: $color-steel-grey;
    @include gradient-vertical($start-color: #fff, $end-color: #e8e8e8);
  }
}

.button.button--bar:first-child,
.form-checkbox--filter label.button--bar:first-child {
  border-radius: 2px 0 0 2px;
}

.button.button--bar:last-child,
.form-checkbox--filter label.button--bar:last-child {
  border-radius: 0 2px 2px 0;
  border-right: 1px solid #d1d1d1;
}

.button.button--bar,
.form-checkbox--filter label.button--bar {
  color: #474747;
  height: 40px;
  @include gradient-vertical($start-color: #fff, $end-color: #f5f5f5);
  display: block;
  float: left;
  border: 1px solid #d1d1d1;
  border-radius: 0;
  border-right-color: transparent;
}

//add by wwj
.button.button--bar.button--small {
  height: 32px;
}

.button--white {
  background: $color-white;
}

.button.button--bar:focus,
.form-checkbox--filter label.button--bar:focus {
  border: 1px solid #038cd6;
  @include gradient-vertical($start-color: #fff, $end-color: #e9e9e9);
}

.button [class*=" icon-"]:after, .button [class*=" icon-"]:before, .button__text, .form-checkbox--filter label [class*=" icon-"]:after, .form-checkbox--filter label [class*=" icon-"]:before, .overlay-spinner__spinner [class*=" icon-"]:after, .overlay-spinner__spinner [class*=" icon-"]:before, .paging_simple_numbers a.loadmore [class*=" icon-"]:after, .paging_simple_numbers a.loadmore [class*=" icon-"]:before {
  vertical-align: middle;
}

.button__spinner, .button__label, .button__label--success, .button__label--success:before {
  -webkit-transition: color 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), -webkit-transform 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), opacity 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63);
  transition: color 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), transform 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63), opacity 0.25s cubic-bezier(0.535, 0.235, 0.22, 1.63)
}

.button__label {
  position: relative;
  z-index: 3;
  -webkit-transition-delay: .2s;
  transition-delay: .2s
}

.button__spinner {
  //margin-left: -5px;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  opacity: 0;
  pointer-events: none;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0)
}

.no-cssanimations .button__spinner {
  left: 40%;
  top: 45%
}

.button__label--success {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  -webkit-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0)
}

[data-loading] .button, [data-loading] .form-checkbox--filter label, .form-checkbox--filter [data-loading] label {
  cursor: default
}

[data-loading] .button__label {
  opacity: 0;
  -webkit-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0);
  -webkit-transition-delay: .01s;
  transition-delay: .01s
}

.no-csstransforms3d [data-loading] .button__label {
  top: -1em
}

[data-loading] .button__spinner {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .2s;
  transition-delay: .2s
}

[data-loading] .button__label--success {
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0)
}

[data-loading] .button__label--success:before {
  opacity: 0;
  -webkit-transform: translate3d(-25px, 0, 0);
  transform: translate3d(-25px, 0, 0)
}

[data-loaded] .button, [data-loaded] .form-checkbox--filter label, .form-checkbox--filter [data-loaded] label {
  cursor: default;
  border: 1px solid #008e52;
  background: #43c682;
  @include gradient-vertical($start-color: #43c682, $end-color: #02a962);
}

.boxshadow [data-loaded] .button, .boxshadow [data-loaded] .form-checkbox--filter label, .form-checkbox--filter .boxshadow [data-loaded] label {
  box-shadow: inset 0 0 0 1px #008e52;
  border: none
}

[data-loaded] .button .button__label--success, [data-loaded] .form-checkbox--filter label .button__label--success, .form-checkbox--filter [data-loaded] label .button__label--success, [data-loaded] .button .button__label--success:before, [data-loaded] .form-checkbox--filter label .button__label--success:before, .form-checkbox--filter [data-loaded] label .button__label--success:before {
  color: #fff
}

[data-loaded] .button__label {
  opacity: 0;
  -webkit-transform: translate3d(0, 25px, 0);
  transform: translate3d(0, 25px, 0)
}

[data-loaded] .button__spinner {
  opacity: 0;
  -webkit-transform: translate3d(0, -25px, 0);
  transform: translate3d(0, -25px, 0)
}

[data-loaded] .button__label--success {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .2s;
  transition-delay: .2s
}

[data-loaded] .button__label--success:before {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition-delay: .5s;
  transition-delay: .5s
}

[data-loading] .form-item--toggle__switch [class^="icon-"], .button__spinner {
  -webkit-animation-delay: .16s;
  animation-delay: .16s;
  display: block;
  font-size: 10px;
  text-indent: -9999px;
  //margin-top: -3px
}

[data-loading] .form-item--toggle__switch [class^="icon-"],
.button__spinner,
[data-loading] .form-item--toggle__switch [class^="icon-"]:before,
[data-loading] .form-item--toggle__switch .form-item .ws-range .ws-range-thumb,
.form-item .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb,
[data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb,
.form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb,
[data-loading] .form-item--toggle__switch .form-item__row .form-comp:before,
.form-item__row [data-loading] .form-item--toggle__switch .form-comp:before,
[data-loading] .form-item--toggle__switch .error-summary__list li:before,
.error-summary__list [data-loading] .form-item--toggle__switch li:before,
[data-loading] .form-item--toggle__switch .button--flow:before,
[data-loading] .form-item--toggle__switch .button--icon:before,
[data-loading] .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] .form-item--toggle__switch span:after, [data-loading] .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] .form-item--toggle__switch .status-dot--check:before, [data-loading] .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .bullet-link:before, [data-loading] .form-item--toggle__switch .button--link:before, [data-loading] .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] .form-item--toggle__switch .fill--half:after, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .flexnav__toggler:after, .button__spinner:before, [data-loading] .form-item--toggle__switch [class^="icon-"]:after, .button__spinner:after {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: loader-white 1.8s infinite ease-in-out;
  animation: loader-white 1.8s infinite ease-in-out;
  border-radius: 50%;
  height: 5px;
  width: 5px
}

/*.no-cssanimations [data-loading] .form-item--toggle__switch [class^="icon-"], [data-loading] .form-item--toggle__switch .no-cssanimations [class^="icon-"], .no-cssanimations .button__spinner {
  background-image: url("../assets/_framework/graphics/ajax-loader.gif"), none;
  width: 43px;
  height: 11px;
  border-radius: 0
}*/

[data-loading] .form-item--toggle__switch [class^="icon-"]:before, [data-loading] .form-item--toggle__switch .form-item .ws-range .ws-range-thumb, .form-item .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-item__row .form-comp:before, .form-item__row [data-loading] .form-item--toggle__switch .form-comp:before, [data-loading] .form-item--toggle__switch .error-summary__list li:before, .error-summary__list [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .button--flow:before, [data-loading] .form-item--toggle__switch .button--icon:before, [data-loading] .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] .form-item--toggle__switch span:after, [data-loading] .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] .form-item--toggle__switch .status-dot--check:before, [data-loading] .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .bullet-link:before, [data-loading] .form-item--toggle__switch .button--link:before, [data-loading] .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] .form-item--toggle__switch .fill--half:after, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .flexnav__toggler:after, .button__spinner:before, [data-loading] .form-item--toggle__switch [class^="icon-"]:after, .button__spinner:after {
  content: "";
  position: absolute;
  top: 0
}

[data-loading] .form-item--toggle__switch [class^="icon-"]:before, [data-loading] .form-item--toggle__switch .form-item .ws-range .ws-range-thumb, .form-item .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-search .ws-range [data-loading] .form-item--toggle__switch .ws-range-thumb, [data-loading] .form-item--toggle__switch .form-item__row .form-comp:before, .form-item__row [data-loading] .form-item--toggle__switch .form-comp:before, [data-loading] .form-item--toggle__switch .error-summary__list li:before, .error-summary__list [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .button--flow:before, [data-loading] .form-item--toggle__switch .button--icon:before, [data-loading] .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] .form-item--toggle__switch span:after, [data-loading] .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] .form-item--toggle__switch .status-dot--check:before, [data-loading] .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] .form-item--toggle__switch li:before, [data-loading] .form-item--toggle__switch .bullet-link:before, [data-loading] .form-item--toggle__switch .button--link:before, [data-loading] .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] .form-item--toggle__switch .fill--half:after, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.previous:before, [data-loading] .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.previous:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .previous.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .pager--default .pager__button.next:before, .svg .pager--default [data-loading] .form-item--toggle__switch .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .pager__button.next:before, [data-loading] .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] .form-item--toggle__switch span.next:before, [data-loading] .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] .form-item--toggle__switch .next.paginate_button:before, [data-loading] .form-item--toggle__switch .flexnav__toggler:after, .button__spinner:before {
  left: -8px
}

[data-loading] .form-item--toggle__switch [class^="icon-"]:after, .button__spinner:after {
  left: 8px;
  -webkit-animation-delay: .32s;
  animation-delay: .32s
}

.button__spinner, .button__spinner:before, .button__spinner:after {
  height: 10px;
  width: 10px
}

.button__spinner:before {
  left: -15px
}

.button__spinner:after {
  left: 15px
}

[data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class^="icon-"], [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class^="icon-"]:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-item .ws-range .ws-range-thumb, .form-item .ws-range [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .ws-range-thumb, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-search .ws-range .ws-range-thumb, .form-search .ws-range [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .ws-range-thumb, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-item__row .form-comp:before, .form-item__row [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .form-comp:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .error-summary__list li:before, .error-summary__list [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--flow:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--icon:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--naked span:after, .button--naked [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span:after, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class*=" status-icon--"]:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .status-dot--check:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--default li:before, .fontface .list--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .text--content ul li:before, .fontface .text--content ul [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .text--content .fontface ul li:before, .text--content .fontface ul [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--footer li:before, .fontface .list--footer [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check li:before, .fontface .list--check [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--dark li:before, .fontface .list--check--dark [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--grey li:before, .fontface .list--check--grey [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--white li:before, .fontface .list--check--white [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--check--grey-dark li:before, .fontface .list--check--grey-dark [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface .list--negative li:before, .fontface .list--negative [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface [class^="list--check"] li:before, .fontface [class^="list--check"] [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fontface [class*=" list--check"] li:before, .fontface [class*=" list--check"] [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch li:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .bullet-link:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .button--link:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .bullet-link--reverse:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .fill--half:after, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .pager__button.previous:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.previous:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .previous.pager__elipsis:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .previous.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.previous:before, .paging_simple_numbers span .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers span span.previous:before, .svg .paging_simple_numbers span [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.previous:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .previous.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .previous.paginate_button:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .previous.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .pager__button.next:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .pager__button.next:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .pager__button.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .pager--default .next.pager__elipsis:before, .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .next.pager__elipsis:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.pager__elipsis:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers span .svg .pager--default span.next:before, .paging_simple_numbers span .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers span span.next:before, .svg .paging_simple_numbers span [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch span.next:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .paging_simple_numbers .svg .pager--default .next.paginate_button:before, .paging_simple_numbers .svg .pager--default [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .svg .paging_simple_numbers .next.paginate_button:before, .svg .paging_simple_numbers [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .next.paginate_button:before, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch .flexnav__toggler:after, [data-loading] [data-toggle-value="off"]:checked ~ .form-item--toggle__switch [class^="icon-"]:after {
  -webkit-animation-name: loader-grey;
  animation-name: loader-grey
}

.button .icon, .form-checkbox--filter label .icon {
  margin-right: .5em
}

.button .icon:before, .form-checkbox--filter label .icon:before {
  font-size: 18px
}

.button.button--small .icon:before, .form-checkbox--filter label .icon:before {
  font-size: 14px
}

.button .icon--left:before, .form-checkbox--filter label .icon--left:before {
  margin-right: 5px
}

.button .icon--right:before, .form-checkbox--filter label .icon--right:before {
  margin-left: 5px
}

.button.button--no-label .icon, .form-checkbox--filter label.button--no-label .icon {
  margin-right: 0
}

.button__spinner .spinner-holder, .progress-spinner--align {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.button__spinner .spinner-holder, .progress-spinner, .tooltip__spinner {
  position: relative;
  display: inline-block;
  width: 5em;
  height: 5em;
  font-size: 4px;
  overflow: hidden;
}

.button__spinner .spinner-holder .spinner-container, .progress-spinner .spinner-container, .tooltip__spinner .spinner-container {
  -webkit-animation: progress-spinner-animation 1s infinite steps(12);
  animation: progress-spinner-animation 1s infinite steps(12);
  position: relative;
  display: inline-block;
  width: 5em;
  height: 5em;
  text-indent: 999em;
}

.button__spinner .spinner-holder .spinner-container em:after, .button__spinner .spinner-holder .spinner-container em:before, .button__spinner .spinner-holder .spinner-container span:after, .button__spinner .spinner-holder .spinner-container span:before, .button__spinner .spinner-holder .spinner-container:after, .button__spinner .spinner-holder .spinner-container:before, .progress-spinner .spinner-container em:after, .progress-spinner .spinner-container em:before, .progress-spinner .spinner-container span:after, .progress-spinner .spinner-container span:before, .progress-spinner .spinner-container:after, .progress-spinner .spinner-container:before, .tooltip__spinner .spinner-container em:after, .tooltip__spinner .spinner-container em:before, .tooltip__spinner .spinner-container span:after, .tooltip__spinner .spinner-container span:before, .tooltip__spinner .spinner-container:after, .tooltip__spinner .spinner-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 2.3em;
  width: .4em;
  height: 1.4em;
  border-radius: 45%;
  box-shadow: 0 3.6em #eee;
  -webkit-transform-origin: 50% 2.5em;
  transform-origin: 50% 2.5em;
}