:host {
    position: relative;

    /* dimensão */
    /*@doc Define a largura do span do botão.*/
    --ez-sidebar-button--width: 6px;
    /*@doc Define a largura do span do botão quando passar o mouse em cima.*/
    --ez-sidebar-button--hover--width: 12px;
    /*@doc Define a altura do span do botão.*/
    --ez-sidebar-button--height: 96px;
    /*@doc Define a camada em que o componente será exibido.*/
	--ez-sidebar-navigator-button--z-index: var(--elevation--20, 20);

    /* cor */
    /*@doc Define a cor de fundo do botão.*/
    --ez-sidebar-button--background-color--xlight: var(--background--xlight, #fff);
    /*@doc Define a cor de fundo do span do botão.*/
    --ez-sidebar-button--background-color--primary: var(--color--primary);

    /* espaçamento */
    /*@doc Define um espaçamento pequeno entre elementos do componente.*/
    --ez-sidebar-button--space--small: var(--space--small, 6px);
    /*@doc Define um espaçamento mediano entre elementos do componente.*/
    --ez-sidebar-button--space--medium: var(--space--medium, 12px);

    /* sombra */
    /*@doc Define a sombra default do botão.*/
    --ez-sidebar-button--box-shadow: var(--shadow--small, 0px 0px 16px rgba(0, 38, 111, 0.07));
    /*@doc Define a sombra do botão quando passar o mouse em cima.*/
    --ez-sidebar-button--hover--box-shadow: var(--shadow--hard, 0px 0px 16px rgba(43, 58, 84, 0.24));

    /* borda arrendondada */
    /*@doc Define a borda arrendondada no valor de 6px.*/
    --ez-sidebar-button--border--radius-small: var(--border--radius-small);
    /*@doc Define a borda arrendondada no valor de 12px.*/
    --ez-sidebar-button--border--radius-medium: var(--border--radius-medium);
}

button {
    z-index: var(--ez-sidebar-navigator-button--z-index);
    position: absolute;
    display: flex;
    background: var(--ez-sidebar-button--background-color--xlight);
    border: 0;
    border-radius: 0 var(--ez-sidebar-button--border--radius-medium) var(--ez-sidebar-button--border--radius-medium) 0;
    box-shadow:  var(--ez-sidebar-button--box-shadow);
    padding: 0;
    cursor: pointer;
    align-items: center;
}

span {
    width: var(--ez-sidebar-button--width);
    height: var(--ez-sidebar-button--height);
    margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
    background: var(--ez-sidebar-button--background-color--primary);
    border-radius: 0 var(--ez-sidebar-button--border--radius-small) var(--ez-sidebar-button--border--radius-small) 0;
}
ez-icon {
    --ez-icon--color: var(--ez-sidebar-button--background-color--primary);
}

button:hover {
    box-shadow: var(--ez-sidebar-button--hover--box-shadow);
}

button:hover span {
    width: var(--ez-sidebar-button--hover--width);
    margin: var(--ez-sidebar-button--space--medium) 0 var(--ez-sidebar-button--space--medium) 0;
}