@sankhyalabs/sankhyablocks 1.1.24 → 1.1.25

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-calendar/ez-calendar.css

@@ -0,0 +1,319 @@
+:host {
+  /*@doc Define a família da fonte do componente.*/
+  --ez-calendar--font-family: var(--font-pattern, Arial);
+  /*@doc Define a cor dos textos dentro do componente.*/
+  --ez-calendar--color: var(--title--primary, #626e82);
+  /*@doc Define a sombra dos textos dentro do componente.*/
+  --ez-calendar--text-shadow: var(--text-shadow, 0 0 0 #353535, 0 0 1px transparent);
+
+  /* cal__body */
+  /*@doc Define a cor de fundo do corpo do calendário.*/
+  --ez-calendar__body--background-color: var(--background--xlight, #FFF);
+  /*@doc Define a cor de fundo do corpo da hora do calendário.*/
+  --ez-calendar__time--background-color: var(--background--xlight, #FAFAFA);
+  /*@doc Define o espaçamento do corpo do calendário.*/
+  --ez-calendar__body--padding: var(--space--medium, 12px) var(--space--small, 6px) ;
+  /*@doc Define o raio da borda do corpo do calendário.*/
+  --ez-calendar__body--border-radius: var(--border--radius-medium, 12px);
+  /*@doc Define a sombra do corpo do calendário.*/
+  --ez-calendar__body--shadow: var(--shadow, 0px 0px 16px 0px #000);
+
+  /* cal__container*/
+  /*@doc Define a posição do container de calendario nas camadas da página .*/
+  --ez-container--z-index: var(--more-visible, 2);
+
+  /* cal__header */
+  /*@doc Define a espessura da borda inferior do header.*/
+  --ez-calendar__header-line--stroke: 1px;
+  /*@doc Define a cor da borda inferior do header.*/
+  --ez-calendar__header-line--color: var(--color--strokes, #C0C0C0);
+
+  /* nav buttons */
+  /*@doc Define a cor do ícone de navegação.*/
+  --ez-calendar__nav-btn--fill: var(--text--primary, #008561);
+  /*@doc Define a cor do ícone de navegação quando o cursor está sobre ele.*/
+  --ez-calendar__nav-btn--hover--fill: var(--color--primary, #350404);
+  /*@doc Define a largura do ícone de navegação.*/
+  --ez-calendar__nav-btn--width: 10px;
+  /*@doc Define a altura do ícone de navegação.*/
+  --ez-calendar__nav-btn--height: 16px;
+  /*@doc Contém a imagem do ícone de navegação à esquerda.*/
+  --ez-calendar__nav-btn--previous-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 9.7808475,13.860393 3.9204526,8.0000004 9.7808475,2.0624965 7.9301965,0.28895552 0.21915255,8.0000004 7.9301965,15.711044 Z"/></svg>');
+  /*@doc Contém a imagem do ícone de navegação à direita.*/
+  --ez-calendar__nav-btn--next-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="16px" width="10px"><path d="M 0.21915251,13.860393 6.0795475,8.0000007 0.21915251,2.0624968 2.0698036,0.28895588 9.7808475,8.0000007 2.0698036,15.711044 Z"/></svg>');
+
+  /* cell */
+  /*@doc Define o espaçamento vertical entre as células.*/
+  --ez-calendar__cell--margin: 0px 1.5px;
+  /*@doc Define a largura das células.*/
+  --ez-calendar__cell--width: var(--space--large, 24px);
+  /*@doc Define o espaçamento horizontal entre as células.*/
+  --ez-calendar__cell--padding: 1.5px 0px;
+  /*@doc Define o raio da borda das células.*/
+  --ez-calendar__cell--border-radius: var(--border--radius-small, 6px);
+  /*@doc Define a cor de fundo das células.*/
+  --ez-calendar__cell--over--background-color: var(--color--primary, #E2F4EF);
+  /*@doc Define a cor de do texto das células.*/
+  --ez-calendar__cell--over--color: var(--color--primary-300, #008561);
+  /*@doc Define a cor do texto para células secundárias (fora do mês selecionado).*/
+  --ez-calendar__cell--outset--color: var(--color--disable-primary, #E5EAF0);
+  /*@doc Define a cor de fundo das células selecionadas.*/
+  --ez-calendar__cell--selected--background-color: var(--color--primary, #008561);
+  /*@doc Define a cor do texto da célula selecionada.*/
+  --ez-calendar__cell--selected--color: var(--color--inverted, #FFF);
+
+  /* btn today */
+  /*@doc Define a cor do texto do botão "Hoje".*/
+  --ez-calendar__btn-today--color: var(--color--primary);
+  /*@doc Define a cor de fundo do botão "Hoje" quando o cursor está sobre ele.*/
+  --ez-calendar__btn-today--hover--background-color: var(--color--primary-300, #E2F4EF);
+  /*@doc Define o raio da borda do botão "Hoje".*/
+  --ez-calendar__btn-today--border-radius: var(--border--radius-small, 6px);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  position: relative;
+  display: flex;
+  user-select: none;
+}
+
+.calendar__container{
+  display: flex;
+  z-index: var(--more-visible, 2);;
+}
+
+.calendar {
+  /*private*/
+  z-index: var(--more-visible, 2);
+  display: flex;
+  flex-direction: column;
+
+  /*public*/
+  background-color: var(--ez-calendar__body--background-color);
+  padding: var(--ez-calendar__body--padding);
+  border-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
+}
+
+.calendar__header {
+  /*private*/
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--space--small, 6px);
+  margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
+
+  /*public*/
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
+}
+
+.calendar__btn-next, .calendar__btn-previous {
+  /*private*/
+  outline: none;
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  padding: 0px;
+}
+
+.calendar__btn-next::after, .calendar__btn-previous::after {
+  /*private*/
+  content: '';
+  display: flex;
+
+  /*public*/
+  background-color: var(--ez-calendar__nav-btn--fill);
+  /*parece estranho, mas o bg funciona como fill pq aplicaremos a mascara.*/
+  width: var(--ez-calendar__nav-btn--width);
+  height: var(--ez-calendar__nav-btn--height);
+}
+
+.calendar__btn-previous::after {
+  /*public*/
+  -webkit-mask-image: var(--ez-calendar__nav-btn--previous-image);
+  mask-image: var(--ez-calendar__nav-btn--previous-image);
+}
+
+.calendar__btn-next::after {
+  /*public*/
+  -webkit-mask-image: var(--ez-calendar__nav-btn--next-image);
+  mask-image: var(--ez-calendar__nav-btn--next-image);
+}
+
+.calendar__btn-next:hover::after, .calendar__btn-previous:hover::after {
+  /*public*/
+  background-color: var(--ez-calendar__nav-btn--hover--fill);
+}
+
+.calendar__lbl-month {
+  /*private*/
+  font-weight: var(--text-weight--extra-large, 700);
+  font-size: var(--title--small, 14px);
+
+  /*public*/
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+}
+
+.calendar__line {
+  /*private*/
+  display: flex;
+  padding: 0px;
+  margin: 0px;
+}
+
+.calendar__cell {
+  /*private*/
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  cursor: pointer;
+  font-size: var(--text--extra-small, 10px);
+
+  /*public*/
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  padding: var(--ez-calendar__cell--padding);
+  margin: var(--ez-calendar__cell--margin);
+  min-width: var(--ez-calendar__cell--width);
+  border-radius: var(--ez-calendar__cell--border-radius);
+}
+
+
+.calendar__cell:hover {
+  /*public*/
+  background-color: var(--ez-calendar__cell--over--background-color);
+  color: var(--ez-calendar__cell--over--color);
+}
+
+.calendar__cell--secondary {
+  /*public*/
+  color: var(--ez-calendar__cell--outset--color);
+}
+
+.calendar__cell--unselectable:hover {
+  /*private*/
+  background-color: unset;
+  border-radius: unset;
+  cursor: unset;
+}
+
+.calendar__cell--unselectable {
+  /*private*/
+  font-weight: var(--text-weight--large, 600);
+
+  /*public*/
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+}
+
+.calendar__cell--selected, .calendar__cell--selected:hover {
+  /*public*/
+  background-color: var(--ez-calendar__cell--selected--background-color);
+  color: var(--ez-calendar__cell--selected--color);
+}
+
+.calendar__footer {
+  /*private*/
+  display: flex;
+  flex-direction: column;
+}
+
+.calendar__btn-today {
+  /*private*/
+  border: none;
+  background-color: unset;
+  cursor: pointer;
+  font-weight: var(--text-weight--large, 600);
+  font-size: var(--title--extra-small, 12px);
+  padding: 0px;
+
+  /*public*/
+  font-family: var(--ez-calendar--font-family);
+  text-shadow: var(--ez-calendar--text-shadow);
+  color: var(--ez-calendar__btn-today--color);
+  border-radius: var(--ez-calendar__btn-today--border-radius);
+}
+
+.calendar__btn-today:hover {
+  /*public*/
+  background-color: var(--ez-calendar__btn-today--hover--background-color);
+}
+
+section{
+  display: flex;
+}
+
+.calendar-time {
+  /*private*/
+  margin-left: -10px;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 0px 0px 10px;
+
+  /*public*/
+  /*TODO Criar variavel para color o calendar_time var(--ez-calendar__body-time--background-color)*/
+  background-color: var(--ez-calendar__time--background-color);
+  border-top-right-radius: var(--ez-calendar__body--border-radius);
+  border-bottom-right-radius: var(--ez-calendar__body--border-radius);
+  box-shadow: var(--ez-calendar__body--shadow);
+}
+.calendar__column {
+  height: 136px;
+  padding: 0px;
+  margin: 0px;
+  overflow: auto;
+}
+
+/* Scrollbar definido como 0 para não exibir o scroll mas permitir a rolagem */
+.calendar__column::-webkit-scrollbar {
+  width: 0px;
+  max-width: 0px;
+  min-width: 0px;
+}
+
+.calendar-time__header{
+  /*private*/
+  padding-left: var(--space--small, 6px);
+  padding-right: var(--space--small, 6px);
+  display: flex;
+  justify-content: space-between;
+  padding-bottom: var(--space--small, 6px);
+  margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
+  font-weight: var(--text-weight--extra-large, 700);
+  font-size: var(--title--small, 14px);
+
+  
+  /*public*/
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+  border-bottom: solid var(--ez-calendar__header-line--stroke) var(--ez-calendar__header-line--color);
+  font-family: var(--ez-calendar--font-family);
+  color: var(--ez-calendar--color);
+  text-shadow: var(--ez-calendar--text-shadow);
+}
+
+.separatorTime{
+  color: #A2ABB9;
+  padding: 0px 1px;
+  line-height: 16px;
+  font-size: 17px;
+  font-weight: normal;
+}
+
+.endHidden {
+  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent 100%);
+}
+
+.calendar__column .calendar__cell{
+  margin: 0px;
+  padding: 1.5px 1.5px;
+}

package/dist/node_modules/@sankhyalabs/ezui/dist/collection/components/ez-check/ez-check.css

@@ -0,0 +1,327 @@
+:host {
+
+  /***************
+     Regular mode
+  ***************/
+  /*dimensions */
+  /*@doc Define a largura do box do checkbox.*/
+  --ez-check--box--width: 18px;
+  /*@doc Define a altura do box do checkbox.*/
+  --ez-check--box--height: 18px;
+  /*@doc Define a largura do input do checkbox.*/
+  --ez-check--width: calc(var(--ez-check--box--width) + 14px);
+  /*@doc Define a altura do input do checkbox */
+  --ez-check--height: calc(var(--ez-check--box--width) + 14px);
+
+  /*general*/
+  /*@doc Define o raio da borda do input do checkbox.*/
+  --ez-check--border-radius: var(--border--radius-small);
+
+  /*box*/
+  /*@doc Define a cor de fundo do input do checkbox quando marcado.*/
+  --ez-check--checked--background-color: var(--color--primary-200);
+  /*@doc Define a cor de fundo do input do checkbox quando focado.*/
+  --ez-check--focus--background-color: var(--color--strokes, #FFFFFF);
+  /*@doc Define a cor de fundo do input do checkbox quando o cursor está sobre ele.*/
+  --ez-check--hover--background-color: var(--background--medium);
+  /*@doc Define a cor de fundo do input do checkbox quando marcado e desabilitado.*/
+  --ez-check--checked--disabled--background-color: var(--color--disable-secondary);
+
+  /*@doc Define o estilo da borda do input do checkbox.*/
+  --ez-check--border: var(--border--medium) var(--title--primary);
+  /*@doc Define o estilo da borda do input do checkbox quando desabilitado.*/
+  --ez-check--disabled--border: var(--border--medium) var(--color--strokes);
+  /*@doc Define o estilo da borda do input do checkbox quando marcado.*/
+  --ez-check--checked--border: var(--border--medium) var(--color--primary);
+
+
+  /*@doc Define a cor de fundo do input do checkbox quando ativo e com o cursor sobre ele.*/
+  --ez-check--checked--hover--background-color: var(--color--primary-200);
+  /*@doc Define a cor de fundo do input do checkbox quando ativo e focado.*/
+  --ez-check--checked--focus--background-color: var(--color--primary-300, #FFFFFF);
+
+  /*check*/
+  /*@doc Contém o ícone do input marcado.*/
+  --ez-check--check--image: url('data:image/svg+xml;utf8,<svg width="8" height="7" viewBox="0 0 8 7" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M7.70002 0.398999L7.48502 0.207997C7.31524 0.0598858 7.09376 -0.0150438 6.86894 -0.000430025C6.64411 0.0141838 6.43419 0.117153 6.28502 0.285997L2.70002 4.332L1.61802 3.384C1.44837 3.23576 1.22697 3.16067 1.00214 3.17509C0.77732 3.18952 0.567332 3.2923 0.418019 3.461L0.229019 3.674C0.0752361 3.84797 -0.00437434 4.07521 0.00721192 4.30713C0.0187982 4.53904 0.120661 4.75722 0.291019 4.915L2.27402 6.762C2.35832 6.8432 2.45842 6.90618 2.56811 6.94702C2.67779 6.98787 2.79471 7.00571 2.91159 6.99942C3.02846 6.99314 3.14279 6.96287 3.24747 6.91049C3.35214 6.85812 3.44492 6.78477 3.52002 6.695L7.79102 1.638C7.94063 1.46048 8.01486 1.23149 7.99786 0.999963C7.98085 0.768436 7.87396 0.552749 7.70002 0.398999Z"/></svg>');
+  /*@doc Define a cor de fundo do slot do ícone quando marcado.*/
+  --ez-check--check--background-color: var(--color--primary);
+  /*@doc Define a cor de fundo do slot do ícone quando marcado e desabilitado.*/
+  --ez-check--check--disabled--background-color: var(--color--strokes);
+
+  /***************
+    Switch mode
+  ***************/
+  /*dimensions */
+  /*@doc Define a largura do slider do checkbox.*/
+  --ez-switch--slider--width: 34px;
+  /*@doc Define a altura do slider do checkbox.*/
+  --ez-switch--slider--height: 14px;
+  /*@doc Define a largura do pino do slider do checkbox.*/
+  --ez-switch--pin--width: 20px;
+  /*@doc Define a altura do pino do slider do checkbox.*/
+  --ez-switch--pin--height: 20px;
+  /*@doc Define a largura do slider quando focado.*/
+  --ez-switch--focus--width: 32px;
+  /*@doc Define a altura do slider quando focado.*/
+  --ez-switch--focus--height: 32px;
+
+  /*background*/
+  /*@doc Define a cor de fundo do checkbox no modo switch.*/
+  --ez-switch--background-color: var(--color--strokes);
+  /*@doc Define a cor de fundo do checkbox desabilitado no modo switch.*/
+  --ez-switch--disabled--background-color: var(--color--disable-secondary);
+  /*@doc Define a cor de fundo do checkbox marcado no modo switch.*/
+  --ez-switch--checked--background-color: var(--color--primary-300);
+
+  /*pin*/
+  /*@doc Define a cor de fundo do pino do slider. */
+  --ez-switch--pin--background-color: var(--background--xlight);
+  /*@doc Define a cor de fundo do pino do slider quando desabilitado. */
+  --ez-switch--pin--disabled--background-color: var(--color--disable-secondary);
+  /*@doc Define a cor de fundo do pino do slider quando marcado. */
+  --ez-switch--pin--checked--background-color: var(--color--primary);
+  /*@doc Define a cor de fundo do pino do slider quando marcado e desabilitado1. */
+  --ez-switch--pin--checked--disabled--background-color: #E8F7F4;
+  /*@doc Define a cor de fundo do pino do slider quando focado. */
+  --ez-switch--pin--focus--background-color: var(--text--disable);
+  /*@doc Define a cor de fundo do pino do slider quando marcado e focado. */
+  --ez-switch--pin--checked--focus--background-color: var(--color--primary);
+
+  /*@doc Define o tamanho da fonte do label.*/
+  --ez-check--label--font-size: var(--text--medium, 14px);
+  /*@doc Define a família da fonte do label.*/
+  --ez-check--label--font-family: var(--font-pattern, Arial);
+  /*@doc Define a cor da fonte do label.*/
+  --ez-check--label--color: var(--title--primary, #000);
+  /*@doc Define a cor da fonte do label quando desabilitado.*/
+  --ez-check--label--disabled--color: var(--text--disable, #AFB6C0);
+
+  /***************
+     host style  
+  ***************/
+  /*private*/
+  display: flex;
+  width: 100%;
+  align-items: center;
+  margin: 0;
+}
+
+/******** REGULAR MODE ********/
+/*---------------------------unchecked------------------------------*/
+input.regularMode {
+  /*private*/
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  border-radius: 50%;
+  position: relative;
+
+
+  /*public*/
+  width: var(--ez-check--width);
+  height: var(--ez-check--height);
+}
+
+
+input.regularMode:enabled:hover {
+  /*public*/
+  background-color: var(--ez-check--hover--background-color);
+}
+
+input.regularMode:enabled:focus {
+  /*private*/
+  outline: none;
+
+  /*public*/
+  background-color: var(--ez-check--focus--background-color);
+}
+
+input.regularMode:disabled {
+  /*private*/
+  cursor: auto;
+  background: none;
+}
+
+input.regularMode::before {
+  /*private*/
+  box-sizing: border-box;
+  content: "";
+  display: block;
+
+  /*public*/
+  width: var(--ez-check--box--width);
+  height: var(--ez-check--box--height);
+  border-radius: var(--ez-check--border-radius);
+  border: var(--ez-check--border);
+}
+
+input.regularMode:disabled::before {
+  /*public*/
+  border: var(--ez-check--disabled--border);
+}
+
+/*-------------------------------checked---------------------------------*/
+input.regularMode:checked:enabled:hover {
+  /*public*/
+  background-color: var(--ez-check--checked--hover--background-color);
+}
+
+input.regularMode:checked:enabled:focus {
+  /*public*/
+  background-color: var(--ez-check--checked--focus--background-color);
+}
+
+input.regularMode:checked::before {
+  /*public*/
+  border: var(--ez-check--checked--border);
+  background-color: var(--ez-check--checked--background-color);
+}
+
+input.regularMode:checked:disabled:before {
+  /*public*/
+  border: var(--ez-check--disabled--border);
+  background-color: var(--ez-check--checked--disabled--background-color);
+}
+
+input.regularMode:checked::after {
+  /*private*/
+  display: flex;
+  position: absolute;
+  content: "";
+  background-color: var(--ez-check--check--background-color);
+  width: 8px;
+  height: 7px;
+
+  /*public*/
+  -webkit-mask-image: var(--ez-check--check--image);
+  mask-image: var(--ez-check--check--image);
+}
+
+input.regularMode:checked:disabled::after {
+  /*public*/
+  background-color: var(--ez-check--check--disabled--background-color);
+}
+
+/******** SWITCH MODE ********/
+/*-------------------------------OFF---------------------------------*/
+input.switchMode {
+  /*private*/
+  flex-shrink: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  position: relative;
+  outline: none;
+  cursor: pointer;
+  border-radius: 20px;
+  border: var(--border--small, 1px solid) var(--text--secondary, #a2abb9);
+  transition: background-color var(--transition);
+
+  /*public*/
+  width: var(--ez-switch--slider--width);
+  height: var(--ez-switch--slider--height);
+  background-color: var(--ez-switch--background-color);
+}
+
+input.switchMode:disabled {
+  /*public*/
+  background-color: var(--ez-switch--disabled--background-color);
+}
+
+input.switchMode::after {
+  /*private*/
+  content: "";
+  display: block;
+  position: absolute;
+  box-shadow: var(--shadow);
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transform: translateX(-2px) translateY(-3px);
+  border-radius: 50%;
+
+  /*public*/
+  width: var(--ez-switch--pin--width);
+  height: var(--ez-switch--pin--height);
+  background-color: var(--ez-switch--pin--background-color);
+}
+
+input.switchMode:disabled::after {
+  /*public*/
+  background-color: var(--ez-switch--pin--disabled--background-color);
+}
+
+/*-------------------------------ON---------------------------------*/
+input.switchMode:checked {
+  /*private*/
+  transition: background-color var(--transition), border var(--transition);
+
+  /*public*/
+  background-color: var(--ez-switch--checked--background-color);
+  border: var(--border--small, 1px solid) var(--color--primary, #008561);
+}
+
+input.switchMode::before {
+  /*private*/
+  display: block;
+  content: "";
+  display: block;
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0;
+
+  /*public*/
+  width: var(--ez-switch--focus--width);
+  height: var(--ez-switch--focus--height);
+  top: calc((var(--ez-switch--slider--height) - var(--ez-switch--focus--height)) / 2);
+  left: calc((var(--ez-switch--pin--width) - var(--ez-switch--focus--width))/2);
+  background-color: var(--ez-switch--pin--focus--background-color);
+}
+
+input.switchMode:focus::before {
+  /*private*/
+  opacity: 0.24;
+  transition: opacity var(--transition);
+}
+
+input.switchMode:checked:focus::before {
+  /*private*/
+  background-color: var(--ez-switch--pin--checked--focus--background-color);
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width)));
+}
+
+input.switchMode:checked::after {
+  /*private*/
+  transition: transform var(--transition);
+  transition: background-color var(--transition);
+  transform: translateX(calc(var(--ez-switch--slider--width) - var(--ez-switch--pin--width))) translateY(-3px);
+  box-shadow: var(--shadow);
+
+  /*public*/
+  background-color: var(--ez-switch--pin--checked--background-color);
+}
+
+input.switchMode:checked:disabled::after {
+  /*public*/
+  background-color: var(--ez-switch--pin--checked--disabled--background-color);
+}
+
+.label {
+  flex-shrink: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: var(--ez-check--label--color);
+  text-shadow: var(--text-shadow);
+  font-size: var(--ez-check--label--font-size);
+  font-family: var(--ez-check--label--font-family);
+  cursor: default;
+  padding-left: var(--space--small);
+}
+
+.label--disabled {
+  color: var(--ez-check--label--disabled--color);
+}