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