I am a paragraph
``` +### Links +```html + +Link +``` + ### Progress Indicators ```html @@ -136,6 +142,7 @@ Click the link of a component in the next section to find more examples of its u * [x] [Text](./src/components/buttons/text) * [x] [Unelevated](./src/components/buttons/unelevated) * [x] [Colors](./src/utilities/colors) +* [x] [Links](./src/components/links) * [x] Progress Indicators * [x] [Circular](./src/components/progress/circular) * [x] [Linear](./src/components/progress/linear) diff --git a/dist/matter.css b/dist/matter.css index 146edda..79f1850 100644 --- a/dist/matter.css +++ b/dist/matter.css @@ -304,6 +304,30 @@ .matter-button-text:disabled::after { opacity: 0; } +/* Link */ +.matter-link { + --matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243)); + --matter-helper-safari1: rgba(var(--matter-helper-theme), 0.12); + border-radius: 4px; + color: rgb(var(--matter-helper-theme)); + text-decoration: none; + transition: background-color 0.2s, box-shadow 0.2s; +} +/* Hover */ +.matter-link:hover { + text-decoration: underline; +} +/* Focus */ +.matter-link:focus { + background-color: var(--matter-helper-safari1); + box-shadow: 0 0 0 0.16em var(--matter-helper-safari1); + outline: none; +} +/* Active */ +.matter-link:active { + background-color: transparent; + box-shadow: none; +} /* Progress Circular */ .matter-progress-circular { --matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243)); diff --git a/dist/matter.min.css b/dist/matter.min.css index 569889b..15e2bb6 100644 --- a/dist/matter.min.css +++ b/dist/matter.min.css @@ -1,2 +1,2 @@ /* Matter 0.1.0 (min) */ -.matter-button-contained{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer;transition:box-shadow .2s}.matter-button-contained::-moz-focus-inner{border:none}.matter-button-contained:after,.matter-button-contained:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-contained:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-contained:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-contained:focus,.matter-button-contained:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.matter-button-contained:hover:before{opacity:.08}.matter-button-contained:focus:before{opacity:.24}.matter-button-contained:hover:focus:before{opacity:.32}.matter-button-contained:active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.matter-button-contained:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-contained:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);box-shadow:none;cursor:auto}.matter-button-contained:disabled:after,.matter-button-contained:disabled:before{opacity:0}.matter-button-unelevated{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-unelevated::-moz-focus-inner{border:none}.matter-button-unelevated:after,.matter-button-unelevated:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-unelevated:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-unelevated:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-unelevated:hover:before{opacity:.08}.matter-button-unelevated:focus:before{opacity:.24}.matter-button-unelevated:hover:focus:before{opacity:.32}.matter-button-unelevated:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-unelevated:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);cursor:auto}.matter-button-unelevated:disabled:after,.matter-button-unelevated:disabled:before{opacity:0}.matter-button-outlined{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:1px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24);border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:34px;outline:none;cursor:pointer}.matter-button-outlined::-moz-focus-inner{border:none}.matter-button-outlined:after,.matter-button-outlined:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:3px;opacity:0}.matter-button-outlined:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-outlined:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-outlined:hover:before{opacity:.04}.matter-button-outlined:focus:before{opacity:.12}.matter-button-outlined:hover:focus:before{opacity:.16}.matter-button-outlined:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-outlined:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-outlined:disabled:after,.matter-button-outlined:disabled:before{opacity:0}.matter-button-text{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:none;border-radius:4px;padding:0 8px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-text::-moz-focus-inner{border:none}.matter-button-text:after,.matter-button-text:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-text:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-text:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-text:hover:before{opacity:.04}.matter-button-text:focus:before{opacity:.12}.matter-button-text:hover:focus:before{opacity:.16}.matter-button-text:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-text:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-text:disabled:after,.matter-button-text:disabled:before{opacity:0}.matter-progress-circular{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border:none;border-radius:50%;padding:.25em;width:3em;height:3em;color:rgb(var(--matter-helper-theme));background-color:transparent;font-size:16px;overflow:hidden}.matter-progress-circular::-webkit-progress-bar{background-color:transparent}.matter-progress-circular:indeterminate{animation:matter-progress-circular 6s cubic-bezier(.3,.6,1,1) infinite}.matter-progress-circular:indeterminate,:-ms-lang(x){animation:none}.matter-progress-circular:indeterminate::-webkit-progress-value,.matter-progress-circular:indeterminate:before{content:"";display:block;box-sizing:border-box;margin-bottom:.25em;border:.25em solid;border-radius:50%;width:100%!important;height:100%;background-color:transparent;-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-moz-progress-bar{box-sizing:border-box;border:.25em solid;border-radius:50%;width:100%;height:100%;background-color:transparent;clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-ms-fill{animation-name:-ms-ring}@keyframes matter-progress-circular{0%{transform:rotate(0deg)}12.5%{transform:rotate(180deg);animation-timing-function:linear}25%{transform:rotate(630deg)}37.5%{transform:rotate(810deg);animation-timing-function:linear}50%{transform:rotate(1260deg)}62.5%{transform:rotate(4turn);animation-timing-function:linear}75%{transform:rotate(1890deg)}87.5%{transform:rotate(2070deg);animation-timing-function:linear}to{transform:rotate(7turn)}}@keyframes matter-progress-circular-pseudo{0%{-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0)}18%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0)}53%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%)}88%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%)}to{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%)}}.matter-progress-linear{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:160px;height:4px;vertical-align:middle;color:rgb(var(--matter-helper-theme));background-color:rgba(var(--matter-helper-theme),.12)}.matter-progress-linear::-webkit-progress-bar{background-color:transparent}.matter-progress-linear::-webkit-progress-value{background-color:currentColor;transition:all .2s}.matter-progress-linear::-moz-progress-bar{background-color:currentColor;transition:all .2s}.matter-progress-linear::-ms-fill{border:none;background-color:currentColor;transition:all .2s}.matter-progress-linear:indeterminate{background-size:200% 100%;background-image:linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 25%,transparent 0);animation:matter-progress-linear 1.8s linear infinite}.matter-progress-linear:indeterminate::-webkit-progress-value{background-color:transparent}.matter-progress-linear:indeterminate::-moz-progress-bar{background-color:transparent}.matter-progress-linear:indeterminate::-ms-fill{animation-name:none}@keyframes matter-progress-linear{0%{background-position:32% 0,32% 0,50% 0}2%{background-position:32% 0,32% 0,50% 0}21%{background-position:32% 0,-18% 0,0 0}42%{background-position:32% 0,-68% 0,-27% 0}50%{background-position:32% 0,-93% 0,-46% 0}56%{background-position:32% 0,-118% 0,-68% 0}66%{background-position:-11% 0,-200% 0,-100% 0}71%{background-position:-32% 0,-200% 0,-100% 0}79%{background-position:-54% 0,-242% 0,-100% 0}86%{background-position:-68% 0,-268% 0,-100% 0}to{background-position:-100% 0,-300% 0,-100% 0}}.matter-checkbox{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-checkbox>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:3px 1px;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:2px;width:18px;height:18px;outline:none;cursor:pointer;transition:border-color .2s,background-color .2s}.matter-checkbox>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-checkbox>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);pointer-events:none;transition:opacity .3s,transform .2s}.matter-checkbox>input+span:after{content:"";z-index:1;display:block;position:absolute;top:3px;left:1px;width:10px;height:5px;border-color:transparent;border-style:solid;border-width:0 0 2px 2px;pointer-events:none;transform:translate(3px,4px) rotate(-45deg);transition:border-color .2s}.matter-checkbox>input:checked,.matter-checkbox>input:indeterminate{border-color:rgb(var(--matter-helper-theme));background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:before,.matter-checkbox>input:indeterminate+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:after,.matter-checkbox>input:indeterminate+span:after{border-color:rgb(var(--matter-helper-ontheme,255,255,255))}.matter-checkbox>input:indeterminate+span:after{border-left-width:0;transform:translate(4px,3px)}.matter-checkbox:hover>input+span:before{opacity:.04}.matter-checkbox>input:focus+span:before{opacity:.12}.matter-checkbox:hover>input:focus+span:before{opacity:.16}.matter-checkbox:active:hover>input,.matter-checkbox:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-checkbox:active>input:checked{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6)}.matter-checkbox:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-checkbox>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:checked:disabled,.matter-checkbox>input:indeterminate:disabled{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-checkbox>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-radio>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:2px 0;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:50%;width:20px;height:20px;outline:none;cursor:pointer;transition:border-color .2s}.matter-radio>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-radio>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(0);pointer-events:none;transition:opacity .3s,transform .2s}.matter-radio>input+span:after{content:"";display:block;position:absolute;top:2px;left:0;border-radius:50%;width:10px;height:10px;background-color:rgb(var(--matter-helper-theme));transform:translate(5px,5px) scale(0);transition:transform .2s}.matter-radio>input:checked{border-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:after{transform:translate(5px,5px) scale(1)}.matter-radio:hover>input+span:before{transform:scale(1);opacity:.04}.matter-radio>input:focus+span:before{transform:scale(1);opacity:.12}.matter-radio:hover>input:focus+span:before{transform:scale(1);opacity:.16}.matter-radio:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-radio:active:hover>input+span:before,.matter-radio:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-radio>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio>input:disabled+span:after{background-color:currentColor}.matter-switch{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-switch,.matter-switch>input{position:relative;display:inline-block}.matter-switch>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;float:right;margin:0 0 0 5px;border:5px solid transparent;border-radius:12px;width:46px;height:24px;background-clip:padding-box;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);outline:none;cursor:pointer;transition:background-color .2s,opacity .2s}.matter-switch>input+span{display:inline-block;box-sizing:border-box;margin-right:-51px;padding-right:51px;width:inherit;cursor:pointer}.matter-switch>input+span:before{right:11px;top:-8px;display:block;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);transition:opacity .3s .1s,transform .2s .1s}.matter-switch>input+span:after,.matter-switch>input+span:before{content:"";position:absolute;border-radius:50%;pointer-events:none}.matter-switch>input+span:after{z-index:1;top:2px;right:21px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);transition:background-color .2s,transform .2s}.matter-switch>input:checked{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:checked+span:before{right:-5px;background-color:rgb(var(--matter-helper-theme))}.matter-switch>input:checked+span:after{background-color:rgb(var(--matter-helper-theme));transform:translateX(16px)}.matter-switch:hover>input+span:before{opacity:.04}.matter-switch>input:focus+span:before{opacity:.12}.matter-switch:hover>input:focus+span:before{opacity:.16}.matter-switch:active>input{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch:active>input:checked{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-switch:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-switch>input:disabled{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);opacity:.38;cursor:default}.matter-switch>input:checked:disabled{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0,.38));cursor:default}.matter-switch>input:disabled+span:before{z-index:1;margin:10px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));transform:scale(1);opacity:1;transition:none}.matter-switch>input:disabled+span:after{opacity:.38}.matter-textfield-standard{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-standard>input,.matter-textfield-standard>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);padding:0 0 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-standard>input+span,.matter-textfield-standard>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 0 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .2s}.matter-textfield-standard:hover>input,.matter-textfield-standard:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87)}.matter-textfield-standard>input:not(:focus):placeholder-shown+span,.matter-textfield-standard>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:56px}.matter-textfield-standard>input:focus,.matter-textfield-standard>textarea:focus{outline:none}.matter-textfield-standard>input:focus+span,.matter-textfield-standard>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-standard>input:focus+span:after,.matter-textfield-standard>textarea:focus+span:after{transform:scale(1)}.matter-textfield-standard>input:disabled,.matter-textfield-standard>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-textfield-standard>input:disabled+span,.matter-textfield-standard>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-standard>input,.matter-textfield-standard>input+span,.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea,.matter-textfield-standard>textarea+span,.matter-textfield-standard>textarea+span:after{transition-duration:.1s}}}.matter-textfield-filled{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-filled>input,.matter-textfield-filled>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:4px 4px 0 0;padding:0 12px 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.04);box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-filled>input+span,.matter-textfield-filled>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 12px 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .3s}.matter-textfield-filled:hover>input,.matter-textfield-filled:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.08)}.matter-textfield-filled>input:not(:focus):placeholder-shown+span,.matter-textfield-filled>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:48px}.matter-textfield-filled>input:focus,.matter-textfield-filled>textarea:focus{outline:none}.matter-textfield-filled>input:focus+span,.matter-textfield-filled>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-filled>input:focus+span:after,.matter-textfield-filled>textarea:focus+span:after{transform:scale(1)}.matter-textfield-filled>input:disabled,.matter-textfield-filled>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24)}.matter-textfield-filled>input:disabled+span,.matter-textfield-filled>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-filled>input,.matter-textfield-filled>input+span,.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea,.matter-textfield-filled>textarea+span,.matter-textfield-filled>textarea+span:after{transition-duration:.1s}}}.matter-textfield-outlined{--matter-helper-theme:rgb(var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243)));--matter-helper-safari1:rgba(var(--matter-onsurface-rgb,0,0,0),0.38);--matter-helper-safari2:rgba(var(--matter-onsurface-rgb,0,0,0),0.6);--matter-helper-safari3:rgba(var(--matter-onsurface-rgb,0,0,0),0.87);position:relative;display:inline-block;padding-top:6px;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-outlined>input,.matter-textfield-outlined>textarea{box-sizing:border-box;margin:0;border:1px solid var(--matter-helper-safari2);border-top:1px solid transparent;border-radius:4px;padding:15px 13px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:inset 1px 0 transparent,inset -1px 0 transparent,inset 0 -1px transparent;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:var(--matter-helper-theme);transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown{border-top-color:var(--matter-helper-safari2)}.matter-textfield-outlined>input+span,.matter-textfield-outlined>textarea+span{position:absolute;top:0;left:0;display:flex;width:100%;max-height:100%;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:15px;cursor:text;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:68px}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{content:"";display:block;box-sizing:border-box;margin-top:6px;border-top:1px solid var(--matter-helper-safari2);min-width:10px;height:8px;pointer-events:none;box-shadow:inset 0 1px transparent;transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:before{margin-right:4px;border-left:1px solid transparent;border-radius:4px 0}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>textarea+span:after{flex-grow:1;margin-left:4px;border-right:1px solid transparent;border-radius:0 4px}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:before,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:before{border-top-color:transparent}.matter-textfield-outlined:hover>input,.matter-textfield-outlined:hover>textarea{border-left-color:var(--matter-helper-safari3);border-bottom-color:var(--matter-helper-safari3);border-right-color:var(--matter-helper-safari3);border-top-color:transparent}.matter-textfield-outlined:hover>input+span:after,.matter-textfield-outlined:hover>input+span:before,.matter-textfield-outlined:hover>textarea+span:after,.matter-textfield-outlined:hover>textarea+span:before{border-top-color:var(--matter-helper-safari3)}.matter-textfield-outlined:hover>input:not(:focus):placeholder-shown,.matter-textfield-outlined:hover>textarea:not(:focus):placeholder-shown{border-color:var(--matter-helper-safari3)}.matter-textfield-outlined>input:focus,.matter-textfield-outlined>textarea:focus{border-left-color:var(--matter-helper-theme);border-bottom-color:var(--matter-helper-theme);border-right-color:var(--matter-helper-theme);border-top-color:transparent;box-shadow:inset 1px 0 var(--matter-helper-theme),inset -1px 0 var(--matter-helper-theme),inset 0 -1px var(--matter-helper-theme);outline:none}.matter-textfield-outlined>input:focus+span,.matter-textfield-outlined>textarea:focus+span{color:var(--matter-helper-theme)}.matter-textfield-outlined>input:focus+span:after,.matter-textfield-outlined>input:focus+span:before,.matter-textfield-outlined>textarea:focus+span:after,.matter-textfield-outlined>textarea:focus+span:before{border-top-color:var(--matter-helper-theme)!important;box-shadow:inset 0 1px var(--matter-helper-theme)}.matter-textfield-outlined>input:disabled,.matter-textfield-outlined>input:disabled+span,.matter-textfield-outlined>textarea:disabled,.matter-textfield-outlined>textarea:disabled+span{border-left-color:var(--matter-helper-safari1)!important;border-bottom-color:var(--matter-helper-safari1)!important;border-right-color:var(--matter-helper-safari1)!important;border-top-color:transparent!important;color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);pointer-events:none}.matter-textfield-outlined>input:disabled+span:after,.matter-textfield-outlined>input:disabled+span:before,.matter-textfield-outlined>textarea:disabled+span:after,.matter-textfield-outlined>textarea:disabled+span:before{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown,.matter-textfield-outlined>input:disabled:placeholder-shown+span,.matter-textfield-outlined>textarea:disabled:placeholder-shown,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown+span:after,.matter-textfield-outlined>input:disabled:placeholder-shown+span:before,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:after,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:before{border-top-color:transparent!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-outlined>input,.matter-textfield-outlined>input+span,.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea,.matter-textfield-outlined>textarea+span,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{transition-duration:.1s}}}.matter-tooltip,.matter-tooltip-top{z-index:10;position:absolute;left:0;right:0;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:10px;font-weight:400;line-height:16px;white-space:nowrap;text-transform:none;text-align:center;pointer-events:none}.matter-tooltip{bottom:-40px}.matter-tooltip-top{top:-40px}.matter-tooltip-top>span,.matter-tooltip>span{position:-webkit-sticky;position:sticky;left:0;right:0;display:inline-block;margin:0 -100vw;border:8px solid transparent;border-radius:12px;padding:4px 8px;color:rgb(var(--matter-surface-rgb,255,255,255));background-clip:padding-box;background-image:linear-gradient(rgba(var(--matter-surface-rgb,255,255,255),.34),rgba(var(--matter-surface-rgb,255,255,255),.34));background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.85);transform:scale(0);opacity:0;pointer-events:auto;transition:transform 75ms,opacity 75ms}.matter-tooltip-top:hover>span,.matter-tooltip:hover>span,:not(html):hover>.matter-tooltip-top>span,:not(html):hover>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}:focus-within>.matter-tooltip-top>span,:focus-within>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}@media (hover:none),(pointer:coarse){.matter-tooltip,.matter-tooltip-top{font-size:14px;line-height:20px}.matter-tooltip{bottom:-48px}.matter-tooltip-top{top:-48px}.matter-tooltip-top>span,.matter-tooltip>span{padding:6px 16px}}.matter-primary{--matter-theme-rgb:var(--matter-primary-rgb,33,150,243);--matter-ontheme-rgb:var(--matter-onprimary-rgb,255,255,255)}.matter-secondary{--matter-theme-rgb:var(--matter-secondary-rgb,102,0,238);--matter-ontheme-rgb:var(--matter-onsecondary-rgb,255,255,255)}.matter-error{--matter-theme-rgb:var(--matter-warning-rgb,238,0,0)}.matter-error,.matter-warning{--matter-ontheme-rgb:var(--matter-onwarning-rgb,255,255,255)}.matter-warning{--matter-theme-rgb:var(--matter-warning-rgb,238,102,0)}.matter-success{--matter-theme-rgb:var(--matter-success-rgb,17,136,34);--matter-ontheme-rgb:var(--matter-onsuccess-rgb,255,255,255)}.matter-primary-text{color:rgb(var(--matter-primary-rgb,33,150,243))}.matter-secondary-text{color:rgb(var(--matter-secondary-rgb,102,0,238))}.matter-error-text{color:rgb(var(--matter-warning-rgb,238,0,0))}.matter-warning-text{color:rgb(var(--matter-warning-rgb,238,102,0))}.matter-success-text{color:rgb(var(--matter-success-rgb,17,136,34))}.matter-h1{font-size:96px;letter-spacing:-1.5px;line-height:120px}.matter-h1,.matter-h2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:300}.matter-h2{font-size:60px;letter-spacing:-.5px;line-height:80px}.matter-h3{font-size:48px;letter-spacing:0;line-height:64px}.matter-h3,.matter-h4{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-h4{font-size:34px;letter-spacing:.25px;line-height:48px}.matter-h5{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:24px;font-weight:400;letter-spacing:0;line-height:36px}.matter-h6{font-size:20px;font-weight:500;line-height:28px}.matter-h6,.matter-subtitle1{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);letter-spacing:.15px}.matter-subtitle1{font-size:16px;font-weight:400;line-height:24px}.matter-subtitle2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;letter-spacing:.1px;line-height:20px}.matter-body1{font-size:16px;letter-spacing:.5px;line-height:24px}.matter-body1,.matter-body2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-body2{letter-spacing:.25px}.matter-body2,.matter-button{font-size:14px;line-height:20px}.matter-button{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:500;letter-spacing:1.25px;text-transform:uppercase}.matter-caption{font-size:12px;letter-spacing:.4px;line-height:20px}.matter-caption,.matter-overline{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-overline{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;line-height:16px} \ No newline at end of file +.matter-button-contained{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer;transition:box-shadow .2s}.matter-button-contained::-moz-focus-inner{border:none}.matter-button-contained:after,.matter-button-contained:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-contained:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-contained:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-contained:focus,.matter-button-contained:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.matter-button-contained:hover:before{opacity:.08}.matter-button-contained:focus:before{opacity:.24}.matter-button-contained:hover:focus:before{opacity:.32}.matter-button-contained:active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.matter-button-contained:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-contained:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);box-shadow:none;cursor:auto}.matter-button-contained:disabled:after,.matter-button-contained:disabled:before{opacity:0}.matter-button-unelevated{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));position:relative;display:inline-block;box-sizing:border-box;border:none;border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-ontheme));background-color:rgb(var(--matter-helper-theme));font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-unelevated::-moz-focus-inner{border:none}.matter-button-unelevated:after,.matter-button-unelevated:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-unelevated:before{background-color:rgb(var(--matter-helper-ontheme));transition:opacity .2s}.matter-button-unelevated:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-unelevated:hover:before{opacity:.08}.matter-button-unelevated:focus:before{opacity:.24}.matter-button-unelevated:hover:focus:before{opacity:.32}.matter-button-unelevated:active:after{opacity:.32;background-size:100% 100%;transition:background-size 0s}.matter-button-unelevated:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.12);cursor:auto}.matter-button-unelevated:disabled:after,.matter-button-unelevated:disabled:before{opacity:0}.matter-button-outlined{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:1px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24);border-radius:4px;padding:0 16px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:34px;outline:none;cursor:pointer}.matter-button-outlined::-moz-focus-inner{border:none}.matter-button-outlined:after,.matter-button-outlined:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:3px;opacity:0}.matter-button-outlined:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-outlined:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-outlined:hover:before{opacity:.04}.matter-button-outlined:focus:before{opacity:.12}.matter-button-outlined:hover:focus:before{opacity:.16}.matter-button-outlined:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-outlined:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-outlined:disabled:after,.matter-button-outlined:disabled:before{opacity:0}.matter-button-text{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;box-sizing:border-box;margin:0;border:none;border-radius:4px;padding:0 8px;min-width:64px;height:36px;vertical-align:middle;text-align:center;text-overflow:ellipsis;color:rgb(var(--matter-helper-theme));background-color:transparent;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;line-height:36px;outline:none;cursor:pointer}.matter-button-text::-moz-focus-inner{border:none}.matter-button-text:after,.matter-button-text:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;opacity:0}.matter-button-text:before{background-color:rgb(var(--matter-helper-theme));transition:opacity .2s}.matter-button-text:after{background:radial-gradient(circle at center,currentColor 1%,transparent 0) 50%/10000% 10000% no-repeat;transition:opacity 1s,background-size .5s}.matter-button-text:hover:before{opacity:.04}.matter-button-text:focus:before{opacity:.12}.matter-button-text:hover:focus:before{opacity:.16}.matter-button-text:active:after{opacity:.16;background-size:100% 100%;transition:background-size 0s}.matter-button-text:disabled{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:transparent;cursor:auto}.matter-button-text:disabled:after,.matter-button-text:disabled:before{opacity:0}.matter-link{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-safari1:rgba(var(--matter-helper-theme),0.12);border-radius:4px;color:rgb(var(--matter-helper-theme));text-decoration:none;transition:background-color .2s,box-shadow .2s}.matter-link:hover{text-decoration:underline}.matter-link:focus{background-color:var(--matter-helper-safari1);box-shadow:0 0 0 .16em var(--matter-helper-safari1);outline:none}.matter-link:active{background-color:transparent;box-shadow:none}.matter-progress-circular{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;box-sizing:border-box;border:none;border-radius:50%;padding:.25em;width:3em;height:3em;color:rgb(var(--matter-helper-theme));background-color:transparent;font-size:16px;overflow:hidden}.matter-progress-circular::-webkit-progress-bar{background-color:transparent}.matter-progress-circular:indeterminate{animation:matter-progress-circular 6s cubic-bezier(.3,.6,1,1) infinite}.matter-progress-circular:indeterminate,:-ms-lang(x){animation:none}.matter-progress-circular:indeterminate::-webkit-progress-value,.matter-progress-circular:indeterminate:before{content:"";display:block;box-sizing:border-box;margin-bottom:.25em;border:.25em solid;border-radius:50%;width:100%!important;height:100%;background-color:transparent;-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-moz-progress-bar{box-sizing:border-box;border:.25em solid;border-radius:50%;width:100%;height:100%;background-color:transparent;clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);animation:matter-progress-circular-pseudo .75s linear infinite alternate;animation-play-state:inherit;animation-delay:inherit}.matter-progress-circular:indeterminate::-ms-fill{animation-name:-ms-ring}@keyframes matter-progress-circular{0%{transform:rotate(0deg)}12.5%{transform:rotate(180deg);animation-timing-function:linear}25%{transform:rotate(630deg)}37.5%{transform:rotate(810deg);animation-timing-function:linear}50%{transform:rotate(1260deg)}62.5%{transform:rotate(4turn);animation-timing-function:linear}75%{transform:rotate(1890deg)}87.5%{transform:rotate(2070deg);animation-timing-function:linear}to{transform:rotate(7turn)}}@keyframes matter-progress-circular-pseudo{0%{-webkit-clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0);clip-path:polygon(50% 50%,37% 0,50% 0,50% 0,50% 0,50% 0)}18%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0);clip-path:polygon(50% 50%,37% 0,100% 0,100% 0,100% 0,100% 0)}53%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,100% 100%,100% 100%)}88%{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 100%)}to{-webkit-clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%);clip-path:polygon(50% 50%,37% 0,100% 0,100% 100%,0 100%,0 63%)}}.matter-progress-linear{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;width:160px;height:4px;vertical-align:middle;color:rgb(var(--matter-helper-theme));background-color:rgba(var(--matter-helper-theme),.12)}.matter-progress-linear::-webkit-progress-bar{background-color:transparent}.matter-progress-linear::-webkit-progress-value{background-color:currentColor;transition:all .2s}.matter-progress-linear::-moz-progress-bar{background-color:currentColor;transition:all .2s}.matter-progress-linear::-ms-fill{border:none;background-color:currentColor;transition:all .2s}.matter-progress-linear:indeterminate{background-size:200% 100%;background-image:linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 16%,transparent 0),linear-gradient(90deg,currentColor 25%,transparent 0);animation:matter-progress-linear 1.8s linear infinite}.matter-progress-linear:indeterminate::-webkit-progress-value{background-color:transparent}.matter-progress-linear:indeterminate::-moz-progress-bar{background-color:transparent}.matter-progress-linear:indeterminate::-ms-fill{animation-name:none}@keyframes matter-progress-linear{0%{background-position:32% 0,32% 0,50% 0}2%{background-position:32% 0,32% 0,50% 0}21%{background-position:32% 0,-18% 0,0 0}42%{background-position:32% 0,-68% 0,-27% 0}50%{background-position:32% 0,-93% 0,-46% 0}56%{background-position:32% 0,-118% 0,-68% 0}66%{background-position:-11% 0,-200% 0,-100% 0}71%{background-position:-32% 0,-200% 0,-100% 0}79%{background-position:-54% 0,-242% 0,-100% 0}86%{background-position:-68% 0,-268% 0,-100% 0}to{background-position:-100% 0,-300% 0,-100% 0}}.matter-checkbox{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));--matter-helper-ontheme:var(--matter-ontheme-rgb,var(--matter-onprimary-rgb,255,255,255));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-checkbox>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:3px 1px;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:2px;width:18px;height:18px;outline:none;cursor:pointer;transition:border-color .2s,background-color .2s}.matter-checkbox>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-checkbox>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);pointer-events:none;transition:opacity .3s,transform .2s}.matter-checkbox>input+span:after{content:"";z-index:1;display:block;position:absolute;top:3px;left:1px;width:10px;height:5px;border-color:transparent;border-style:solid;border-width:0 0 2px 2px;pointer-events:none;transform:translate(3px,4px) rotate(-45deg);transition:border-color .2s}.matter-checkbox>input:checked,.matter-checkbox>input:indeterminate{border-color:rgb(var(--matter-helper-theme));background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:before,.matter-checkbox>input:indeterminate+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-checkbox>input:checked+span:after,.matter-checkbox>input:indeterminate+span:after{border-color:rgb(var(--matter-helper-ontheme,255,255,255))}.matter-checkbox>input:indeterminate+span:after{border-left-width:0;transform:translate(4px,3px)}.matter-checkbox:hover>input+span:before{opacity:.04}.matter-checkbox>input:focus+span:before{opacity:.12}.matter-checkbox:hover>input:focus+span:before{opacity:.16}.matter-checkbox:active:hover>input,.matter-checkbox:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-checkbox:active>input:checked{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6)}.matter-checkbox:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-checkbox>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:checked:disabled,.matter-checkbox>input:indeterminate:disabled{border-color:transparent;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-checkbox>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-checkbox>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;position:relative;display:inline-block;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-radio>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;position:absolute;display:block;box-sizing:border-box;margin:2px 0;border:2px solid;border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:50%;width:20px;height:20px;outline:none;cursor:pointer;transition:border-color .2s}.matter-radio>input+span{display:inline-block;box-sizing:border-box;padding-left:30px;width:inherit;cursor:pointer}.matter-radio>input+span:before{content:"";position:absolute;left:-10px;top:-8px;display:block;border-radius:50%;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(0);pointer-events:none;transition:opacity .3s,transform .2s}.matter-radio>input+span:after{content:"";display:block;position:absolute;top:2px;left:0;border-radius:50%;width:10px;height:10px;background-color:rgb(var(--matter-helper-theme));transform:translate(5px,5px) scale(0);transition:transform .2s}.matter-radio>input:checked{border-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:before{background-color:rgb(var(--matter-helper-theme))}.matter-radio>input:checked+span:after{transform:translate(5px,5px) scale(1)}.matter-radio:hover>input+span:before{transform:scale(1);opacity:.04}.matter-radio>input:focus+span:before{transform:scale(1);opacity:.12}.matter-radio:hover>input:focus+span:before{transform:scale(1);opacity:.16}.matter-radio:active>input{border-color:rgb(var(--matter-helper-theme))}.matter-radio:active:hover>input+span:before,.matter-radio:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-radio>input:disabled{border-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);cursor:auto}.matter-radio>input:disabled+span:before{opacity:0;transform:scale(0)}.matter-radio>input:disabled+span:after{background-color:currentColor}.matter-switch{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));z-index:0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-switch,.matter-switch>input{position:relative;display:inline-block}.matter-switch>input{appearance:none;-moz-appearance:none;-webkit-appearance:none;z-index:1;float:right;margin:0 0 0 5px;border:5px solid transparent;border-radius:12px;width:46px;height:24px;background-clip:padding-box;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);outline:none;cursor:pointer;transition:background-color .2s,opacity .2s}.matter-switch>input+span{display:inline-block;box-sizing:border-box;margin-right:-51px;padding-right:51px;width:inherit;cursor:pointer}.matter-switch>input+span:before{right:11px;top:-8px;display:block;width:40px;height:40px;background-color:rgb(var(--matter-onsurface-rgb,0,0,0));opacity:0;transform:scale(1);transition:opacity .3s .1s,transform .2s .1s}.matter-switch>input+span:after,.matter-switch>input+span:before{content:"";position:absolute;border-radius:50%;pointer-events:none}.matter-switch>input+span:after{z-index:1;top:2px;right:21px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);transition:background-color .2s,transform .2s}.matter-switch>input:checked{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:checked+span:before{right:-5px;background-color:rgb(var(--matter-helper-theme))}.matter-switch>input:checked+span:after{background-color:rgb(var(--matter-helper-theme));transform:translateX(16px)}.matter-switch:hover>input+span:before{opacity:.04}.matter-switch>input:focus+span:before{opacity:.12}.matter-switch:hover>input:focus+span:before{opacity:.16}.matter-switch:active>input{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch:active>input:checked{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-switch:active>input+span:before{opacity:1;transform:scale(0);transition:transform 0s,opacity 0s}.matter-switch>input:disabled{background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);opacity:.38;cursor:default}.matter-switch>input:checked:disabled{background-color:rgba(var(--matter-helper-theme),.6)}.matter-switch>input:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0,.38));cursor:default}.matter-switch>input:disabled+span:before{z-index:1;margin:10px;width:20px;height:20px;background-color:rgb(var(--matter-surface-rgb,255,255,255));transform:scale(1);opacity:1;transition:none}.matter-switch>input:disabled+span:after{opacity:.38}.matter-textfield-standard{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-standard>input,.matter-textfield-standard>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);padding:0 0 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-standard>input+span,.matter-textfield-standard>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 0 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .2s}.matter-textfield-standard:hover>input,.matter-textfield-standard:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87)}.matter-textfield-standard>input:not(:focus):placeholder-shown+span,.matter-textfield-standard>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:56px}.matter-textfield-standard>input:focus,.matter-textfield-standard>textarea:focus{outline:none}.matter-textfield-standard>input:focus+span,.matter-textfield-standard>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-standard>input:focus+span:after,.matter-textfield-standard>textarea:focus+span:after{transform:scale(1)}.matter-textfield-standard>input:disabled,.matter-textfield-standard>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}.matter-textfield-standard>input:disabled+span,.matter-textfield-standard>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-standard>input,.matter-textfield-standard>input+span,.matter-textfield-standard>input+span:after,.matter-textfield-standard>textarea,.matter-textfield-standard>textarea+span,.matter-textfield-standard>textarea+span:after{transition-duration:.1s}}}.matter-textfield-filled{--matter-helper-theme:var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243));position:relative;display:inline-block;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-filled>input,.matter-textfield-filled>textarea{display:block;box-sizing:border-box;margin:0;border:none;border-top:24px solid transparent;border-bottom:1px solid rgba(var(--matter-onsurface-rgb,0,0,0),.6);border-radius:4px 4px 0 0;padding:0 12px 7px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.04);box-shadow:none;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:rgb(var(--matter-helper-theme));transition:border-bottom .2s,background-color .2s}.matter-textfield-filled>input+span,.matter-textfield-filled>textarea+span{position:absolute;top:0;left:0;right:0;bottom:0;display:block;box-sizing:border-box;padding:7px 12px 0;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:18px;pointer-events:none;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea+span:after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:2px;background-color:rgb(var(--matter-helper-theme));transform-origin:bottom center;transform:scaleX(0);transition:transform .3s}.matter-textfield-filled:hover>input,.matter-textfield-filled:hover>textarea{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.08)}.matter-textfield-filled>input:not(:focus):placeholder-shown+span,.matter-textfield-filled>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:48px}.matter-textfield-filled>input:focus,.matter-textfield-filled>textarea:focus{outline:none}.matter-textfield-filled>input:focus+span,.matter-textfield-filled>textarea:focus+span{color:rgb(var(--matter-helper-theme))}.matter-textfield-filled>input:focus+span:after,.matter-textfield-filled>textarea:focus+span:after{transform:scale(1)}.matter-textfield-filled>input:disabled,.matter-textfield-filled>textarea:disabled{border-bottom-color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.24)}.matter-textfield-filled>input:disabled+span,.matter-textfield-filled>textarea:disabled+span{color:rgba(var(--matter-onsurface-rgb,0,0,0),.38)}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-filled>input,.matter-textfield-filled>input+span,.matter-textfield-filled>input+span:after,.matter-textfield-filled>textarea,.matter-textfield-filled>textarea+span,.matter-textfield-filled>textarea+span:after{transition-duration:.1s}}}.matter-textfield-outlined{--matter-helper-theme:rgb(var(--matter-theme-rgb,var(--matter-primary-rgb,33,150,243)));--matter-helper-safari1:rgba(var(--matter-onsurface-rgb,0,0,0),0.38);--matter-helper-safari2:rgba(var(--matter-onsurface-rgb,0,0,0),0.6);--matter-helper-safari3:rgba(var(--matter-onsurface-rgb,0,0,0),0.87);position:relative;display:inline-block;padding-top:6px;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:16px;line-height:1.5}.matter-textfield-outlined>input,.matter-textfield-outlined>textarea{box-sizing:border-box;margin:0;border:1px solid var(--matter-helper-safari2);border-top:1px solid transparent;border-radius:4px;padding:15px 13px;width:100%;height:inherit;color:rgba(var(--matter-onsurface-rgb,0,0,0),.87);-webkit-text-fill-color:currentColor;background-color:transparent;box-shadow:inset 1px 0 transparent,inset -1px 0 transparent,inset 0 -1px transparent;font-family:inherit;font-size:inherit;line-height:inherit;caret-color:var(--matter-helper-theme);transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown{border-top-color:var(--matter-helper-safari2)}.matter-textfield-outlined>input+span,.matter-textfield-outlined>textarea+span{position:absolute;top:0;left:0;display:flex;width:100%;max-height:100%;color:rgba(var(--matter-onsurface-rgb,0,0,0),.6);font-size:75%;line-height:15px;cursor:text;transition:color .2s,font-size .2s,line-height .2s}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span{font-size:inherit;line-height:68px}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{content:"";display:block;box-sizing:border-box;margin-top:6px;border-top:1px solid var(--matter-helper-safari2);min-width:10px;height:8px;pointer-events:none;box-shadow:inset 0 1px transparent;transition:border .2s,box-shadow .2s}.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea+span:before{margin-right:4px;border-left:1px solid transparent;border-radius:4px 0}.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>textarea+span:after{flex-grow:1;margin-left:4px;border-right:1px solid transparent;border-radius:0 4px}.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>input:not(:focus):placeholder-shown+span:before,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:after,.matter-textfield-outlined>textarea:not(:focus):placeholder-shown+span:before{border-top-color:transparent}.matter-textfield-outlined:hover>input,.matter-textfield-outlined:hover>textarea{border-left-color:var(--matter-helper-safari3);border-bottom-color:var(--matter-helper-safari3);border-right-color:var(--matter-helper-safari3);border-top-color:transparent}.matter-textfield-outlined:hover>input+span:after,.matter-textfield-outlined:hover>input+span:before,.matter-textfield-outlined:hover>textarea+span:after,.matter-textfield-outlined:hover>textarea+span:before{border-top-color:var(--matter-helper-safari3)}.matter-textfield-outlined:hover>input:not(:focus):placeholder-shown,.matter-textfield-outlined:hover>textarea:not(:focus):placeholder-shown{border-color:var(--matter-helper-safari3)}.matter-textfield-outlined>input:focus,.matter-textfield-outlined>textarea:focus{border-left-color:var(--matter-helper-theme);border-bottom-color:var(--matter-helper-theme);border-right-color:var(--matter-helper-theme);border-top-color:transparent;box-shadow:inset 1px 0 var(--matter-helper-theme),inset -1px 0 var(--matter-helper-theme),inset 0 -1px var(--matter-helper-theme);outline:none}.matter-textfield-outlined>input:focus+span,.matter-textfield-outlined>textarea:focus+span{color:var(--matter-helper-theme)}.matter-textfield-outlined>input:focus+span:after,.matter-textfield-outlined>input:focus+span:before,.matter-textfield-outlined>textarea:focus+span:after,.matter-textfield-outlined>textarea:focus+span:before{border-top-color:var(--matter-helper-theme)!important;box-shadow:inset 0 1px var(--matter-helper-theme)}.matter-textfield-outlined>input:disabled,.matter-textfield-outlined>input:disabled+span,.matter-textfield-outlined>textarea:disabled,.matter-textfield-outlined>textarea:disabled+span{border-left-color:var(--matter-helper-safari1)!important;border-bottom-color:var(--matter-helper-safari1)!important;border-right-color:var(--matter-helper-safari1)!important;border-top-color:transparent!important;color:rgba(var(--matter-onsurface-rgb,0,0,0),.38);pointer-events:none}.matter-textfield-outlined>input:disabled+span:after,.matter-textfield-outlined>input:disabled+span:before,.matter-textfield-outlined>textarea:disabled+span:after,.matter-textfield-outlined>textarea:disabled+span:before{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown,.matter-textfield-outlined>input:disabled:placeholder-shown+span,.matter-textfield-outlined>textarea:disabled:placeholder-shown,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span{border-top-color:var(--matter-helper-safari1)!important}.matter-textfield-outlined>input:disabled:placeholder-shown+span:after,.matter-textfield-outlined>input:disabled:placeholder-shown+span:before,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:after,.matter-textfield-outlined>textarea:disabled:placeholder-shown+span:before{border-top-color:transparent!important}@media not all and (min-resolution:.001dpcm){@supports (-webkit-appearance:none){.matter-textfield-outlined>input,.matter-textfield-outlined>input+span,.matter-textfield-outlined>input+span:after,.matter-textfield-outlined>input+span:before,.matter-textfield-outlined>textarea,.matter-textfield-outlined>textarea+span,.matter-textfield-outlined>textarea+span:after,.matter-textfield-outlined>textarea+span:before{transition-duration:.1s}}}.matter-tooltip,.matter-tooltip-top{z-index:10;position:absolute;left:0;right:0;font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:10px;font-weight:400;line-height:16px;white-space:nowrap;text-transform:none;text-align:center;pointer-events:none}.matter-tooltip{bottom:-40px}.matter-tooltip-top{top:-40px}.matter-tooltip-top>span,.matter-tooltip>span{position:-webkit-sticky;position:sticky;left:0;right:0;display:inline-block;margin:0 -100vw;border:8px solid transparent;border-radius:12px;padding:4px 8px;color:rgb(var(--matter-surface-rgb,255,255,255));background-clip:padding-box;background-image:linear-gradient(rgba(var(--matter-surface-rgb,255,255,255),.34),rgba(var(--matter-surface-rgb,255,255,255),.34));background-color:rgba(var(--matter-onsurface-rgb,0,0,0),.85);transform:scale(0);opacity:0;pointer-events:auto;transition:transform 75ms,opacity 75ms}.matter-tooltip-top:hover>span,.matter-tooltip:hover>span,:not(html):hover>.matter-tooltip-top>span,:not(html):hover>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}:focus-within>.matter-tooltip-top>span,:focus-within>.matter-tooltip>span{transform:scale(1);opacity:1;transition:transform .15s,opacity .15s}@media (hover:none),(pointer:coarse){.matter-tooltip,.matter-tooltip-top{font-size:14px;line-height:20px}.matter-tooltip{bottom:-48px}.matter-tooltip-top{top:-48px}.matter-tooltip-top>span,.matter-tooltip>span{padding:6px 16px}}.matter-primary{--matter-theme-rgb:var(--matter-primary-rgb,33,150,243);--matter-ontheme-rgb:var(--matter-onprimary-rgb,255,255,255)}.matter-secondary{--matter-theme-rgb:var(--matter-secondary-rgb,102,0,238);--matter-ontheme-rgb:var(--matter-onsecondary-rgb,255,255,255)}.matter-error{--matter-theme-rgb:var(--matter-warning-rgb,238,0,0)}.matter-error,.matter-warning{--matter-ontheme-rgb:var(--matter-onwarning-rgb,255,255,255)}.matter-warning{--matter-theme-rgb:var(--matter-warning-rgb,238,102,0)}.matter-success{--matter-theme-rgb:var(--matter-success-rgb,17,136,34);--matter-ontheme-rgb:var(--matter-onsuccess-rgb,255,255,255)}.matter-primary-text{color:rgb(var(--matter-primary-rgb,33,150,243))}.matter-secondary-text{color:rgb(var(--matter-secondary-rgb,102,0,238))}.matter-error-text{color:rgb(var(--matter-warning-rgb,238,0,0))}.matter-warning-text{color:rgb(var(--matter-warning-rgb,238,102,0))}.matter-success-text{color:rgb(var(--matter-success-rgb,17,136,34))}.matter-h1{font-size:96px;letter-spacing:-1.5px;line-height:120px}.matter-h1,.matter-h2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:300}.matter-h2{font-size:60px;letter-spacing:-.5px;line-height:80px}.matter-h3{font-size:48px;letter-spacing:0;line-height:64px}.matter-h3,.matter-h4{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-h4{font-size:34px;letter-spacing:.25px;line-height:48px}.matter-h5{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:24px;font-weight:400;letter-spacing:0;line-height:36px}.matter-h6{font-size:20px;font-weight:500;line-height:28px}.matter-h6,.matter-subtitle1{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);letter-spacing:.15px}.matter-subtitle1{font-size:16px;font-weight:400;line-height:24px}.matter-subtitle2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-size:14px;font-weight:500;letter-spacing:.1px;line-height:20px}.matter-body1{font-size:16px;letter-spacing:.5px;line-height:24px}.matter-body1,.matter-body2{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-body2{letter-spacing:.25px}.matter-body2,.matter-button{font-size:14px;line-height:20px}.matter-button{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:500;letter-spacing:1.25px;text-transform:uppercase}.matter-caption{font-size:12px;letter-spacing:.4px;line-height:20px}.matter-caption,.matter-overline{font-family:var(--matter-font-family,"Roboto","Segoe UI",BlinkMacSystemFont,system-ui,-apple-system);font-weight:400}.matter-overline{font-size:10px;letter-spacing:1.5px;text-transform:uppercase;line-height:16px} \ No newline at end of file diff --git a/src/components/components.css b/src/components/components.css index 488f09f..e5c2294 100644 --- a/src/components/components.css +++ b/src/components/components.css @@ -11,6 +11,9 @@ /* Button Text */ @import "./buttons/text/button-text.css"; +/* Link */ +@import "./links/link.css"; + /* Progress Circular */ @import "./progress/circular/progress-circular.css"; diff --git a/src/components/links/link.css b/src/components/links/link.css new file mode 100644 index 0000000..660dbf1 --- /dev/null +++ b/src/components/links/link.css @@ -0,0 +1,26 @@ +.matter-link { + --matter-helper-theme: var(--matter-theme-rgb, var(--matter-primary-rgb, 33, 150, 243)); + --matter-helper-safari1: rgba(var(--matter-helper-theme), 0.12); + border-radius: 4px; + color: rgb(var(--matter-helper-theme)); + text-decoration: none; + transition: background-color 0.2s, box-shadow 0.2s; +} + +/* Hover */ +.matter-link:hover { + text-decoration: underline; +} + +/* Focus */ +.matter-link:focus { + background-color: var(--matter-helper-safari1); + box-shadow: 0 0 0 0.16em var(--matter-helper-safari1); + outline: none; +} + +/* Active */ +.matter-link:active { + background-color: transparent; + box-shadow: none; +} diff --git a/src/components/links/link.json b/src/components/links/link.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/src/components/links/link.json @@ -0,0 +1 @@ +{} diff --git a/src/components/links/link.spec.html b/src/components/links/link.spec.html new file mode 100644 index 0000000..99a2896 --- /dev/null +++ b/src/components/links/link.spec.html @@ -0,0 +1,23 @@ + + +The purpose of Matter is to provide the most easy-to-use but accurate implementation of Material Design Components. + +Matter has probably the lowest entry-barrier among Material Design Component libraries. The only technical knowledge needed to use it is basic HTML5. It doesn't rely on JavaScript, it only needs one to three HTML elements and a CSS class per component to work. The markup of the components is semantic by design. + +Matter is built with theming in mind. Its components can be customized by specifying certain colors and/or fonts. The granularity of customization is variable: components can be themed on global level, component level, component instance level, or on any level between. + +