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