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