smart-webcomponents/source/styles/components/smart.led.css

Web Components & Custom Elements for Professional Web Applications

smart-led{padding:0;width:var(--smart-led-default-width);height:var(--smart-led-default-height);display:inline-block;border-radius:50%}smart-led .smart-container{cursor:pointer;height:100%;position:relative;display:flex;overflow:hidden}smart-led .smart-ripple{background:var(--smart-primary)}smart-led[focus]{outline:0}smart-led[disabled] .smart-container{cursor:initial}smart-led[shape=square]{border-radius:0}.smart-led.smart-container{cursor:pointer;height:100%;position:relative;display:flex;overflow:hidden}.smart-led .smart-input{width:100%;height:100%;border-radius:100%;text-align:center;display:flex;align-items:center;justify-content:center;min-width:20px;min-height:20px;padding:4%;background-clip:content-box;border-style:solid;box-sizing:border-box;border-width:var(--smart-border-width);border-color:var(--smart-border);font-family:inherit;font-size:inherit;outline:0}.smart-led .smart-false-content-container,.smart-led .smart-indeterminate-content-container,.smart-led .smart-true-content-container{border-radius:50%;width:100%;height:100%;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis}.smart-led .smart-false-content-container{display:flex;background-color:transparent}.smart-led .smart-true-content-container{display:none;background-color:var(--smart-primary)}.smart-led .smart-indeterminate-content-container{display:none;background-color:#d3d3d3}.smart-led .smart-false-content,.smart-led[checked] .smart-true-content{display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;width:100%;height:100%}.smart-led .smart-false-content{justify-content:center}.smart-led[focus] .smart-input{border:var(--smart-border-width) solid var(--smart-ui-state-border-focus);background:var(--smart-ui-state-focus);color:var(--smart-ui-state-color-focus)}.smart-led:hover .smart-input{border:var(--smart-border-width) solid var(--smart-ui-state-border-hover);background:var(--smart-ui-state-hover);color:var(--smart-ui-state-color-hover);transition:background-color .1s linear}.smart-led.active .smart-input{border:var(--smart-border-width) solid var(--smart-ui-state-border-active);background:var(--smart-ui-state-active);color:var(--smart-ui-state-color-active)}.smart-led[checked] .smart-true-content{justify-content:center}.smart-led[checked] .smart-false-content-container{display:none}.smart-led[checked] .smart-true-content-container{display:flex}.smart-led[checked=null] .smart-indeterminate-content{display:flex;align-items:center;justify-content:center;overflow:hidden;text-overflow:ellipsis;width:100%;height:100%}.smart-led[checked=null] .smart-indeterminate-content-container{display:flex}.smart-led[checked=null] .smart-true-content-container{display:none}.smart-led[shape=square] .smart-false-content-container,.smart-led[shape=square] .smart-indeterminate-content-container,.smart-led[shape=square] .smart-input,.smart-led[shape=square] .smart-true-content-container{border-radius:0}.smart-led[right-to-left] .smart-false-content-container,.smart-led[right-to-left] .smart-indeterminate-content-container,.smart-led[right-to-left] .smart-true-content-container{direction:rtl}