:host {
    /* dimensions */
    /*@doc Define a largura mínima do componente.*/
    --ez-split-button--min-width: var(--space--40, 40px);
    /*@doc Define a largura do componente.*/
    --ez-split-button--width: auto;
    /*@doc Define a altura do componente, quando size medium.*/
    --ez-split-button--height: var(--space--32, 32px);
    /*@doc Define a largura do slot que contém o ícone.*/
    --ez-split-button__medium-icon--width: var(--space--40, 40px);
    /*@doc Define a largura do slot que contém o ícone.*/
    --ez-split-button__large-icon--width: var(--space--44, 44px);
    /*@doc Define o espaçamento superior ao label.*/
    --ez-split-button__label--padding-top: var(--space--0, 0px);
    /*@doc Define o espaçamento inferior ao label.*/
    --ez-split-button__label--padding-bottom: var(--space--0, 0px);
    /*@doc Define o espaçamento esquerdo ao ícone.*/
    --ez-split-button__right-button--padding-left: var(--space--8, 8px);
    /*@doc Define o espaçamento direito ao ícone.*/
    --ez-split-button__right-button--padding-right: var(--space--12, 12px);

    /* general */

    /* colors */
    /*@doc Define a cor do label.*/
    --ez-split-button--color: var(--color--ocean-green-600, #008561);
    /*@doc Define a cor do ícone esquerdo.*/
    --ez-split-button__left-icon--color: var(--color--ocean-green-600, #008561);
    /*@doc Define a cor do ícone direito.*/
    --ez-split-button__right-icon--color: var(--color--ocean-green-600, #008561);
    /*@doc Define a cor de fundo do botão.*/
    --ez-split-button--background-color: var(--color--gray-70, #FFFFFF);
    /*@doc Define o estilo da borda do botão.*/
    --ez-split-button--border: 1px solid var(--color--gray-90, #EAEAEA);
    

    /*@doc Define o tamanho do label.*/
    --ez-split-button--font-size: var(--font-size--default, 14px);
    /*@doc Define a altura da linha do label.*/
    --ez-split-button--line-height: var(--line-height--28, 28px);

    /*@doc Define a família da fonte do label.*/
    --ez-split-button--font-family: var(--font-pattern, Arial);
    /*@doc Define o peso da fonte do label.*/
    --ez-split-button--font-weight: var(--font-weight--medium, 500);
    /*@doc Define o raio da borda do botão.*/
    --ez-split-button--border-radius: var(--border--radius-24, 24px);
    /*@doc Define a cor do texto e do ícone quando o cursor está sobre o botão.*/
    --ez-split-button--hover-color: var(--color--primary-600, #007a5a);
    /*@doc Define a cor de fundo quando o cursor está sobre o botão.*/
    --ez-split-button--hover--background-color: var(--color--gray-80, #F9F9F9);
    /*@doc Define a cor do texto quando o botão está desabilitado.*/
    --ez-split-button--disabled-color: var(--color--gray-400, #77777A);
    /*@doc Define a cor de fundo quando o botão está desabilitado.*/
    --ez-split-button--disabled--background-color: var(--color--gray-80, #F9F9F9);
    /*@doc Define o estido da borda quando o botão está selecionado.*/
    --ez-split-button--focus--border: var(--border--medium, 2px) var(--color--primary-300);
    /*@doc Define a sombra do botão quando selecionado.*/
    --ez-split-button--focus--box-shadow: none;

    display: flex;
    width: fit-content;
  }

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

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

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

  .ez-split-button.large {
    --ez-split-button--height: var(--space--42, 42px);
  }

  .ez-split-button.medium {
    --ez-split-button--height: var(--space--32, 32px);
  }

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

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

    /*public*/
    min-width: var(--ez-split-button--min-width);
    width: var(--ez-split-button--width);
    height: var(--ez-split-button--height);
    font-family: var(--ez-split-button--font-family);
    font-size: var(--ez-split-button--font-size);
    font-weight: var(--ez-split-button--font-weight);
    padding: var(--ez-split-button__label--padding-top) 0 var(--ez-split-button__label--padding-bottom) 0;
    border-top-left-radius: var(--ez-split-button--border-radius);
    border-bottom-left-radius: var(--ez-split-button--border-radius);
    background-color: var(--ez-split-button--background-color);
    color: var(--ez-split-button--color);
    fill: var(--ez-split-button--color);
    border: none;
  }

  label {
    cursor: pointer;
    line-height: var(--ez-split-button--line-height);
  }

  .ez-split-button__left-button{
    border: var(--ez-split-button--border);
    border-right: none;
    outline: none;
    gap: var(--space--8, 8px);
    padding-left: var(--space--12, 12px);
    padding-right: var(--space--8, 8px);
  }
  .ez-split-button__right-button{
    border: var(--ez-split-button--border);
    border-left: none;
    outline: none;
  }

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

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

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

  .ez-split-button__left-button:hover,
  .ez-split-button__right-button:hover {
    outline: none;
    background-color: var(--ez-split-button--hover--background-color);
    color: var(--ez-split-button--hover-color);
    fill: var(--ez-split-button--hover-color);
    --ez-icon--color: var(--ez-split-button--hover-color);
  }

  .ez-split-button__left-button:disabled,
  .ez-split-button__left-button[aria-disabled],
  .ez-split-button__left-button:disabled label,
  .ez-split-button__left-button[aria-disabled] label,
  .ez-split-button__right-button:disabled,
  .ez-split-button__right-button[aria-disabled]{
    background-color: var(--ez-split-button--disabled--background-color);
    color: var(--ez-split-button--disabled-color);
    fill: var(--ez-split-button--disabled-color);
    border: none;
    --ez-icon--color: var(--ez-split-button__left-icon--disabled-color);
    cursor: not-allowed;
  }  
  .ez-split-button__left-button:disabled,
  .ez-split-button__left-button[aria-disabled]{
    --ez-icon--color: var(--ez-split-button__left-icon--disabled-color);
    border: var(--ez-split-button--disabled-border);
    border-right: none;
  }
  .ez-split-button__right-button:disabled,
  .ez-split-button__right-button[aria-disabled]{
    --ez-icon--color: var(--ez-split-button__right-icon--disabled-color);
    border: var(--ez-split-button--disabled-border);
    border-left: none;
  }

  .ez-split-button__right-button {
    border-top-right-radius: var(--ez-split-button--border-radius);
    border-bottom-right-radius: var(--ez-split-button--border-radius);
    border-top-left-radius: 0;
    border-bottom-left-radius:0;
    border-right: var(--ez-split-button--border);
  }

  .ez-split-button__divider {
    width: 1px;
    box-sizing: border-box;
    position: relative;
    background-color: var(--ez-split-button--background-color);
    height: var(--ez-split-button--height);
    border-top: var(--ez-split-button--border);
    border-bottom: var(--ez-split-button--border);
  }

  .ez-split-button__divider[aria-disabled],
  .ez-split-button__divider.disabled {
    cursor: not-allowed;
    background-color: var(--ez-split-button--disabled--background-color);
    border-top: var(--ez-split-button--disabled--border);
    border-bottom: var(--ez-split-button--disabled--border);
  }
  .ez-split-button__divider:before {
    content: "";
    position: absolute;
    left: 0;
    border-left: 1px solid rgba(0, 0, 0, 10%);
    border-radius: 2px;
    height: 75%;
    top: 10%;
    bottom: 10%;
  }
  
  .btn-icon--medium {
    min-width: --ez-split-button__medium-icon--width;
  }
  
  .btn-icon--large {
    min-width: --ez-split-button__large-icon--width;
  }

  .ez-split-button__right-button-container {
    position: absolute;
    left: 0;
    padding-left: var(--ez-split-button__right-button--padding-left);
    padding-right: var(--ez-split-button__right-button--padding-right)
  }
  
  .ez-split-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--ez-split-button--color);
  }

  .dropdown {
    display: flex;
  }
  
  .dropdown-content {
    display: block;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    z-index:  var(--ez-elevation--8);
    border-radius: var(--ez-split-button--border-radius);
  }

  .dropdown-content > ez-dropdown {
    position: relative;
}

.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-split-button--secondary) .ripple {
  background: rgba(0, 133, 97, 0.2);
}

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

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

.ez-split-button__left-button.pressed,
.ez-split-button__right-button.pressed {
  transform: scale(0.98);
}


.ez-split-button__left-button > *:not(.ripple),
.ez-split-button__right-button > *:not(.ripple) {
  position: relative;
  z-index: 1;
}

.ez-split-button__left-button:disabled .ripple,
.ez-split-button__left-button[aria-disabled] .ripple,
.ez-split-button__right-button:disabled .ripple,
.ez-split-button__right-button[aria-disabled] .ripple {
  display: none;
}

.ez-split-button__left-button:disabled,
.ez-split-button__left-button[aria-disabled],
.ez-split-button__right-button:disabled,
.ez-split-button__right-button[aria-disabled] {
  transform: scale(1) !important;
}

/* Apply variant styles to buttons */