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