import { css } from "lit";
export const legacyStyles = css`
.legacy-button {
align-items: center;
background-color: var(--jp-layout-color2);
border-width: 0;
box-shadow: none;
color: var(--jp-ui-font-color1);
cursor: pointer;
display: flex;
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: var(--jp-widgets-font-size);
justify-content: center;
line-height: var(--jp-widgets-inline-height);
padding: 0;
user-select: none;
}
.legacy-button.primary {
background-color: var(--jp-brand-color1);
color: var(--jp-ui-inverse-font-color1);
}
.legacy-button:hover:enabled,
.legacy-button:focus:enabled {
box-shadow: 0 2px 2px 0
rgba(0, 0, 0, var(--md-shadow-key-penumbra-opacity)),
0 3px 1px -2px rgba(0, 0, 0, var(--md-shadow-key-umbra-opacity)),
0 1px 5px 0 rgba(0, 0, 0, var(--md-shadow-ambient-shadow-opacity));
}
.legacy-slider {
-webkit-appearance: none;
appearance: none;
background: var(--jp-layout-color3);
border-radius: 3px;
height: 4px;
outline: none;
}
.legacy-slider::-webkit-slider-thumb,
.legacy-slider::-moz-range-thumb {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
border-radius: 50%;
cursor: pointer;
height: var(--jp-widgets-slider-handle-size);
width: var(--jp-widgets-slider-handle-size);
}
.legacy-text {
color: var(--jp-widgets-label-color);
font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
font-size: var(--jp-widgets-font-size);
height: var(--jp-widgets-inline-height);
line-height: var(--jp-widgets-inline-height);
vertical-align: middle;
}
.legacy-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: var(--jp-widgets-input-background-color);
background-image: var(--jp-widgets-dropdown-arrow);
background-position: right center;
background-repeat: no-repeat;
background-size: 20px;
border-radius: 0;
border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
box-shadow: none;
box-sizing: border-box;
color: var(--jp-widgets-input-color);
flex: 1 1 var(--jp-widgets-inline-width-short);
font-size: var(--jp-widgets-font-size);
height: 28px;
line-height: 28px;
min-width: 0;
outline: none !important;
padding-left: calc(var(--jp-widgets-input-padding)* 2);
padding-right: 20px;
vertical-align: top;
}
.legacy-select[disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.legacy-text-input {
background: var(--jp-widgets-input-background-color);
border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
box-sizing: border-box;
color: var(--jp-widgets-input-color);
flex-grow: 1;
flex-shrink: 1;
font-size: var(--jp-widgets-font-size);
height: var(--jp-widgets-inline-height);
line-height: var(--jp-widgets-inline-height);
min-width: 0;
outline: none !important;
padding: var(--jp-widgets-input-padding) calc(var(--jp-widgets-input-padding) * 2);
}
.legacy-text-input:disabled {
opacity: var(--jp-widgets-disabled-opacity);
}
.legacy-color {
align-self: stretch;
background: var(--jp-widgets-input-background-color);
border-left: none;
border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
box-sizing: border-box;
color: var(--jp-widgets-input-color);
flex-grow: 0;
flex-shrink: 0;
height: var(--jp-widgets-inline-height);
outline: none !important;
padding: 0 2px;
width: var(--jp-widgets-inline-height);
}
.legacy-radio {
margin: 0;
vertical-align: middle;
}
.legacy-button.active {
background-color: var(--colab-primary-surface-color, --jp-layout-color3);
color: var(--jp-ui-font-color1);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, var(--md-shadow-key-penumbra-opacity)),
0 1px 10px 0 rgba(0, 0, 0, var(--md-shadow-ambient-shadow-opacity)),
0 2px 4px -1px rgba(0, 0, 0, var(--md-shadow-key-umbra-opacity));
}
.legacy-button.primary {
background-color: var(--jp-brand-color1);
color: var(--jp-ui-inverse-font-color1);
}
.legacy-button.primary.active {
background-color: var(--jp-brand-color0);
color: var(--jp-ui-inverse-font-color0);
}
.legacy-button.active {
background-color: var(--colab-primary-surface-color, --jp-layout-color3);
color: var(--jp-ui-font-color1);
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, var(--md-shadow-key-penumbra-opacity)),
0 1px 10px 0 rgba(0, 0, 0, var(--md-shadow-ambient-shadow-opacity)),
0 2px 4px -1px rgba(0, 0, 0, var(--md-shadow-key-umbra-opacity));
}
.legacy-button.primary {
background-color: var(--jp-brand-color1);
color: var(--jp-ui-inverse-font-color1);
}
.legacy-button.primary.active {
background-color: var(--jp-brand-color0);
color: var(--jp-ui-inverse-font-color0);
}
.legacy-select {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background-color: var(--jp-widgets-input-background-color);
background-image: var(--jp-widgets-dropdown-arrow);
background-position: right center;
background-repeat: no-repeat;
background-size: 20px;
border-radius: 0;
border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
box-shadow: none;
box-sizing: border-box;
color: var(--jp-widgets-input-color);
flex: 1 1 var(--jp-widgets-inline-width-short);
font-size: var(--jp-widgets-font-size);
height: inherit;
min-width: 0;
outline: none !important;
padding-left: calc(var(--jp-widgets-input-padding)* 2);
padding-right: 20px;
vertical-align: top;
}
.legacy-input {
box-sizing: border-box;
background-color: var(--colab-primary-surface-color, --jp-widgets-input-background-color);
border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
color: var(--jp-widgets-input-color);
flex-grow: 1;
flex-shrink: 1;
font-size: var(--jp-widgets-font-size);
min-width: 0;
outline: none !important;
padding: var(--jp-widgets-input-padding) calc(var(--jp-widgets-input-padding)* 2);
height: var(--jp-widgets-inline-height);
line-height: var(--jp-widgets-inline-height);
}
`;
