{"version":3,"sources":["device-selector.scss"],"names":[],"mappings":"AAAA,iBACI,gBACA,gBAGJ,2BACI,aACA,uBACA,eAGJ,oBACI,aACA,4DACA,0CACA,SAGJ,uBACI,eACA,gBACA,iBACA,kBACA,eACA,iBACA,aACA,8BAGJ,uBACI,UACA,SACA,kBACA,eACA,gBACA,cACA,YAGJ,6BACI,kBACA,WACA,YACA,wBAAA,qBAAA,gBACA,MACA,WAEJ,6BACI,aACA,8BACA,WACA,YACA,aACA,kBACA,yBACA,sBACA,iBACA,gBACA,eACA,sCACA,sBACA,eACA,wBAEJ,uEACI,qBAGJ,8DACI,aACA,mBACA,uBACA,WACA,mBACA,eACA,yBACA,gBACA,mBACA,kBACA,mBACA,eACA,yBACA,wBACA,WACA,qBAEJ,4EACI,UACA,mBAEJ,iCACI,aACA,sBACA,mBAEJ,mCACI,gBACA,eAEJ,gCACI,aACA,mBACA,eACA,gBACA,2BAEJ,mCACI,cACA,YACA,WACA,mBACA,kBACA,wBACA,0CACA,qBAEJ,0CACI,0CACA,mBAEJ,yCACI,yBAEJ,0CACI,yBAEJ,wCACI,yBAEJ,yCACI,sBAEJ,uCACI,yBAEJ,0CACI,yBAEJ,yCACI,yBAEJ,wCACI","file":"device-selector.min.css","sourcesContent":[".device-selector {\n    margin-top: 40px;\n    overflow: hidden;\n}\n\n.device-selector-container {\n    display: flex;\n    justify-content: center;\n    padding: 20px 0;\n}\n\n.device-selector dl {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n    grid-template-rows: repeat(auto-fill, 1fr);\n    gap: 10px;\n}\n\n.device-selector dl dt {\n    font-size: 20px;\n    font-weight: 600;\n    letter-spacing: 0;\n    font-style: normal;\n    padding: 10px 0;\n    grid-column: 1 / -1;\n    display: flex;\n    justify-content: space-between;\n}\n\n.device-selector dl dd {\n    padding: 0;\n    margin: 0;\n    position: relative;\n    cursor: pointer;\n    text-align: left;\n    flex-shrink: 0;\n    flex-grow: 1;\n}\n\n.device-selector dl dd input {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    appearance: none;\n    top: 0;\n    z-index: -1;\n}\n.device-selector dl dd label {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    width: 100%;\n    height: 100%;\n    padding: 20px;\n    text-align: center;\n    border: 2px solid #d6d6d6;\n    box-sizing: border-box;\n    border-spacing: 0;\n    overflow: hidden;\n    cursor: pointer;\n    background-color: hsla(0,0%,100%,.8);\n    flex-direction: column;\n    cursor: pointer;\n    transition: all 0.5s ease;\n}\n.device-selector dl dd.active label, .device-selector dl dd.hover label {\n    border-color: #0070c9;\n}\n\n.device-selector dl dd label span, .device-selector dl dt span {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: black;\n    background: #e9ecef;\n    font-size: 12px;\n    text-transform: uppercase;\n    font-weight: 600;\n    letter-spacing: 2px;\n    padding: 10px 20px;\n    border-radius: 30px;\n    cursor: pointer;\n    text-transform: uppercase;\n    transition: all 0.5s ease;\n    opacity: 0.8;\n    transform: scale(0.8);\n}\n.device-selector dl dd label span.active, .device-selector dl dt span.active {\n    opacity: 1;\n    transform: scale(1);\n}\n.device-selector dl dd label div {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n}\n.device-selector dl dd label div p {\n    font-weight: 600;\n    font-size: 17px;\n}\n.device-selector dl dd label ul {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    list-style: none;\n    justify-content: flex-start;\n}\n.device-selector dl dd label ul li {\n    display: block;\n    height: 24px;\n    width: 24px;\n    margin: 0 8px 8px 0;\n    border-radius: 50%;\n    transition: all 0.5s ease;\n    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n    transform: scale(0.8);\n}\n.device-selector dl dd label ul li.active {\n    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);\n    transform: scale(1);\n}\n.device-selector dl dd label ul li.black {\n    background-color: #2c2b2c;\n}\n.device-selector dl dd label ul li.silver {\n    background-color: #f0f0f0;\n}\n.device-selector dl dd label ul li.gold {\n    background-color: #f1e2d0;\n}\n.device-selector dl dd label ul li.white {\n    background-color: #fff;\n}\n.device-selector dl dd label ul li.red {\n    background-color: #f96b6c;\n}\n.device-selector dl dd label ul li.yellow {\n    background-color: #f2dc60;\n}\n.device-selector dl dd label ul li.green {\n    background-color: #97e563;\n}\n.device-selector dl dd label ul li.blue {\n    background-color: #33a2db;\n}\n"]}