: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;

  /*public*/
  z-index: var(--more-visible, 2);;
}

.calendar {
  /*private*/
  display: flex;
  flex-direction: column;

  /*public*/
  z-index: var(--more-visible, 2);
  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;

  /*public*/
  padding-bottom: var(--space--small, 6px);
  margin: 0px var(--space--, 12px) var(--space--small, 6px) var(--space--, 12px);
  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 {
  /*public*/
  font-weight: var(--text-weight--extra-large, 700);
  font-size: var(--title--small, 14px);
  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;

  /*public*/
  font-size: var(--text--extra-small, 10px);
  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;

  /*public*/
  color: var(--ez-calendar--color);
}

.calendar__cell--unselectable {
  /*public*/
  font-weight: var(--text-weight--large, 600);
  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;
  padding: 0px;

  /*public*/
  font-weight: var(--text-weight--large, 600);
  font-size: var(--title--extra-small, 12px);
  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-width: none;
}

/* 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*/
  display: flex;
  justify-content: space-between;

  /*public*/
  padding-left: var(--space--small, 6px);
  padding-right: var(--space--small, 6px);
  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);
  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;
}