:host {
  /* dimensions */
  /*@doc Define a largura mínima do componente.*/
  --ez-button--min-width: 50px;
  /*@doc Define a largura do componente.*/
  --ez-button--width: auto;
  /*@doc Define a altura do componente.*/
  --ez-button--height: var(--space--42, 42px);

  /*@doc Define o espaçamento superior ao label.*/
  --ez-button--padding-top: var(--space--0, 0px);
  /*@doc Define o espaçamento inferior ao label.*/
  --ez-button--padding-bottom: var(--space--0, 0px);
  /*@doc Define o espaçamento à direita do label.*/
  --ez-button--padding-right: var(--space--12, 12px);
  /*@doc Define o espaçamento à esquerda do label.*/
  --ez-button--padding-left: var(--space--12, 12px);
  /*@doc Define o gap entre o texto e ícone, quando existir.*/
  --ez-button--icon--gap: var(--space--8, 8px);

  /* general */
  /*@doc Define a cor do label.*/
  --ez-button--color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor do label do botao tipo label-icon.*/
  --ez-button--label-icon--color: var(--color--ocean-green-500, #1A9171);
  /*@doc Define a cor do label do botao tipo label-icon, quando o mouse sobre o botão.*/
  --ez-button--label-icon--hover-color: var(--color--ocean-green-700, #00684C);
  /*@doc Define a cor do label do botao tipo label-icon, quando desabilitado.*/
  --ez-button--label-icon--disabled-color: var(--color--gray-400);
  /*@doc Define a cor do icone esquerdo.*/
  --ez-button--left-icon--color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor do icone direito, quando o mouse está sobre o botão.*/
  --ez-button--right-icon--color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor do icone esquerdo.*/
  --ez-button--left-icon--hover-color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor do icone direito, quando o mouse está sobre o botão.*/
  --ez-button--right-icon--hover-color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor do icone esquerdo, quando desabilitado.*/
  --ez-button--left-icon--disabled-color: var(--color--gray-300, #A4A5A7);
  /*@doc Define a cor do icone direito, quando desabilitado.*/
  --ez-button--right-icon--disabled-color: var(--color--gray-300, #A4A5A7);
  /*@doc Define o tamanho do label.*/
  --ez-button--font-size: var(--font-size--default, 14px);
  /*@doc Define a família da fonte do label.*/
  --ez-button--font-family: var(--font-pattern, Arial);
  /*@doc Define o peso da fonte do label.*/
  --ez-button--font-weight: var(--font-weight--medium, 500);
  /*@doc Define a cor de fundo do botão.*/
  --ez-button--background-color: var(--color--gray-70, #ffffff);
  /*@doc Define o raio da borda do botão.*/
  --ez-button--border-radius: var(--border--radius--24, 24px);
  /*@doc Define o estilo da borda do botão.*/
  --ez-button--border: 1px solid var(--color--gray-90, #EAEAEA);
  /*@doc Define o estilo da borda do botão quando em hover.*/
  --ez-button--hover--border: 1px solid var(--color--gray-90, #EAEAEA);
  /*@doc Define o alinhamento horizontal do conteúdo do botão.*/
  --ez-button--justify-content: center;

  /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
  --ez-button--hover-color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
  --ez-button--hover--background-color: var(--color--gray-80, #F9F9F9);

  /*@doc Define a cor do texto quando o botão está desabilitado.*/
  --ez-button--disabled-color: var(--color--gray-400, #77777A);
  /*@doc Define a cor de fundo quando o botão está desabilitado.*/
  --ez-button--disabled--background-color: var(--color--gray-80, #F9F9F9);
  /*@doc Define a cor da borda quando o botão está desabilitado.*/
  --ez-button--disabled--border: 1px solid var(--color--gray-200, #A4A5A7);
  /*@doc Define a cor do icone quando o botão está desabilitado.*/
  --ez-button--disabled-icon-color: var(--color--gray-400, #D2D2D3);
  /*@doc Define a cor do texto do botão no modo link.*/
  --ez-button--link-color: var(--color--ocean-green-600, #008561);
  /*@doc Define a cor do texto do botão no hover do modo link.*/
  --ez-button--link--hover-color: var(--color--primary-700, #1C1D22);
  /*@doc Define a cor do texto do botão no hover do modo link, quando desabilitado.*/
  --ez-button--link-disabled-color: var(--color--gray-400, #77777A);
  /*@doc Define o tamanho small na fonte do texto do botão no modo link.*/
  --ez-button--link--small--font-size: var(--font-size--small, 12px);
  /*@doc Define o tamanho medium na fonte do texto do botão no modo link.*/
  --ez-button--link--medium--font-size: var(--font-size--default, 14px);
  /*@doc Define o tamanho large na fonte do texto do botão no modo link.*/
  --ez-button--link--large--font-size: var(--font-size--medium, 16px);

  display: flex;
  width: fit-content;
}

:host(.ez-button--primary) {
  /* default */
  --ez-button--color: var(--color--gray-70);
  --ez-button--background-color: var(--color--ocean-green-500);
  --ez-button--font-weight: var(--font-weight--regular);
  --ez-button--left-icon--color: var(--color--gray-70);
  --ez-button--right-icon--color: var(--color--gray-70);
  --ez-button--border: 1px solid var(--color--ocean-green-500);
  /* hover */
  --ez-button--hover-color: var(--color--gray-70);
  --ez-button--hover--background-color: var(--color--ocean-green-700);
  --ez-button--hover--border: 1px solid var(--color--ocean-green-700);
  --ez-button--left-icon--hover-color: var(--color--gray-70);
  --ez-button--right-icon--hover-color: var(--color--gray-70);
  /* disabled */
  --ez-button--disabled-color: var(--color--gray-70);
  --ez-button--disabled--background-color: var(--color--gray-400);
  --ez-button--disabled--border: 1px solid var(--color--gray-400);
  --ez-button--disabled-icon-color: var(--color--gray-200);
  --ez-button--left-icon--disabled-color: var(--color--gray-200);
  --ez-button--right-icon--disabled-color: var(--color--gray-200);
}

:host(.ez-button--secondary) {
  /* default */
  --ez-button--color: var(--color--ocean-green-600);
  --ez-button--background-color: var(--color--gray-70);
  --ez-button--border: 1px solid var(--color--gray-90);
  --ez-button--left-icon--color: var(--color--ocean-green-600);
  --ez-button--right-icon--color: var(--color--ocean-green-600);
  /* hover */
  --ez-button--hover-color: var(--color--ocean-green-600);
  --ez-button--hover--background-color: var(--color--gray-80);
  --ez-button--hover--border: 1px solid var(--color--gray-90);
  --ez-button--left-icon--hover-color: var(--color--ocean-green-600);
  --ez-button--right-icon--hover-color: var(--color--ocean-green-600);
  /* disabled */
  --ez-button--disabled-color: var(--color--gray-400);
  --ez-button--disabled--background-color: var(--color--gray-80);
  --ez-button--disabled--border: 1px solid var(--color--gray-200);
  --ez-button--disabled-icon-color: var(--color--gray-400);
  --ez-button--left-icon--disabled-color: var(--color--gray-300);
  --ez-button--right-icon--disabled-color: var(--color--gray-300);
}

:host(.ez-button--tertiary) {
  /* default */
  --ez-button--color: var(--color--ocean-green-600);
  --ez-button--background-color: transparent;
  --ez-button--font-weight: var(--font-weight--regular);
  --ez-button--border: none;
  --ez-button--left-icon--color: var(--color--ocean-green-600);
  --ez-button--right-icon--color: var(--color--ocean-green-600);
  /* hover */
  --ez-button--hover-color: var(--color--ocean-green-800);
  --ez-button--hover--background-color: transparent;
  --ez-button--hover--border: none;
  --ez-button--left-icon--hover-color: var(--color--ocean-green-800);
  --ez-button--right-icon--hover-color: var(--color--ocean-green-800);
  /* disabled */
  --ez-button--disabled-color: var(--color--gray-400);
  --ez-button--disabled--background-color: transparent;
  --ez-button--disabled--border: transparent;
  --ez-button--disabled-icon-color: var(--color--gray-200);
  --ez-button--left-icon--disabled-color: var(--color--gray-200);
  --ez-button--right-icon--disabled-color: var(--color--gray-200);
}

:host(.ez-button--link--primary) {
  color: var(--color--primary);
  fill: var(--color--primary);
}

button {
  /*private*/
  position: relative;
  display: flex;
  align-items: center;
  outline: 0;
  border: 0;
  margin: 0; 
  padding: 0;
  cursor: pointer;
  transition: background-color 0.2s linear, transform 0.15s ease;
  white-space: nowrap;
  box-sizing: border-box;
  overflow: hidden;
  transform: scale(1);

  /*public*/
  min-width: var(--ez-button--min-width);
  width: var(--ez-button--width);
  height: var(--ez-button--height);
  font-family: var(--ez-button--font-family);
  font-size: var(--ez-button--font-size);
  font-weight: var(--ez-button--font-weight);
  padding: var(--ez-button--padding-top) var(--ez-button--padding-right) var(--ez-button--padding-bottom) var(--ez-button--padding-left);
  border-radius: var(--ez-button--border-radius);
  gap: var(--ez-button--icon--gap);
  background-color: var(--ez-button--background-color);
  color: var(--ez-button--color);
  fill: var(--ez-button--color);
  border: var(--ez-button--border);
  justify-content: var(--ez-button--justify-content);
}

/* Bounce effect */
button.pressed {
  transform: scale(0.98);
}

/* Icon button bounce effect */
button.btn-icon {
  transition: background-color 0.2s linear, transform 0.15s ease;
  transform: scale(1);
}

button.btn-icon.pressed {
  transform: scale(0.95);
}

/* Disable bounce for disabled buttons */
button:disabled,
button[aria-disabled] {
  transform: scale(1) !important;
}

.ripple {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  pointer-events: none;
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  z-index: 0;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

:host .ripple,
:host(.ez-button--secondary) .ripple {
  background: rgba(0, 133, 97, 0.2);
}

:host(.ez-button--primary) .ripple {
  background: rgba(255, 255, 255, 0.3);
}

:host(.ez-button--tertiary) .ripple {
  background: rgba(0, 133, 97, 0.15);
}

/* Ensure button content stays above ripple */
button > *:not(.ripple) {
  position: relative;
  z-index: 1;
}

/* Disable ripple for disabled buttons */
button:disabled .ripple,
button[aria-disabled] .ripple {
  display: none;
}

button:hover {
  background-color: var(--ez-button--hover--background-color);
  border: var(--ez-button--hover--border);
  color: var(--ez-button--hover-color);
  fill: var(--ez-button--hover-color);
  --ez-icon--color: var(--ez-button--hover-color);
}

button[aria-disabled]:active,
button:disabled:active,
button[aria-disabled]:hover,
button:disabled:hover,
button[aria-disabled],
button:disabled {
  background-color: var(--ez-button--disabled--background-color);
  color: var(--ez-button--disabled-color);
  fill: var(--ez-button--disabled-color);
  --ez-icon--color: var(--ez-button--disabled-icon-color);
  --ez-button--left-icon--color: var(--ez-button--left-icon--disabled-color);
  --ez-button--right-icon--color: var(--ez-button--right-icon--disabled-color);
  cursor: no-drop;
  border: var(--ez-button--disabled--border);
}

button[aria-disabled].force-focus-visible,
button[aria-disabled]:focus-visible {
  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--petroleum-100);
}

button ez-icon {
  --ez-icon--color: inherit;
}
button ez-icon.leftIcon {
  --ez-icon--color: var(--ez-button--left-icon--color);
}
button ez-icon.rightIcon {
  --ez-icon--color: var(--ez-button--right-icon--color);
}
button:hover ez-icon.leftIcon {
  --ez-icon--color: var(--ez-button--left-icon--hover-color);
}
button:hover ez-icon.rightIcon {
  --ez-icon--color: var(--ez-button--right-icon--hover-color);
}
button:disabled:hover ez-icon.leftIcon,
button[aria-disabled]:hover ez-icon.leftIcon {
  --ez-icon--color: var(--ez-button--left-icon--disabled-color);
}
button:disabled:hover ez-icon.rightIcon,
button[aria-disabled]:hover ez-icon.rightIcon {
  --ez-icon--color: var(--ez-button--right-icon--disabled-color);
}

button.x-small{
  height: 28px;
  --ez-button--font-size: var(--text--small, 12px);
}

button.small{
  height: 32px;
  --ez-button--font-size: var(--text--small, 12px);
}

button.medium{
  height: 42px;
}

button.large{
  height: 46px;
}

button.btn-icon {
  padding: 0px;
}

.btn-icon--medium {
  width: 42px;
  min-width: 42px;
  height: 42px;
}

.btn-icon--x-small {
  width: 28px;
  min-width: 28px;
  height: 28px;
}

.btn-icon--small {
  width: 32px;
  min-width: 32px;
  height: 32px;
}

.btn-icon--large {
  width: 46px;
  min-width: 46px;
  height: 46px;
}

.label-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--ez-button--label-icon--color);
}

.label-icon:hover {
  color: var(--ez-button--label-icon--hover-color);
  fill: var(--ez-button--label-icon--hover-color);
}

.label-icon .disabled {
  color: var(--ez-button--label-icon--disabled-color);
}

.label-icon label {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-family: var(--ez-button--font-family);
  font-size: var(--ez-button--font-size);
  font-weight: var(--ez-button--font-weight);
  user-select: none;
}

button[aria-disabled]+label,
button:disabled+label {
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: var(--ez-button--font-family);
  font-size: var(--ez-button--font-size);
  font-weight: var(--ez-button--font-weight);
  color: var(--ez-button--label-icon--disabled-color);
  cursor: no-drop;
}

button.force-focus-visible,
button:focus-visible {
  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--ocean-green-200);
}

div.label-icon{
  cursor: pointer;
}

div.label-icon button[aria-disabled],
div.label-icon button:disabled{
  cursor: no-drop;
}


a {
  /*private*/
  outline: 0;
  border: 0;
  margin: 0; 
  border-radius: 0;
  padding: 0;
  margin: 0;
  padding-inline: var(--space--8);
  font-family: var(--ez-button--font-family);
  font-weight: var(--ez-button--font-weight);
  color: var(--ez-button--link-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ez-button--border-radius);
  /*public*/
  gap: var(--ez-button--icon--gap);
}

a ez-icon{
  --ez-icon--color: var(--ez-button--link--color);
}

a:hover {
  /*public*/
  color: var(--ez-button--link--hover-color);
  --ez-icon--color: var(--ez-button--link--hover-color);
}
a:hover ez-icon {
  --ez-icon--color: var(--ez-button--link--hover-color);
}

a.disabled {
  color: var(--ez-button--link-disabled-color);
  cursor: not-allowed;
}
a.disabled ez-icon {
  --ez-icon--color: var(--ez-button--link-disabled-color);
}

a.small{
  font-size: var(--ez-button--link--small--font-size);
  line-height: var(--ez-button--link--small--font-size);
}

a.medium{
  font-size: var(--ez-button--link--medium--font-size);
  line-height: var(--ez-button--link--medium--font-size);
}

a.large{
  font-size: var(--ez-button--link--large--font-size);
  line-height: var(--ez-button--link--large--font-size);
}

a.force-focus-visible,
a:focus-visible {
  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--ocean-green-200);
}

a.disabled.force-focus-visible,
a.disabled:focus-visible {
  /* box-shadow simulando um outline com offset de 2px para compatibilidade com Navegador Sankhya */
  box-shadow: 0 0 0 2px var(--color--gray-70), 0 0 0 4px var(--color--petroleum-100);
}