/*
@styleguide

@title Button


Use the button classes on and `<a>`, `<button>`, `<input>` elements.

<h3 class="psg-h3">Buttons - Medium</h3>


<div class="psg-subsection">
  <button type="button" class="btn btn-lg">Call to action</button>

  <button type="button" class="btn btn-lg blue">Call to action</button>

</div>

<div class="psg-subsection">
  <h3 class="psg-h3">Buttons - Small</h3>

  <button type="button" class="btn btn-sm">Call to action</button>

  <button type="button" class="btn btn-sm blue">Call to action</button>
</div>


<div class="psg-subsection">

  <h3 class="psg-h3">Buttons - Dropdown</h3>

  <div class="dropdown">
    <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Dropdown
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

  <div class="dropdown dropdown-single">
    <button class="btn btn-sm dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
    </div>
  </div>

  <button type="button" class="btn btn-default btn-sm btn-icon">
    <i class="icon-download"></i>
  </button>

  <button type="button" class="btn btn-default btn-sm btn-icon blue">
    <i class="icon-download"></i>
  </button>
  
  <button type="button" class="btn btn-default btn-sm btn-icon">
    <i class="icon-search"></i>
  </button>

  <button type="button" class="btn btn-default btn-sm btn-icon">
    <i class="icon-plus"></i>
  </button>

  

  
</div>

*/




/*Theme style starts--------------------------------------------------------*/


/* Buttons
// ============================== 

   Default Button styles & shit.
   you can inherit into your own class by using: 
   @extend %button;

// ============================== */

%button {
  border: none;
  border-radius: $borderradius;
  /*box-shadow: none;*/
   
  color: $primarycolour;
  cursor: pointer;
  display: inline-block;
  
  font-family: $primaryfontbold;
  font-weight: 400;
  letter-spacing: 0.03rem;
  text-transform: uppercase;
  /*margin-bottom: calc($controlmargin / 2);*/ /*10px*/

  transition: all 0.25s;
  position: relative;
  
  /* burnt orange instead of black ? */
  &:hover {
    background: mix($yellow, $burntorange, 75%);
    /*transform: translateY(-1px);*/
  }

  &:active, &:focus {
    outline: none;
  }
}

/* Text shadow on text maybe? more readable 
.btn-lg, .btn-sm{
  text-shadow: 0 1px 1px rgba(165, 133, 51, 0.62);
  &.blue{
    text-shadow: 0 1px 1px rgba(51, 86, 165, 0.62);
  }
}*/

.btn-lg{
  @mixin btn-lg;
  background: $yellow;
  color: $white;
  &.blue{
    background: $blue;

    &:hover {
      background: mix($blue, $black, 80%);
    }
  }
}

.btn-sm{
  @mixin btn-sm;
  background: $yellow;
  color: $white;
  &.blue{
    background: $blue;
    &:hover {
      background: mix($blue, $black, 80%);
    }
  }
}

.btn-link{
  text-transform: none;
  font-size: 0.875em; /*14px*/
  text-decoration: underline;

  &:hover{
    background: none;   
    box-shadow: none;
    color: $darkgrey;
  }
}


%button--positive {
  background: transparent !important;
  color: $positivecolour !important;
  border-color: $positivecolour !important;

  &:hover {
    background: mix($positivecolour, $white, 30%) !important;

    &:before {
      opacity: 0;
    }
  }
}


%button--negative {
  background: $negativecolour !important;
  color: $white !important;

  &:hover {
    background: mix($negativecolour, $white, 70%) !important;

    &:before {
      opacity: 0;
    }
  }
}


.btn-primary,
.btn, .button {
  @extend %button;
}

.btn-positive, .button--positive {
  @extend %button--positive;
}


.btn-negative, .button--negative {
  @extend %button--negative;
}

.btn-group{
  .btn-radio{
    background: $grey;
    color: $darkgrey;
    text-transform: none;

    &.btn{
      margin-left: calc($controlmargin / 2);
      border-radius: $borderradius !important;

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

    &:hover{
      background-color: $black;
    }

    &.active, 
    &:active{
        color: #fff;
        background: $primarycolour;
        border: none;

        &:hover{
        background: $primarycolour;
      }
    }
  }
}


/*%button--default {
  background: $grey;
  color: $black;
  &:hover {
    background: mix($darkgrey, $black, 30%);
    color: $white;
  }
}
*/




/*%button--secondary {
  background: $secondarycolour !important;
  color: $white !important;

  &:hover {
    background: mix($secondarycolour, $white, 77%) !important;

    &:before {
      opacity: 0;
    }
  }
}

.btn-secondary, .button--secondary {
  @extend %button--secondary;
}*/



/*%button--info {
  background: transparent !important;
  border-color: $highlightcolour !important;
  
  color: $highlightcolour !important;

  &:hover {
    background: mix($highlightcolour, $white, 30%) !important;

    &:before {
      opacity: 0;
    }
  }
}

%button--warning {
  background: $warningcolour !important;
  color: $white !important;

  &:hover {
    background: mix($warningcolour, $white, 70%) !important;

    &:before {
      opacity: 0;
    }
  }
}
*/

/*
%button--highlight {
  background: $highlightcolour !important;
  color: $white !important;

  &:hover {
    background: mix($highlightcolour, $white, 70%) !important;

    &:before {
      opacity: 0;
    }
  }
}

%button--highlight-hover {
  background: mix($highlightcolour, $white, 30%) !important;
}
*/





/*.btn-default, .button--default {
  @extend %button--default;
}*/




/*
.btn-highlight, .button--highlight {
  @extend %button--info;
}*/

/*.btn-sm, .button--small {
  @extend %button--small;
}
*/



.btn-text{
  background: 0;
  border: 0;
  font-family: $heavyweight;
  color: $primarycolour;
  font-size: 14px;
  letter-spacing: -0.01em;
  float: none;
  vertical-align: top;
  padding-top: 0;

  &:hover{
    background: none;
    color: $highlightcolour;
    box-shadow: none;
  }
  &:focus{
    border-color: transparent;
    outline: none;
  }
  i{
    font-size: 32px;
    margin: 0 5px 0 7px;
    position: relative;
    top: 9px;
  }
}

/* Button Ripple */
.ripple {
  width: 5%;
  height: 12%;
  background: #fff;
  opacity: 0;
  position: absolute;
  top: 14px;
  left: 50%;
  margin-left: -5px;
  transform-origin: center center;
  transition-timing-function: ease-out;
  border-radius: 50%;
  transition: 0.9s all;
}


/*Dropdown styles*/


.dropdown{
  display: inline-block;

  .btn{
    margin-bottom: 0;
  }
  .dropdown-menu{
    background: $darkgreyblue;
    margin: 0;
    padding: 0;
    border-radius: $borderradius;
    border: none;

    a{
      color:$white;
    }
    .dropdown-item{
      @mixin btn-sm;
      font-size: .9rem;

      &:hover, &:focus{
        background: $blue;
      }
    }
  }

  .dropdown-toggle{
    &:after{
      border-top: .5em solid;
      border-right: .4em solid transparent;
      border-left: .4em solid transparent;
    } 
  }
  
  &.dropdown-single{
    .btn-sm{
      @mixin btn-icon;
    }
  }
}


/*Icno button - buttons that contain single icon*/

.btn-icon{
  @mixin btn-icon;

  i{
    color: $white;
  }
}


/*.btn > .dropdown-toggle {
  padding-right: 8px;
  padding-left: 8px;
  border-width: 0;
  border-left-width: 1px;
  margin-bottom: 0;
}*/

/*override border colour on active*/
/*.open > .btn-secondary.dropdown-toggle, .open > .btn-secondary.dropdown-toggle:hover{
  border-color: rgba(255,255,255,0.4);
}*/


/*.btn-dropdown{
  padding-right: 2em;

  .icon{
    display: inline-block;
    vertical-align: top;
    zoom: 1;
    text-indent: -5000px;
    background: url('../../../public/img/svg/icon_dropdown.svg') right center no-repeat;
    width: 11px;
    height: 8px;
    vertical-align: middle;
    position: absolute;
    top: 32%;
    right: .55em;
  }


  .dropdown-toggle{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    &:hover{
      transform: none;
      box-shadow: none;
      background: rgba(256,255,255,0.2);
    }
    &:after{
      margin-top: -0.1rem;
      margin-left: .15rem;
      border-top: .37em solid;
      border-right: .33em solid transparent;
      border-left: .33em solid transparent;
    }
  }
  
  .dropdown-item, .dropdown-menu{
      text-transform: none;
   }
  
  .btn-secondary&:hover{
    .dropdown-toggle{
      background: mix($highlightcolour, $white, 80%) !important;
    }
  }
  .btn-default&:hover{
    .dropdown-toggle{
      background: mix($darkgrey, $white, 80%) !important;
    }
  }
}*/





/*Progress Button Styles http://tympanus.net/codrops/2013/12/12/progress-button-styles/ */

*, *:after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* General styles for all types of buttons */
.progress-button {
  /* position: relative;
  display: inline-block;
  padding: 0 60px;
  outline: none;
  border: none;
  background: #1d9650;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 1em;
  line-height: 4;*/
  /*height: 36px;*/
}

.progress-button[disabled],
.progress-button[disabled].state-loading {
  cursor: default;
}

.progress-button .content {
  position: relative;
  display: block;
}

.progress-button .content::before,
.progress-button .content::after  {
  position: absolute;
  right: 7px;
  color: $primarycolour;
  font-family: "icomoon";
  opacity: 0;
  -webkit-transition: opacity 0.3s 0.3s;
  transition: opacity 0.3s 0.3s;
}

.progress-button .content::before {
  content: "\e913"; /* Checkmark for success */
}

.progress-button .content::after {
  content: "\e914"; /* Cross for error */
}

.progress-button.state-success .content::before,
.progress-button.state-error .content::after {
  opacity: 1;
}

.notransition {
  -webkit-transition: none !important;
  transition: none !important;
}

.progress-button .progress {
  /*background: #148544;*/
  background: mix($yellow, $black, 85%);

}

.progress-button .progress-inner {
  position: absolute;
  left: 0;
  /*background: #0e7138;*/

  background: mix($yellow, $black, 20%);
}

.progress-button[data-horizontal] .progress-inner {
  top: 0;
  width: 0;
  height: 100%;
  -webkit-transition: width 0.3s, opacity 0.3s;
  transition: width 0.3s, opacity 0.3s;
}

.progress-button[data-vertical] .progress-inner {
  bottom: 0;
  width: 100%;
  height: 0;
  -webkit-transition: height 0.3s, opacity 0.3s;
  transition: height 0.3s, opacity 0.3s;
}

/* Necessary 3d styles for buttons with perspective */

.progress-button[data-perspective] {
  position: relative;
  display: inline-block;
  padding: 0;
  background: transparent;
  -webkit-perspective: 900px;
  perspective: 900px;
}

.progress-button[data-perspective] .content {
 /* padding: 0 60px;
  background: #1d9650;*/
  @mixin btn-lg;
  padding-left: calc(@font-size * 2.3);
  padding-right: calc(@font-size * 2.3);
  background: $yellow;
}

.progress-button[data-perspective] .progress-wrap {
  display: block;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.progress-button[data-perspective] .content,
.progress-button[data-perspective] .progress {
  outline: 1px solid rgba(0,0,0,0); /* Smoothen jagged edges in FF */
}

/* Individual styles */
/* Choose the effect(s) you want, delete the rest */

/* Fill horizontal */
/* ====================== */

.progress-button[data-style="fill"][data-horizontal] {
  overflow: hidden;
}

.progress-button[data-style="fill"][data-horizontal] .content {
  z-index: 10;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.progress-button[data-style="fill"][data-horizontal] .content::before,
.progress-button[data-style="fill"][data-horizontal] .content::after {
  top: 100%;
  right: auto;
  left: 50%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.progress-button[data-style="fill"][data-horizontal].state-success .content,
.progress-button[data-style="fill"][data-horizontal].state-error .content {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* Fill vertical */
/* ====================== */

.progress-button[data-style="fill"][data-vertical] {
  overflow: hidden;
}

.progress-button[data-style="fill"][data-vertical] .content {
  z-index: 10;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
}

.progress-button[data-style="fill"][data-vertical] .content::before,
.progress-button[data-style="fill"][data-vertical] .content::after {
  top: 100%;
  right: auto;
  left: 50%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.progress-button[data-style="fill"][data-vertical].state-success .content,
.progress-button[data-style="fill"][data-vertical].state-error .content {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* Shrink horizontal */
/* ====================== */

.progress-button[data-style="shrink"] { /* common for horizontal and vertical */
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.progress-button[data-style="shrink"][data-horizontal] .content {
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

.progress-button[data-style="shrink"][data-horizontal] .content::before,
.progress-button[data-style="shrink"][data-horizontal] .content::after {
  top: 100%;
  right: auto;
  left: 50%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.progress-button[data-style="shrink"][data-horizontal].state-loading {
  -webkit-transform: scaleY(0.3);
  transform: scaleY(0.3);
}

.progress-button[data-style="shrink"][data-horizontal].state-loading .content {
  opacity: 0;
}

.progress-button[data-style="shrink"][data-horizontal].state-success .content,
.progress-button[data-style="shrink"][data-horizontal].state-error .content {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* Shrink vertical */
/* ====================== */

.progress-button[data-style="shrink"][data-vertical] .content {
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}

.progress-button[data-style="shrink"][data-vertical] .content::before,
.progress-button[data-style="shrink"][data-vertical] .content::after {
  top: 100%;
  right: auto;
  left: 50%;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.progress-button[data-style="shrink"][data-vertical].state-loading {
  -webkit-transform: scaleX(0.1);
  transform: scaleX(0.1);
}

.progress-button[data-style="shrink"][data-vertical].state-loading .content {
  opacity: 0;
}

.progress-button[data-style="shrink"][data-vertical].state-success .content,
.progress-button[data-style="shrink"][data-vertical].state-error .content {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

/* Rotate bottom 3d */
/* ====================== */

.progress-button[data-style="rotate-angle-bottom"] .progress {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  /*box-shadow: 0 -1px 0 #148544; /* fix the blurriness that causes a gap */
  box-shadow: 0 -1px 0 $white; 
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}

.progress-button[data-style="rotate-angle-bottom"].state-loading .progress-wrap {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

/* Rotate top 3d */
/* ====================== */

.progress-button[data-style="rotate-angle-top"] .progress {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  box-shadow: 0 1px 0 #148544; /* fix the blurriness that causes a gap */
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
}

.progress-button[data-style="rotate-angle-top"].state-loading .progress-wrap {
  -webkit-transform: rotateX(-45deg);
  transform: rotateX(-45deg);
}

/* Rotate left 3d */
/* ====================== */

.progress-button[data-style="rotate-angle-left"] .progress {
  position: absolute;
  top: 0;
  right: 100%;
  width: 20px;
  height: 100%;
  box-shadow: 1px 0 0 #148544; /* fix the blurriness that causes a gap */
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.progress-button[data-style="rotate-angle-left"].state-loading .progress-wrap {
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}

/* Rotate right 3d */
/* ====================== */

.progress-button[data-style="rotate-angle-right"] .progress {
  position: absolute;
  top: 0;
  left: 100%;
  width: 20px;
  height: 100%;
  box-shadow: -1px 0 0 #148544; /* fix the blurriness that causes a gap */
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
}

.progress-button[data-style="rotate-angle-right"].state-loading .progress-wrap {
  -webkit-transform: rotateY(-45deg);
  transform: rotateY(-45deg);
}

/* Rotate side down 3d */
/* ====================== */

.progress-button[data-style="rotate-side-down"] .progress {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.progress-button[data-style="rotate-side-down"].state-loading .progress-wrap {
  -webkit-transform: rotateX(90deg) translateZ(10px);
  transform: rotateX(90deg) translateZ(10px);
}

/* Rotate side up 3d */
/* ====================== */

.progress-button[data-style="rotate-side-up"] .progress {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
  height: 20px;
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.progress-button[data-style="rotate-side-up"].state-loading .progress-wrap {
  -webkit-transform: rotateX(-90deg) translateZ(10px);
  transform: rotateX(-90deg) translateZ(10px);
}

/* Rotate side left 3d */
/* ====================== */

.progress-button[data-style="rotate-side-left"] .progress-wrap {
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.progress-button[data-style="rotate-side-left"] .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 100%;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.progress-button[data-style="rotate-side-left"].state-loading .progress-wrap {
  -webkit-transform: translateX(50%) rotateY(90deg) translateZ(10px);
  transform: translateX(50%) rotateY(90deg) translateZ(10px);
}

/* Rotate side right 3d */
/* ====================== */

.progress-button[data-style="rotate-side-right"] .progress-wrap {
  -webkit-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
}

.progress-button[data-style="rotate-side-right"] .progress {
  position: absolute;
  top: 0;
  left: 100%;
  width: 20px;
  height: 100%;
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
  -webkit-transform-origin: 0 50%;
  transform-origin: 0 50%;
}

.progress-button[data-style="rotate-side-right"].state-loading .progress-wrap {
  -webkit-transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
  transform: translateX(-50%) rotateY(-90deg) translateZ(10px);
}

/* Rotate back 3d */
/* ====================== */

.progress-button[data-style="rotate-back"] .progress-wrap {
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}

.progress-button[data-style="rotate-back"] .content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.progress-button[data-style="rotate-back"] .progress {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  -webkit-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.progress-button[data-style="rotate-back"].state-loading .progress-wrap {
  -webkit-transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);
  transform: rotateX(180deg) scaleX(0.6) scaleY(0.3);
}

/* flip open 3d */
/* ====================== */

.progress-button[data-style="flip-open"] .content {
  z-index: 10;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
  -webkit-transform-origin: 50% 0;
  transform-origin: 50% 0;
}

.progress-button[data-style="flip-open"] .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.progress-button[data-style="flip-open"].state-loading .content {
  -webkit-transform: rotateX(45deg);
  transform: rotateX(45deg);
}

/* slide down */
/* ====================== */

.progress-button[data-style="slide-down"] {
  padding: 0;
  overflow: visible;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.progress-button[data-style="slide-down"] .content {
  z-index: 10;
  padding: 0 60px;
  background: #1d9650;
}

.progress-button[data-style="slide-down"] .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.progress-button[data-style="slide-down"].state-loading .progress {
  -webkit-transform: translateY(10px);
  transform: translateY(10px);
}

/* move-up */
/* ====================== */

.progress-button[data-style="move-up"] {
  padding: 0;
  overflow: visible;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.progress-button[data-style="move-up"] .content {
  z-index: 10;
  padding: 0 60px;
  background: #1d9650;
  -webkit-transition: -webkit-transform 0.2s;
  transition: transform 0.2s;
}

.progress-button[data-style="move-up"] .progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.progress-button[data-style="move-up"].state-loading .content {
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
}

/* top-line */
/* ====================== */

.progress-button[data-style="top-line"] .progress-inner {
  height: 3px;
}

.progress-button[data-style="top-line"] .content::before,
.progress-button[data-style="top-line"] .content::after {
  right: auto;
  left: 100%;
  margin-left: 25px;
}

/* lateral-lines */
/* ====================== */

.progress-button[data-style="lateral-lines"] .progress-inner {
  width: 100%;
  border-right: 3px solid #0e7138;
  border-left: 3px solid #0e7138;
  background: transparent;
}

.progress-button[data-style="lateral-lines"] .content::before,
.progress-button[data-style="lateral-lines"] .content::after {
  right: auto;
  left: 100%;
  margin-left: 25px;
}









/*Tooltips*/