1
2// inline confirmation message
3.inline__confirm {
4  position: absolute;
5  top: 0;
6  right: 0;
7  transform: translateY(-103%);
8  width: 100%;
9  height: 100%;
10  margin-left: -1.8em;
11  z-index: 5;
12  background: $darkbg__primary;
13  color: $white;
14  padding: 2em 2em 1.55em 2em;
15  overflow: hidden;
16  @include fastTransition-all;
17  &.active {
18    transform: translateY(0);
19    @include fastTransition-all;
20  }
21}
22
23// Power confirmation buttons
24.inline__confirm-buttons {
25  position: absolute;
26  top: 50%;
27  right: 1em;
28  transform: translateY(-50%);
29  .btn-primary {
30    background: transparent;
31    border: 2px solid $white;
32    padding: 1em 2.2em;
33    margin: 0 10px;
34    border-radius: 4px;
35    &:focus,
36    &:hover {
37      background: $primebtn__bg;
38      border: 2px solid $primebtn__bg;
39    }
40  }
41  @include mediaQuery(medium) {
42    float: right;
43  }
44}
45
46// confirmation message
47.inline__confirm-message {
48  display: inline-block;
49  max-width: 50%;
50}
51
52// Power confirmation message icon
53.inline__confirm-message i::before {
54  content: '\26A0';
55  color: $status-warn;
56  display: inline-block;
57  font-size: 2em;
58  vertical-align: middle;
59  font-style: normal;
60  margin-right: 15px;
61}