.toc-sticky-container {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 12px 0 10px;
background: #fff;
visibility: hidden;
opacity: 0;
z-index: 9;
transition: .3s ease;
-webkit-transition: .3s ease
}
.toc-sticky-container .toc-sticky-container__inner {
width: var(--toc-content-width);
margin: 0 auto;
max-width: 100%;
overflow: hidden
}
.toc-sticky-container .toc-summary {
padding: 0 var(--toc-padding);
display: flex;
flex-wrap: wrap;
box-sizing: border-box
}
.toc-sticky-container .toc-summary .toc-nav,
.toc-sticky-container .toc-summary .toc-current {
width: 100%
}
.toc-sticky-container .toc-summary .toc-current {
width: auto;
position: relative;
padding-right: 10px;
max-width: calc(100% - 10px);
box-sizing: border-box;
cursor: pointer
}
.toc-sticky-container .toc-summary .toc-current:after {
content: "";
position: absolute;
left: 100%;
width: 10px;
height: 10px;
top: calc(50% - 5px);
background: url(//www.brainstorm3d.com/wp-content/themes/asata/assets/vendors/table-of-content/dist/images/down.svg) no-repeat center center;
background-size: 80%
}
.toc-sticky-container .toc-summary .toc-current .text {
max-width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden
}
.toc-sticky-container .toc-summary .toc-nav {
display: flex;
margin: 0 -12px 10px;
padding: 0;
width: calc(100% + 24px)
}
.toc-sticky-container .toc-summary .toc-nav .item {
padding: 0 12px;
list-style: none;
width: 100%
}
.toc-sticky-container .toc-summary .toc-nav .item span {
display: block;
width: 100%;
height: 4px;
border-radius: 1px;
background: #999;
transition: .3s ease;
-webkit-transition: .3s ease
}
.toc-sticky-container .toc-summary .toc-nav .item.__is-active span {
color: #999
}
.toc-sticky-container .toc-summary .toc-nav .item.__is-active~.item span {
background: #eee
}
.toc-select {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
width: 460px;
max-width: 100%;
background: #fff;
border-radius: 6px;
box-shadow: 0 10px 30px 10px rgba(1, 1, 1, .1);
overflow: auto;
max-height: 70vh;
visibility: hidden;
margin: 0;
padding: 0;
opacity: 0;
transition: .3s ease;
-webkit-transition: .3s ease
}
@media(max-width: 425px) {
.toc-select {
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
left: 0;
top: auto;
bottom: 0;
min-height: 40vh;
box-shadow: 0 -10px 30px 10px rgba(1, 1, 1, .1);
border-radius: 10px 10px 0 0
}
}
.toc-select li {
list-style: none;
padding: 15px;
box-sizing: border-box;
cursor: pointer;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
transition: .3s ease;
-webkit-transition: .3s ease
}
.toc-select li:not(:last-child) {
border-bottom: solid 1px #eee
}
.toc-select li:hover,
.toc-select li.__is-active {
background: #f5f5f5
}
.toc-select li.__is-active {
font-weight: bold
}
body.toc-show .toc-sticky-container {
visibility: visible;
opacity: 1;
box-shadow: 0 0 10px 0 rgba(1, 1, 1, .07)
}
body.toc-show.__is-select-show .toc-select {
visibility: visible;
opacity: 1
}