/* story */

.story {
    padding: 30px 52px 34px 52px;
    position: relative;
}

.stories.carousel .story {
    padding: unset;
}

.story .name {
    font-size: 25px;
    line-height: 30px;

    color: #434343;
    text-align: center;

    margin: 0 0 20px 0;
}

.story .text {
    font-family: var(--main-font);
    font-size: 14px;
    line-height: 18px;

    color: #434343;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;

    text-overflow: ellipsis;
}

.js-story-text.active {
    line-clamp: unset;
    -webkit-line-clamp: unset;
}

.story .button {
    font-family: var(--accent-font);
    font-size: 12px;
    line-height: 16px;
    color: #434343;

    padding: 10px 35px;
    width: max-content;
    border: 1px solid var(--accent-color);

    margin: 20px auto 0 auto;
    display: block;

    text-transform: uppercase;
}

.js-story-button::before {
    content: 'читать историю';
}

.js-story-button.active::before {
    content: 'свернуть историю';
}

.story .corner {
    position: absolute;

    width: 60px;
    height: 60px;
}

.story .corner-top-left {
    top: 0;
    left: 0;
}

.story .corner-top-right {
    right: 0;
    top: 0;
}

.story .corner-bottom-left {
    bottom: 0;
    left: 0;
}

.story .corner-bottom-right {
    bottom: 0;
    right: 0;
}

.stories-widget {
    position: fixed;
    bottom: 2vh;
    left: 2vh;
}

.stories-widget.carousel .story {
    width: 100%;
    margin: 0;
}

.stories-widget-close {
    z-index: 100;
    position: absolute;
    background: url(/assets/images/plus.svg);
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(45deg);
    width: 20px;
    height: 20px;
    top: 4px;
    right: 4px;
    cursor: pointer;
}

#stories-widget:before {
    display: none;
}
#stories-widget{
    z-index: 99999;
}
/* временный костыль, чтобы выглядело не блевотно. пока Ein не переделает нормально, чтобы тут был автоплейный видос как на сайте примере и было в тз. badmvm.*/
#stories-widget .story.seen {
    opacity: 1;
}
#stories-widget.stories.snapssenger.carousel .story > .item-link>.info{
    display: none;
}
.stories-widget-close {filter: grayscale(1) brightness(0) invert(1);}
body:has(#zuck-modal.with-effects.animated){
    zoom: 100%;
}

.stories.carousel {
    padding-top: 30px;
    padding-bottom: 40px;
    margin-top: -1px;
    text-align: center;
}
.stories.carousel:empty{
    display: none;
}
.story .name{
    font-size: 12px;
    font-family: var(--accent-font);
    line-height: 100%;
}
.stories.carousel .story{
    width: 70px;
    display: inline-block;
}
.stories.carousel .story>.item-link>.item-preview{
    height: 70px;
}