@import(once) '/apps/catalog/clientlibs/clientlib-base/css/variables.less';@import(once) '/apps/catalog/clientlibs/clientlib-base/css/mixins-text.less';@import(once) '/apps/catalog/clientlibs/clientlib-base/css/icon-variables.less';@import(once) '/apps/catalog/clientlibs/clientlib-base/css/mixins.less';@keyframes spin{0{transform:rotate(0)}
100%{transform:rotate(360deg)}
}
.champions-list-component{background-color:var(--champions-list-component-bg-color,var(--primary-color-bg));color:~"var(--champions-list-component-fg-color, var(--primary-color-fg))";&__tags{display:flex;padding-top:40px;margin-bottom:27px;@media(min-width:@bp-md){padding-top:56px;margin-bottom:40px}
&-list{display:flex;justify-content:flex-start;align-items:flex-start;overflow-x:auto;flex-wrap:nowrap;@media(min-width:@bp-md){justify-content:flex-start;flex-wrap:wrap;row-gap:16px}
&::-webkit-scrollbar{display:none}
}
&-item{min-width:max-content;cursor:pointer;border-radius:0;border-bottom:1px solid @neutral-400;padding:0 32px 18px;background:transparent;line-height:normal;color:@neutral-400;&:hover{background:transparent;border-bottom:3px solid #da291c;color:@neutral-900}
&.active{background:transparent;border-bottom:3px solid #da291c;color:@neutral-900}
}
}
&__heading{display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:flex-start;@media(min-width:@bp-md){flex-direction:row;justify-content:space-between;align-items:center}
&.custom-champions-list{display:none}
&__inner{display:flex;align-items:center;gap:8px;margin-top:20px;width:100%;&.custom-title-champions{color:#da291c}
@media(min-width:@bp-md){margin-top:0;width:~"clamp(220px, 70%, 966px)"}
}
&__icon{font-size:24px;@media(min-width:@bp-lg){font-size:28px}
}
&__search{position:relative;width:100%;@media(min-width:@bp-md){position:relative;margin-left:auto;width:328px}
&__input{border-radius:4px;border:1px solid @neutral-400;padding:8px 16px 8px 16px;width:100%;height:56px}
&__icon{position:absolute;top:50%;right:12px;left:unset;transform:translateY(-50%);width:20px;height:20px;color:@neutral-800}
}
&__title{.mixin-hdr-headline-h3()}
}
&__cards{display:grid;gap:32px;&.margin-champions-list{display:none;margin-top:24px;padding-bottom:32px;@media(min-width:@bp-sm){margin-top:40px;padding-bottom:40px}
}
&.margin-championships{margin-top:20px;padding-bottom:32px;@media(min-width:@bp-sm){margin-top:40px;padding-bottom:56px}
}
@media(min-width:@bp-sm){grid-template-columns:31.5% 31.5% 31.5%;grid-auto-rows:1fr}
&__loader{display:flex;justify-content:center;width:100%}
}
&__card{overflow:hidden;border-radius:4px;.mixin-shadow-cards--M();.mixin-animate-hover-cards(1,.2s);&:hover{.mixin-animate-hover-cards()}
>a{display:block;height:100%;text-decoration:none}
&__tag{&-list{position:absolute;top:17px;right:16px;left:16px;z-index:1;display:flex;flex-wrap:wrap;gap:8px}
}
&__corner{position:absolute;top:0;right:0;z-index:1;.mixin-corner-starred-top-right()}
&__img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;&-logo{position:relative;img{position:absolute;top:32px;left:50%;z-index:11;transform:translateX(-50%);width:160px;height:120px;@media(min-width:@bp-md){width:224px;height:165px}
}
}
}
&__content{display:flex;flex-direction:column;padding:16px 24px 24px;width:100%}
&__container-tags{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;text-overflow:ellipsis;color:@neutral-300}
&__tag{.mixin-hdr-overline--small();margin-bottom:8px;color:@neutral-300;@media(min-width:@bp-md){.mixin-hdr-overline--large()}
}
&__title{.mixin-hdr-headline-h5--mobile();.mixin-ellipsis-simple(2)}
&__description{margin:0;.mixin-hdr-new-body--medium();.mixin-ellipsis-simple(2)}
&__post-button{margin-top:auto;.mixin-post-button()}
&--champions{height:295px;@media(min-width:@bp-md){height:301px}
.champions-list-component__card{@heightContent:98px;&__img{&-container{overflow:hidden;height:~"calc(___YUICSSMIN_PRESERVED_TOKEN_0___)"}
}
&__content{min-height:@heightContent;background-color:@white}
&__title{margin-top:10px;margin-bottom:10px;color:@neutral-900}
&__description{margin:0;color:@neutral-500}
}
&.champions-list-component__card:hover{transition:none;transform:none}
}
&--solid{height:350px;@media(min-width:@bp-md){height:444px}
.champions-list-component__card{@heightContent:178px;&__img{&-container{overflow:hidden;height:~"calc(___YUICSSMIN_PRESERVED_TOKEN_1___)"}
}
&__content{min-height:@heightContent;background-color:@white}
&__title{margin-top:10px;margin-bottom:10px;color:@neutral-900}
&__description{margin:0;color:@neutral-500}
}
}
}
&__loader{width:90px;height:90px;animation:spin 2s linear infinite}
&__arrow{display:flex;justify-content:center;padding-bottom:56px;width:100%;.btn-cards{--button-slider-size:48px;display:flex;justify-content:center;align-items:center;border-radius:50%;border:solid 1px ~"var(--champions-list-component-fg-color, var(--primary-color-fg))";margin:0;padding:0;width:var(--button-slider-size);height:var(--button-slider-size);background:transparent;cursor:pointer;&::after{display:none}
&--rounded{border-width:2px;.icon{transform:rotate(90deg);font-size:16px;color:~"var(--champions-list-component-fg-color, var(--primary-color-fg))"}
}
}
}
&__not-found{display:flex;flex-direction:column;justify-content:center;height:580px;text-align:center;&__subtitle{.mixin-hdr-overline--large()}
&__title{.mixin-hdr-headline-h1()}
}
}
.bg-primary{--champions-list-component-bg-color:~"var(--primary-color-bg)";--champions-list-component-fg-color:~"var(--primary-color-fg)"}
.bg-secondary{--champions-list-component-bg-color:~"var(--secondary-color-bg)";--champions-list-component-fg-color:~"var(--secondary-color-fg)"}
.bg-tertiary{--champions-list-component-bg-color:~"var(--tertiary-color-bg)";--champions-list-component-fg-color:~"var(--tertiary-color-fg)";.champions-list-component{&__not-found{color:@neutral-600}
}
}