1.confirm-wrapper {
2  position: relative;
3  overflow: hidden;
4  border-radius: 2px;
5  box-shadow: $box-shadow, $box-shadow-middle;
6}
7
8.confirm {
9  transition: transform $speed;
10  padding-top: 2px;
11}
12
13.show-confirm {
14  transform: translateX(-100%);
15  transition: transform $speed;
16}
17
18.confirm.show-confirm {
19  visibility: hidden;
20}
21
22.confirm-overlay {
23  position: absolute;
24  background-color: white;
25  top: 0;
26  left: 100%;
27  width: 100%;
28}
29
30.confirm,
31.confirm-overlay {
32  button.link,
33  a {
34    background-color: $white;
35    color: $menu-item-color;
36
37    &:hover {
38      background-color: $menu-item-hover-background-color;
39      color: $menu-item-hover-color;
40    }
41
42    &.is-active {
43      background-color: $menu-item-active-background-color;
44      color: $menu-item-active-color;
45    }
46
47    &.is-destroy {
48      color: $red;
49
50      &:hover {
51        background-color: $red;
52        color: $white;
53      }
54    }
55
56    &.disabled {
57      opacity: 0.5;
58
59      &:hover {
60        background: transparent;
61        cursor: default;
62      }
63    }
64  }
65}
66
67.confirm-action span .button {
68  display: block;
69  margin: 0.25rem auto;
70  width: 95%;
71}
72
73.confirm-action > span {
74  @include from($tablet) {
75    align-items: center;
76    display: flex;
77  }
78
79  * {
80    margin-left: $size-8;
81  }
82
83  .confirm-action-text:not(.is-block) {
84    text-align: right;
85
86    @include until($tablet) {
87      display: block;
88      margin-bottom: $size-8;
89      text-align: left;
90    }
91  }
92  .confirm-action-text.is-block {
93    text-align: left;
94  }
95}
96
97.confirm-action-message {
98  margin: 0;
99
100  .message {
101    border: 0;
102    font-size: $size-8;
103    line-height: 1.33;
104    margin: 0;
105  }
106
107  .message-title {
108    font-size: 1rem;
109  }
110
111  .hs-icon {
112    color: $yellow;
113  }
114
115  p {
116    font-weight: $font-weight-semibold;
117    margin-left: $spacing-l;
118    padding-left: $spacing-xxs;
119    padding-top: 0;
120  }
121
122  .confirm-action-options {
123    border-top: $light-border;
124    display: flex;
125    padding: $spacing-xxs;
126
127    .link {
128      flex: 1;
129      text-align: center;
130      width: auto;
131      padding: $spacing-xs;
132    }
133  }
134}
135