1/*Internet Explorer 11 compatibility workaround - IE does not support CSS variables */
2
3@media all and (-ms-high-contrast: none),
4(-ms-high-contrast: active) {
5    .pf-c-tile {
6        position: relative;
7        display: -ms-inline-grid;
8        display: inline-grid;
9        padding: 1.5rem 1.5rem 1.5rem 1.5rem;
10        margin-bottom: 0.25rem;
11        text-align: center;
12        cursor: pointer;
13        background-color: #fff;
14        grid-template-rows: -webkit-min-content;
15        -ms-grid-rows: -webkit-min-content;
16        -ms-grid-rows: min-content;
17        grid-template-rows: min-content;
18    }
19    .pf-c-tile::before {
20        position: absolute;
21        top: 0;
22        right: 0;
23        bottom: 0;
24        left: 0;
25        pointer-events: none;
26        content: "";
27        border: 1px solid #d2d2d2;
28        border-radius: 3px;
29    }
30    .pf-c-tile:hover {
31        border: 1px solid #06c;
32        border-radius: 3px;
33    }
34    .pf-c-tile:hover .pf-c-tile__title,
35    .pf-c-tile:hover .pf-c-tile__icon {
36        color: #06c;
37    }
38    .pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__title,
39    .pf-c-tile__input:checked + .pf-c-tile .pf-c-tile__icon {
40        color: #06c;
41    }
42    .pf-c-tile__input:checked + .pf-c-tile {
43        border: 2px solid #06c;
44        border-radius: 3px;
45    }
46    .pf-c-tile.pf-m-disabled {
47        pointer-events: none;
48    }
49    .pf-c-tile__header {
50        display: flex;
51        align-items: center;
52        justify-content: center;
53    }
54    .pf-c-tile__header.pf-m-stacked {
55        flex-direction: column;
56        justify-content: initial;
57    }
58    .pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
59        display: flex;
60        align-items: center;
61        justify-content: center;
62        margin-bottom: 0.25rem;
63    }
64    .pf-c-tile__title {
65        color: #6a6e73;
66    }
67    .pf-c-tile__body {
68        font-size: 0.75rem;
69        color: #6a6e73;
70    }
71    .pf-c-tile__icon {
72        margin-right: 0.5rem;
73        font-size: 1.5rem;
74        color: #6a6e73;
75    }
76}
77
78
79/*End of the IE11 workaround*/
80
81.pf-c-tile {
82    --pf-c-tile--PaddingTop: var(--pf-global--spacer--lg);
83    --pf-c-tile--PaddingRight: var(--pf-global--spacer--lg);
84    --pf-c-tile--PaddingBottom: var(--pf-global--spacer--lg);
85    --pf-c-tile--PaddingLeft: var(--pf-global--spacer--lg);
86    --pf-c-tile--BackgroundColor: var(--pf-global--BackgroundColor--100);
87    --pf-c-tile--before--BorderColor: var(--pf-global--BorderColor--100);
88    --pf-c-tile--before--BorderWidth: var(--pf-global--BorderWidth--sm);
89    --pf-c-tile--before--BorderRadius: var(--pf-global--BorderRadius--sm);
90    --pf-c-tile--hover--before--BorderColor: var(--pf-global--primary-color--100);
91    --pf-c-tile--m-selected--before--BorderWidth: var(--pf-global--BorderWidth--md);
92    --pf-c-tile--m-selected--before--BorderColor: var(--pf-global--primary-color--100);
93    --pf-c-tile--focus--before--BorderWidth: var(--pf-global--BorderWidth--md);
94    --pf-c-tile--focus--before--BorderColor: var(--pf-global--primary-color--100);
95    --pf-c-tile--m-disabled--BackgroundColor: var(--pf-global--disabled-color--300);
96    --pf-c-tile__title--Color: var(--pf-global--Color--100);
97    --pf-c-tile--hover__title--Color: var(--pf-global--primary-color--100);
98    --pf-c-tile--m-selected__title--Color: var(--pf-global--primary-color--100);
99    --pf-c-tile--focus__title--Color: var(--pf-global--primary-color--100);
100    --pf-c-tile--m-disabled__title--Color: var(--pf-global--disabled-color--100);
101    --pf-c-tile__icon--MarginRight: var(--pf-global--spacer--sm);
102    --pf-c-tile__icon--FontSize: var(--pf-global--icon--FontSize--md);
103    --pf-c-tile__icon--Color: var(--pf-global--Color--100);
104    --pf-c-tile--hover__icon--Color: var(--pf-global--primary-color--100);
105    --pf-c-tile--m-selected__icon--Color: var(--pf-global--primary-color--100);
106    --pf-c-tile--m-disabled__icon--Color: var(--pf-global--disabled-color--100);
107    --pf-c-tile--focus__icon--Color: var(--pf-global--primary-color--100);
108    --pf-c-tile__header--m-stacked__icon--MarginBottom: var(--pf-global--spacer--xs);
109    --pf-c-tile__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--lg);
110    --pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize: var(--pf-global--icon--FontSize--xl);
111    --pf-c-tile__body--Color: var(--pf-global--Color--100);
112    --pf-c-tile__body--FontSize: var(--pf-global--FontSize--xs);
113    --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--100);
114    position: relative;
115    display: inline-grid;
116    padding: var(--pf-c-tile--PaddingTop) var(--pf-c-tile--PaddingRight) var(--pf-c-tile--PaddingBottom) var(--pf-c-tile--PaddingLeft);
117    margin-bottom: 0.25rem;
118    text-align: center;
119    cursor: pointer;
120    background-color: var(--pf-c-tile--BackgroundColor);
121    grid-template-rows: min-content;
122    overflow: hidden;
123}
124
125.pf-c-tile::before {
126    position: absolute;
127    top: 0;
128    right: 0;
129    bottom: 0;
130    left: 0;
131    pointer-events: none;
132    content: "";
133    border: var(--pf-c-tile--before--BorderWidth) solid var(--pf-c-tile--before--BorderColor);
134    border-radius: var(--pf-c-tile--before--BorderRadius);
135}
136
137.pf-c-tile:hover {
138    --pf-c-tile__title--Color: var(--pf-c-tile--hover__title--Color);
139    --pf-c-tile__icon--Color: var(--pf-c-tile--hover__icon--Color);
140    --pf-c-tile--before--BorderColor: var(--pf-c-tile--hover--before--BorderColor);
141}
142
143.pf-c-tile__input:checked + .pf-c-tile {
144    --pf-c-tile__title--Color: var(--pf-c-tile--m-selected__title--Color);
145    --pf-c-tile__icon--Color: var(--pf-c-tile--m-selected__icon--Color);
146    --pf-c-tile--before--BorderWidth: var(--pf-c-tile--m-selected--before--BorderWidth);
147    --pf-c-tile--before--BorderColor: var(--pf-c-tile--m-selected--before--BorderColor);
148}
149
150.pf-c-tile:focus {
151    --pf-c-tile__title--Color: var(--pf-c-tile--focus__title--Color);
152    --pf-c-tile__icon--Color: var(--pf-c-tile--focus__icon--Color);
153    --pf-c-tile--before--BorderWidth: var(--pf-c-tile--focus--before--BorderWidth);
154    --pf-c-tile--before--BorderColor: var(--pf-c-tile--focus--before--BorderColor);
155}
156
157.pf-c-tile.pf-m-disabled {
158    --pf-c-tile--BackgroundColor: var(--pf-c-tile--m-disabled--BackgroundColor);
159    --pf-c-tile__title--Color: var(--pf-c-tile--m-disabled__title--Color);
160    --pf-c-tile__body--Color: var(--pf-c-tile--m-disabled__body--Color);
161    --pf-c-tile--before--BorderWidth: 0;
162    --pf-c-tile__icon--Color: var(--pf-c-tile--m-disabled__icon--Color);
163    pointer-events: none;
164}
165
166.pf-c-tile.pf-m-display-lg .pf-c-tile__header.pf-m-stacked {
167    --pf-c-tile__icon--FontSize: var(--pf-c-tile--m-display-lg__header--m-stacked__icon--FontSize);
168}
169
170.pf-c-tile__input {
171    display: none;
172}
173
174.pf-c-tile__header {
175    display: flex;
176    align-items: center;
177    justify-content: center;
178}
179
180.pf-c-tile__header.pf-m-stacked {
181    --pf-c-tile__icon--MarginRight: 0;
182    --pf-c-tile__icon--FontSize: var(--pf-c-tile__header--m-stacked__icon--FontSize);
183    flex-direction: column;
184    justify-content: initial;
185}
186
187.pf-c-tile__header.pf-m-stacked .pf-c-tile__icon {
188    display: flex;
189    align-items: center;
190    justify-content: center;
191    margin-bottom: var(--pf-c-tile__header--m-stacked__icon--MarginBottom);
192}
193
194.pf-c-tile__title {
195    color: var(--pf-c-tile__title--Color);
196}
197
198.pf-c-tile__body {
199    font-size: var(--pf-c-tile__body--FontSize);
200    color: var(--pf-c-tile__body--Color);
201}
202
203.pf-c-tile__icon {
204    margin-right: var(--pf-c-tile__icon--MarginRight);
205    font-size: var(--pf-c-tile__icon--FontSize);
206    color: var(--pf-c-tile__icon--Color);
207}