components.css

.canon-Box{font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary)}.canon-Button{all:unset;user-select:none;font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-bold);cursor:pointer;border-radius:var(--canon-radius-2);justify-content:center;align-items:center;gap:var(--canon-space-1_5);padding:0;display:inline-flex;&:disabled{cursor:not-allowed}}.canon-Button--variant-primary{background-color:var(--canon-bg-solid);color:var(--canon-fg-solid);transition:background-color .15s;&:hover{background-color:var(--canon-bg-solid-hover)}&:active{background-color:var(--canon-bg-solid-pressed)}&:disabled{background-color:var(--canon-bg-solid-disabled);color:var(--canon-fg-solid-disabled)}}.canon-Button--variant-secondary{background-color:var(--canon-bg-elevated);box-shadow:inset 0 0 0 1px var(--canon-border);color:var(--canon-fg-primary);transition:box-shadow .15s;&:hover{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}&:active{box-shadow:inset 0 0 0 1px var(--canon-border-pressed)}&:disabled{box-shadow:inset 0 0 0 1px var(--canon-border-disabled);color:var(--canon-fg-disabled)}}.canon-Button--size-medium{font-size:var(--canon-font-size-4);padding:0 var(--canon-space-3);height:40px}.canon-Button--size-small{font-size:var(--canon-font-size-3);padding:0 var(--canon-space-2);height:32px}.canon-Button--size-small .canon-Button--icon{width:1rem;height:1rem}.canon-Button--size-medium .canon-Button--icon{width:1.5rem;height:1.5rem}.canon-Flex{display:flex}.canon-Grid{display:grid}.canon-Container{max-width:75rem;margin:0 auto;padding:0 1rem}.canon-Icon{width:1rem;height:1rem}.canon-CheckboxRoot{all:unset;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--canon-border);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex;&[data-checked]{background-color:var(--canon-bg-solid);color:var(--canon-fg-solid)}}.canon-CheckboxLabel{justify-content:center;align-items:center;gap:var(--canon-space-2);font-size:var(--canon-font-size-xs);font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary);user-select:none;flex-direction:row;display:flex;&:hover{& .canon-CheckboxRoot{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}}.canon-CheckboxIndicator{color:var(--canon-fg-accent);justify-content:center;align-items:center;display:flex}.table{background-color:var(--canon-bg-elevated);border-radius:var(--canon-radius-2);width:100%;padding-bottom:var(--canon-space-0_5);padding-top:var(--canon-space-0_5);font-size:var(--canon-font-size-3);font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);position:relative;overflow:auto;& table{caption-side:bottom;width:100%;font-size:var(--canon-font-size-sm);border-collapse:collapse}}.table-head{text-align:left;padding:var(--canon-space-3)}.table-body{& tr:last-child{border-bottom:none}}.table-row{transition:color .2s ease-in-out;&:hover td{background-color:var(--canon-bg-tint)}& .table-cell:first-child{border-top-left-radius:var(--canon-radius-2);border-bottom-left-radius:var(--canon-radius-2);box-shadow:inset 4px 2px 0 0 var(--canon-bg-elevated),inset 4px -2px 0 0 var(--canon-bg-elevated);padding-left:var(--canon-space-3)}& .table-cell:last-child{border-top-right-radius:var(--canon-radius-2);border-bottom-right-radius:var(--canon-radius-2);box-shadow:inset -4px 2px 0 0 var(--canon-bg-elevated),inset -4px -2px 0 0 var(--canon-bg-elevated);padding-right:var(--canon-space-3)}}.table-cell{padding:var(--canon-space-3);background-color:var(--canon-bg);box-shadow:inset 0px 2px 0 0 var(--canon-bg-elevated),inset 0px -2px 0 0 var(--canon-bg-elevated)}.canon-Text{font-family:var(--canon-font-regular);color:var(--canon-fg-primary);margin:0;padding:0}.canon-Text--variant-body{font-size:var(--canon-font-size-3);line-height:140%}.canon-Text--variant-subtitle{font-size:var(--canon-font-size-4);line-height:140%}.canon-Text--variant-caption{font-size:var(--canon-font-size-2);line-height:140%}.canon-Text--variant-label{font-size:var(--canon-font-size-1);line-height:140%}.canon-Text--weight-regular{font-weight:var(--canon-font-weight-regular)}.canon-Text--weight-bold{font-weight:var(--canon-font-weight-bold)}.canon-Heading{font-family:var(--canon-font-regular);color:var(--canon-fg-primary);margin:0;padding:0;line-height:100%}.canon-Heading--variant-display{font-size:var(--canon-font-size-10);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title1{font-size:var(--canon-font-size-9);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title2{font-size:var(--canon-font-size-8);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title3{font-size:var(--canon-font-size-7);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title4{font-size:var(--canon-font-size-title4);font-weight:var(--canon-font-weight-bold)}.canon-Heading--variant-title5{font-size:var(--canon-font-size-5);font-weight:var(--canon-font-weight-bold)}.canon-Input{border-radius:var(--canon-radius-3);border:1px solid var(--canon-border);padding:0 var(--canon-space-4);background-color:var(--canon-bg-elevated);font-size:var(--canon-font-size-3);font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary);width:100%;transition:border-color .2s ease-in-out,outline-color .2s ease-in-out}.canon-Input::placeholder{color:var(--canon-fg-secondary)}.canon-Input:hover{border-color:var(--canon-border-hover)}.canon-Input:focus-visible{outline-color:var(--canon-border-pressed);border-color:var(--canon-border-pressed);outline-width:0}.canon-Input[data-invalid]{border-color:var(--canon-fg-danger)}.canon-Input--size-sm{height:2rem}.canon-Input--size-md{height:2.5rem}.canon-FieldRoot{font-family:var(--canon-font-regular);flex-direction:column;width:100%;display:flex}.canon-FieldLabel{font-size:var(--canon-font-size-2);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-primary);margin-bottom:var(--canon-space-1_5)}.canon-FieldDescription{font-size:var(--canon-font-size-2);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-secondary);padding-top:var(--canon-space-1_5);margin:0}.canon-FieldError{font-size:var(--canon-font-size-2);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-danger);padding-top:var(--canon-space-1_5);margin:0}.canon-FieldValidity{font-size:var(--canon-font-size-2);font-weight:var(--canon-font-weight-regular);color:var(--canon-fg-secondary);padding-top:var(--canon-space-1_5);margin:0}