1  @import "../../../resources/styles/vars.scss";
 2  
 3  .baseButtonStyle {
 4    background-color: $color-accent-700;
 5  
 6    border: none;
 7    border-radius: $border-radius;
 8    padding: $padding-small;
 9    cursor: pointer;
10  
11    color: $color-text-inverted;
12  
13    width: 160px;
14    height: 40px;
15    font-size: medium;
16    font-weight: bold;
17  
18    &:hover {
19      background-color: $color-accent-800;
20    }
21  
22    &:active {
23      background-color: $color-accent-900;
24    }
25  }
26  
27  .button-primary {
28    background-color: $color-primary-500;
29  
30    &:hover {
31      background-color: $color-primary-600;
32    }
33  
34    &:active {
35      background-color: $color-primary-400;
36    }
37  }
38  
39  .button-secondary {
40    background-color: $color-secondary-500;
41    color: $color-text;
42  
43    &:hover {
44      background-color: $color-secondary-300;
45    }
46  
47    &:active {
48      background-color: $color-secondary-100;
49    }
50  }
51  
52  .iconButton {
53    border-radius: 50%;
54    width: 2em;
55    height: 2em;
56  }