1/**
2 * @file
3 * Collapsible details.
4 */
5
6@import "../base/variables.pcss.css";
7
8:root {
9  --details-border-width: 1px;
10  --details-summary-transition: background-color 0.12s ease-in-out;
11}
12
13.olivero-details {
14  display: block;
15  margin-block: var(--sp1);
16  color: inherit;
17  border: var(--details-border-width) solid var(--color--gray-80);
18  border-radius: var(--border-radius);
19  box-shadow: 0 1px 4px var(--color--gray-70);
20}
21
22/* Details summary styles */
23.olivero-details__summary {
24  position: relative;
25  padding-block: var(--sp1);
26  padding-inline-start: var(--sp2);
27  padding-inline-end: var(--sp1);
28  list-style: none;
29  cursor: pointer;
30  transition: var(--details-summary-transition);
31  word-wrap: break-word;
32  hyphens: auto;
33  color: inherit;
34  background-color: var(--color--gray-95);
35  font-size: var(--line-height-s);
36  font-weight: 700;
37  line-height: var(--sp1);
38}
39
40/* Arrow icon */
41.olivero-details__summary:before,
42.collapse-processed > .olivero-details__summary .details-title:before {
43  position: absolute;
44  inset-block-start: 50%;
45  inset-inline-start: var(--sp0-75);
46  display: block;
47  width: 10px;
48  height: 10px;
49  content: "";
50  transform: translateY(-50%) rotate(45deg); /* LTR */
51  border-top: solid 2px currentColor;
52  border-right: solid 2px currentColor;
53}
54
55[dir="rtl"] {
56  & .olivero-details__summary:before,
57  & .collapse-processed > .olivero-details__summary .details-title:before {
58    transform: translateY(-50%) rotate(-135deg);
59  }
60}
61
62/* Pseudo-selector to manage focus styles */
63.olivero-details__summary:after,
64.collapse-processed > .olivero-details__summary .details-title:after {
65  position: absolute;
66  inset: calc(var(--details-border-width) * -1);
67  content: "";
68  pointer-events: none;
69  opacity: 0;
70  border-radius: var(--border-radius);
71  box-shadow: inset 0 0 0 2px var(--color--blue-70);
72}
73
74/* Hide the marker */
75.olivero-details__summary::-webkit-details-marker {
76  display: none;
77}
78
79/* Disable default outline for summary, since we have own implementation */
80.olivero-details__summary:focus {
81  outline: solid 2px transparent;
82  outline-offset: -4px;
83}
84
85/* Details summary, hover state */
86.olivero-details__summary:hover {
87  background-color: var(--color--gray-80);
88}
89
90/* Details summary, focus and active states */
91.olivero-details__summary:focus:after,
92.olivero-details__summary:active:after,
93.collapse-processed > .olivero-details__summary .details-title:focus:after,
94.collapse-processed > .olivero-details__summary .details-title:active:after {
95  opacity: 1;
96}
97
98/* Rotate arrow icon of the details summary, when details expanded */
99.olivero-details[open] > .olivero-details__summary::before,
100.collapse-processed[open] > .olivero-details__summary .details-title::before {
101  margin-block-start: -2px;
102  transform: translateY(-50%) rotate(135deg);
103}
104
105/* Collapse processed for non-supporting browsers like IE or Edge */
106.collapse-processed > .olivero-details__summary {
107  padding-block: 0;
108  padding-inline-start: 0;
109  padding-inline-end: 0;
110
111  &:before {
112    content: none;
113  }
114
115  &:after {
116    content: none;
117  }
118}
119
120.collapse-processed > .olivero-details__summary .details-title {
121  position: relative;
122  display: block;
123  padding-block: var(--sp1);
124  padding-inline-start: var(--sp2);
125  padding-inline-end: var(--sp1);
126  transition: var(--details-summary-transition);
127  text-decoration: none;
128  color: inherit;
129  background-color: var(--color--gray-95);
130}
131
132.collapse-processed > .olivero-details__summary .details-title:focus {
133  outline: solid 2px transparent;
134}
135
136.collapse-processed > .olivero-details__summary .details-title:hover {
137  background-color: var(--color--gray-80);
138}
139
140@media screen and (-ms-high-contrast: active) {
141  .collapse-processed > .olivero-details__summary .details-title::after {
142    inset: -5px;
143    border: 2px dotted;
144  }
145}
146
147/* Details content wrapper */
148.olivero-details__wrapper {
149  margin: var(--sp1);
150
151  @media (--lg) {
152    margin-block-start: var(--sp1-5);
153    margin-block-end: var(--sp1-5);
154    margin-inline-start: var(--sp2);
155    margin-inline-end: var(--sp2);
156  }
157}
158
159/* Description */
160.olivero-details__description {
161  margin-block-end: var(--sp1);
162  color: var(--color--gray-10);
163  font-size: var(--font-size-xs);
164  line-height: var(--line-height-s);
165}
166