:host {
 
  /* Título do radio */
  /*@doc Define a família da fonte do label.*/
  --ez-radio-button--font-family: var(--font-pattern, Arial);
  /*@doc Define o tamanho do label.*/
  --ez-radio-button--font-size:  var(--text--medium, 14px);
  /*@doc Define o peso da fonte do label.*/
  --ez-radio-button--font-weight: var(--text-weight--large);
  /*@doc Define a cor do texto.*/
  --ez-radio-button--font-color: var(--title--primary, #2B3A54);
  /*@doc Define o espaço superior e inferior da lista de opções.*/
  --ez-radio-button--padding-vertical: var(--space--medium, 12px);
  /*@doc Define o espaço lateral da lista de opções.*/
  --ez-radio-button--padding-horizontal: var(--space--small, 6px);
  
  /* Label itens do radio */
  /*@doc Define a família da fonte do label. */
  --ez-radio-button__form-label--font-family: var(--font-pattern, Arial);
  /*@doc Define o peso da fonte do label. */
  --ez-radio-button__form-label--font-weight: var(--text-weight--medium, 400);
  /*@doc Define a cor do texto. */
  --ez-radio-button__form-label--title-primary: var(--title--primary, #2B3A54);
  /*@doc Define o tamanho do label. */
  --ez-radio-button__form-label--font-size: var(--text--medium, 14px);
  /*@doc Define o espaço lateral da lista de opções.*/
  --ez-radio-button__form-label--padding-horizontal: var(--space--medium, 12px);

  /* Colors */
  /*@doc cor da borda do radio sem seleção (sem seleção / sem foco / sem hover / enabled) */
  --ez-radio-button__form-radio--border-color: var(--title--primary, #2B3A54);
  /*@doc cor do radio selecionado (com seleção / sem foco / sem hover / enabled) */
  --ez-radio-button__form-radio--checked--color: var(--color--primary, #008561);
  /*@doc cor da borda do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) */
  --ez-radio-button__form-radio--disabled--border-color: var(--color--strokes, #dce0e8);
  /*@doc cor do background do radio quando está desativado (sem seleção / sem foco / sem hover / disabled) */
  --ez-radio-button__form-radio--disabled--background-color: var(--background--medium, #f0f3f7);
  /*@doc cor da label quando o radio está desativado (sem seleção / sem foco / sem hover / disabled) */
  --ez-radio-button__form-radio--disabled--color: var(--color--strokes, #dce0e8);
  /*@doc cor do centro do radio quando o radio está desativado (com seleção / sem foco / sem hover / disabled) */
  --ez-radio-button__form-radio--disabled--before--background-color: var(--color--strokes, #dce0e8);
  /*@doc cor do background quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) */
  --ez-radio-button__form-radio--focus--background-color: var(--color--inverted, #fff);
  /*@doc cor do box-shadow quando o radio está ativado e sem seleção (sem seleção / com foco / sem hover / enabled) */
  --ez-radio-button__form-radio--checked--box-shadow-color: var(--background--strong, #e4eaf1);
  /*@doc cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) */
  --ez-radio-button__form-radio--checked--focus--background-color: var(--color--inverted, #fff);
  /*@doc cor do background quando o radio está marcado e com foco (com seleção / com foco / sem hover / enabled) */
  --ez-radio-button__form-radio--checked--focus--box-shadow-color: var(--color--primary-300, #e2f4ef);
  /*@doc cor do background quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) */
  --ez-radio-button__form-radio--checked--hover--background-color: var(--color--inverted, #fff);
  /*@doc cor do box-shadow quando o radio está marcado, com foco e com hover (com seleção / com foco / com hover / enabled) */
  --ez-radio-button__form-radio--checked--hover--box-shadow-color: #daece7; /*d7e9e4*/
  /*@doc cor do hover quando o radio está desmarcado (sem seleção / sem foco / com hover / enabled) */
  --ez-radio-button__form-radio--hover--box-shadow-color: var(--color--strokes, #dce0e8);
  /*@doc cor do fundo quando o radio está marcado e desativado (com seleção / sem foco / com hover / disabled) */
  --ez-radio-button__form-radio--checked--disabled--hover--background-color: var(--background--medium, #f0f3f7);

  /*private*/
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
}

.form {
  /*public*/
  padding: var(--ez-radio-button--padding-vertical) var(--ez-radio-button--padding-horizontal);
  gap: var(--ez-radio-button__form-label--padding-horizontal);
}

.form--vertical {
  /*private*/
  display: flex;
  flex-direction: column;
}

.form--horizontal {
  /*private*/
  display: flex;
  flex-direction: row; 
}

.form__group {
  /*private*/
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
}

.label{
  /*public*/
  font-family: var(--ez-radio-button--font-family);
  font-size: var(--ez-radio-button--font-size);
  font-weight: var(--ez-radio-button--font-weight);  
  color: var(--ez-radio-button--font-color);
}

.form__label{
  /*private*/
  cursor: pointer;
  /*public*/
  font-weight: var(--ez-radio-button__form-label--font-weight);  
  color: var(--ez-radio-button__form-label--title-primary);
  font-family: var(--ez-radio-button__form-label--font-family);
  font-size: var(--ez-radio-button__form-label--font-size);
  padding-left: var(--ez-radio-button__form-label--padding-horizontal);
  padding-right: var(--ez-radio-button__form-label--padding-horizontal);
}

.form__radio {
  /*private*/
  cursor: pointer;
  appearance: none;  
  outline: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;  
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /*public*/
  border: 2px solid var(--ez-radio-button__form-radio--border-color);
}

.form__radio::before {
  /*private*/
  content: '';
  display: block;
  position: absolute;
  opacity: 0;
  transition: all 300ms ease-in-out;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  transform: scale(0.5);
  /*public*/
  background: var(--ez-radio-button__form-radio--checked--color);
}

.form__radio:checked:before {
  /*private*/
  opacity: 1;
}

.form__radio:checked{
  /*public*/
  border: 2px solid var(--ez-radio-button__form-radio--checked--color);
}

.form__radio:disabled{
  /*private*/
  cursor: default;
  /*public*/
  border: 2px solid var(--ez-radio-button__form-radio--disabled--border-color);
  background-color: var(--ez-radio-button__form-radio--disabled--background-color);
}

.form__radio:disabled:hover {
  /*private*/
  box-shadow: inherit;
}

input[type=radio]:disabled ~ label{
  /*private*/
  cursor: default;
  /*public*/
  color: var(--ez-radio-button__form-radio--disabled--color);
}

.form__radio:disabled:before {
  /*public*/
  background: var(--ez-radio-button__form-radio--disabled--before--background-color);
}

.form__radio:focus {
  /*private*/
  transition: 0.25s linear;
  /*public*/
  background-color: var(--ez-radio-button__form-radio--focus--background-color); 
  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--box-shadow-color);
}

.form__radio:checked:focus {
  /*private*/
  transition: 0.25s linear;
  /*public*/
  background-color: var(--ez-radio-button__form-radio--checked--focus--background-color); 
  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--focus--box-shadow-color);
}

.form__radio:checked:hover {
  /*private*/
  transition: 0.25s linear;
  /*public*/
  background-color: var(--ez-radio-button__form-radio--checked--hover--background-color); 
  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--checked--hover--box-shadow-color);
}

.form__radio:hover {
  /*private*/
  transition: 0.25s linear;
  /*public*/
  box-shadow: 0px 0px 0px 6px var(--ez-radio-button__form-radio--hover--box-shadow-color);
}

.form__radio:checked:disabled:hover{
  /*private*/
  box-shadow: none;
  /*public*/
  background-color: var(--ez-radio-button__form-radio--checked--disabled--hover--background-color);
}