/**
 * 이 파일은 코스모스 고객목록 위젯의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 기본 템플릿
 *
 * @file /modules/naddle/coursemos/widgets/clients/templates/default/styles/style.css
 * @author Arzz <arzz@arzz.com>
 * @license MIT License
 * @modified 2024. 4. 16.
 */
div[data-role='widget'][data-widget='clients'][data-module='naddle/coursemos'][data-template='default'] {
    > div.swiper {
        --logo-height: 50px;
        --logo-gap: 5px;
        width: calc(100% + var(--logo-gap) * 2);
        margin-inline: calc(var(--logo-gap) * -1);
        height: calc((var(--logo-height) + var(--logo-gap) * 2) * 3);

        > div.swiper-wrapper {
            > div.swiper-slide {
                box-sizing: border-box;
                display: inline-block;
                padding: var(--logo-gap);

                > div {
                    height: var(--logo-height);
                    box-sizing: border-box;
                    padding-inline: calc(var(--logo-height) / 4);
                    padding-block: calc(var(--logo-height) / 5);
                    border: 1px solid var(--color-border-secondary);
                    background-color: var(--color-white);
                    border-radius: 999px;
                    position: relative;
                    overflow: hidden;

                    > i {
                        display: block;
                        width: 100%;
                        height: 100%;
                        background-repeat: no-repeat;
                        background-size: contain;
                        background-position: 50% 50%;
                    }
                }
            }
        }
    }
}

@container widget (width >= 975px) {
    div[data-role='widget'][data-widget='clients'][data-module='naddle/coursemos'][data-template='default'] {
        > div.swiper {
            --logo-height: 80px;
            --logo-gap: 10px;
        }
    }
}

@container widget (width >= 720px) {
    div[data-role='widget'][data-widget='clients'][data-module='naddle/coursemos'][data-template='default'] {
        > div.swiper {
            --logo-height: 65px;
            --logo-gap: 5px;
        }
    }
}