styles = html`<style>
:root {
--button-border-radius: var(--border-radius-2, 0.25rem);
--border-color: #aaa; /* tachyons's light-silver */
--border-color-light: #eee; /* tachyons's light-gray */
}
/* https://observablehq.com/@saneef/is-observable-inputs-style-able */
form.${ns} {
width: auto;
}
.${ns} input,
.${ns} textarea,
.${ns} select,
.${ns} button {
font-family: var(--brand-font);
}
.${ns} input[type="text"],
.${ns} textarea,
.${ns} select,
.${ns} button {
background-color: white;
border: 1px solid var(--border-color);
border-radius: var(--button-border-radius);
}
.${ns} input[type="text"],
.${ns} textarea,
.${ns} button {
padding: var(--spacing-extra-small) var(--spacing-small);
}
.${ns} select {
padding-top: var(--spacing-extra-small);
padding-bottom: var(--spacing-extra-small);
}
.${ns} button:hover,
.${ns} button:focus,
.${ns} button:active {
background-color: var(--light-gray, #eee);
}
/* Icon */
.icon {
display: inline-block;
position: relative;
vertical-align: middle;
width: 1.5rem;
height: 1.5rem;
color: var(--gray, #777)
}
.icon svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon--sm {
width: 1rem;
height: 1rem;
}
.icon--danger {
color: var(--red, #ff4136)
}
.icon--success {
color: var(--green, #19a974)
}
/* Button Group*/
.button-group {
display: flex;
}
.button-group form.${ns} + form.${ns} {
margin-left: -1px;
}
.button-group form.${ns} button {
border-radius: 0;
}
.button-group form.${ns}:first-child button {
border-top-left-radius: var(--button-border-radius);
border-bottom-left-radius: var(--button-border-radius);
}
.button-group form.${ns}:last-child button {
border-top-right-radius: var(--button-border-radius);
border-bottom-right-radius: var(--button-border-radius);
}
/* Button Label */
.button-label {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.button-label > * + * {
margin-left: var(--spacing-extra-small, 0.25rem);
}
.button-label__text {}
/* Card */
.card {
display: block;
background: white;
padding: 1rem; /* pa3 or --spacing-medium */
border: 1px solid var(--border-color-light);
border-radius: var(--border-radius-3);
}
.card--compact {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
/* Loader */
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
.spinner .icon {
color: var(--brand);
}
.spinner svg {
animation: rotate ease-out 1.2s infinite;
}
</style>`