.post-summary {
margin-bottom: 2rem;
border: 1px solid #115efb33;
border-radius: 10px;
background-color: #fff;
overflow: hidden;
}
.post-summary__trigger {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1rem 1.25rem;
cursor: pointer;
}
.post-summary__trigger::-webkit-details-marker {
display: none;
}
.post-summary__label {
font-family: "Sora", sans-serif;
font-size: var(--wp--preset--font-size--text-medium);
font-weight: 600;
color: #0058ff;
}
.post-summary__toggle {
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #115efb;
color: #fff;
flex-shrink: 0;
transition: background-color 0.25s ease;
user-select: none;
-webkit-user-select: none;
}
.post-summary__trigger:hover .post-summary__toggle {
background: #0058ff;
}
.post-summary__toggle-icon {
position: relative;
display: block;
width: 16px;
height: 16px;
transition: transform 0.25s ease;
user-select: none;
-webkit-user-select: none;
transform-origin: center center;
}
.post-summary[open] .post-summary__toggle-icon {
transform: rotate(45deg);
}
.post-summary__toggle-icon::before,
.post-summary__toggle-icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 14px;
height: 2px;
border-radius: 2px;
background: #fff;
transform: translate(-50%, -50%);
}
.post-summary__toggle-icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.post-summary__content {
height: 0;
overflow: hidden;
border-top: 1px solid transparent;
transition:
height 0.32s ease,
border-color 0.2s ease;
will-change: height;
}
.post-summary[open] .post-summary__content {
border-top-color: #115efb33;
}
.post-summary__content-inner {
padding: 1rem 1.25rem 1.25rem;
}
.post-summary__list {
margin: 0;
padding: 0;
list-style: none;
}
.post-summary__list li {
position: relative;
margin: 0 0 0.75rem 14px;
font-size: var(--text);
line-height: 1.5;
color: var(--wp--preset--color--default);
list-style: none;
}
.post-summary__list li:last-child {
margin-bottom: 0;
}
.post-summary__list li::before {
content: "";
width: 6px;
height: 6px;
background-color: #115efb;
display: block;
flex-shrink: 0;
margin-top: 7px;
position: absolute;
left: -14px;
}