1button, .button, .submit {
2  font-size: 1em;
3  @include fontFamilyBold;
4  text-transform: none;
5  border-radius: 3px;
6  padding: .5rem 2rem .5rem;
7  height: auto;
8  border: 0;
9  overflow: hidden;
10  &:hover {
11    cursor: pointer;
12  }
13  &.disabled {
14    opacity: 0.2;
15    color: $btn__disabled-txt;
16    &:hover {
17      cursor: default;
18      background: transparent;
19      text-decoration: none;
20    }
21  }
22}
23
24.btn-primary {
25  color: $primebtn__text;
26  background: $primebtn__bg;
27  min-height: 40px;
28  &:hover {
29    background: lighten($primebtn__bg, 8%);
30    @include fastTransition-all;
31  }
32  &.disabled {
33    background: $btn__disabled-bg;
34    color: $btn__disabled-txt;
35    @include fastTransition-all;
36    &:hover {
37      cursor: default;
38    }
39  }
40  i { //button symbol
41    font-style: normal;
42    text-transform: none;
43    font-size: 1.5em;
44    transform: rotate(80deg);
45    display: inline-block;
46  }
47  img{
48    width: 18px;
49    height: 18px;
50    display: inline-block;
51  }
52}
53.btn-secondary {
54  color: $secbtn__text;
55  background: transparent;
56  border: 2px solid $secbtn__border;
57  min-height: 40px;
58  &:hover {
59    background: $lightbg__accent;
60    cursor: pointer;
61    background: $secbtn__bg;
62    @include fastTransition-all;
63  }
64  &.disabled {
65    border: 2px solid $lightgrey;
66    background: $btn__disabled-bg;
67    @include fastTransition-all;
68    &:hover {
69      background: $btn__disabled-bg;
70    }
71  }
72  i { // button symbol
73    font-style: normal;
74    font-weight: 400;
75    text-transform: none;
76    font-size: 1.5em;
77    transform: rotate(80deg) translate(-2px);
78    display: inline-block;
79    vertical-align: middle;
80  }
81  img{
82    width: 18px;
83    height: 18px;
84    display: inline-block;
85    margin-right: .5em;
86    margin-top: -3px;
87  }
88}
89
90.btn-pop-out {
91  position: relative;
92  padding: 0 0 1em 2em;
93  color: $black;
94  &:hover {
95    text-decoration: underline;
96  }
97  &:before {
98    content: '';
99    position: absolute;
100    left: 0;
101    top: 3px;
102    width: 25px;
103    height: 20px;
104    display: inline-block;
105    border: 1px solid $black;
106    border-top: 4px solid $black;
107  }
108  &:after {
109    content: '\2794';
110    position: absolute;
111    transform: rotate(-45deg);
112    font-size: .9em;
113    font-weight: 700;
114    vertical-align: middle;
115    display: inline-block;
116    left: 11px;
117    top: 4px;
118  }
119}