:host {

  /* Buttons */
  /*@doc Contém o ícone de fechamento do toast.*/
  --ez-toast__btn__close__image: url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg%22%3E<path d="M 7.0060773,5.995511 11.461972,1.5397722 c 0.132856,-0.1328413 0.207547,-0.3130253 0.207547,-0.5009046 0,-0.18786999 -0.07469,-0.3680541 -0.207547,-0.5009048 -0.132857,-0.13284126 -0.31302,-0.20748126 -0.500927,-0.20748126 -0.187812,0 -0.36807,0.07464 -0.500926,0.20748126 L 6.0042244,4.9937015 1.5482921,0.5379628 C 1.4154357,0.40512154 1.2352533,0.33048154 1.0473657,0.33048154 c -0.18787813,0 -0.36807,0.07464 -0.50092647,0.20748126 -0.13285646,0.1328507 -0.20749026,0.31303481 -0.20749026,0.5009048 0,0.1878793 0.0746338,0.3680633 0.20749026,0.5009046 L 5.0023715,5.995511 0.54643923,10.452213 c -0.0676086,0.06534 -0.12151598,0.14352 -0.15859681,0.229916 -0.0370714,0.08639 -0.0565645,0.1794 -0.0573369,0.27335 -7.724e-4,0.09404 0.0171873,0.187331 0.0528423,0.274293 0.0356455,0.08705 0.0882688,0.166087 0.15479148,0.23256 0.0665321,0.06648 0.14562277,0.11897 0.2326735,0.154567 0.0870507,0.0356 0.18031463,0.05344 0.2743433,0.05259 0.094029,-8.5e-4 0.1869528,-0.02049 0.2733331,-0.0576 0.08639,-0.0372 0.1645078,-0.09121 0.2298029,-0.158817 L 6.0042244,6.9973204 10.460119,11.453078 c 0.132856,0.132851 0.313114,0.207444 0.500926,0.207444 0.187907,0 0.36807,-0.07459 0.500927,-0.207444 0.132856,-0.13285 0.207547,-0.313006 0.207547,-0.500904 0,-0.187898 -0.07469,-0.368054 -0.207547,-0.500905 z"/></svg>');

  /* Container */
  /*@doc Define a camada em que o container será exibido.*/
  --ez-toast__container--z-index: var(--elevation--100, 100);
  /*@doc Define a cor de fundo do container.*/
  --ez-toast__container--background-color: var(--color--secondary, #383c45);
  /*@doc Define a posição esquerda do container.*/
  --ez-toast__container--left: var(--space--large, 24px);
  /*@doc Define a posição inferior do container.*/
  --ez-toast__container--bottom: var(--space--large, 24px);
  /*@doc Define a largura do container.*/
  --ez-toast__container--width: 400px;

  /* Icon */
  /*@doc Define o espaçamento à esquerda do ícone.*/
  --ez-toast__icon--padding-left: var(--space--small, 6px);
}

.toast__container {
  /*private*/
  position: fixed;
  display: flex;
  box-sizing: border-box;
  border-radius: 6px;
  align-items: center;
  padding: 12px;
  visibility: hidden;

  /*public*/
  width: var(--ez-toast__container--width);
  left: var(--ez-toast__container--left);
  bottom: var(--ez-toast__container--bottom);
  z-index: var(--ez-toast__container--z-index);
  background-color: var(--ez-toast__container--background-color);
}

.message__container {
  /*private*/
  text-shadow: 0 0 0 #353535, 0 0 1px transparent;
  color: #FFFFFF;
  font-size: 14px;
  width: 90%;
  overflow: hidden;
  hyphens: auto;
  height: auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  display: -webkit-box;
  text-overflow: ellipsis;

  /*public*/
  font-family: var(--font-pattern, "Roboto");
}

.message__container--icon {
  /*private*/
  width: 80%;

  /*public*/
  padding-left: var(--ez-toast__icon--padding-left);
}

.btn-close {
  /*private*/
  margin-top: 3px;
  display: flex;
  justify-content: flex-end;
  align-self: flex-start;
  padding: 0;
  outline: none;
  width: 10%;
  border: none;
  background-color: unset;
  cursor: pointer;
}

.btn-close::after {
  /*private*/
  content: '';
  display: flex;
  background-color: #FFFFFF;
  width: 12px;
  height: 12px;

  /*public*/
  -webkit-mask-image: var(--ez-toast__btn__close__image);
  mask-image: var(--ez-toast__btn__close__image);
}

.toast__container--opened {
  /*private*/
  animation: fadein 0.5s, fadeout 0.5s 3s;
  visibility: visible;
}

@-webkit-keyframes fadein {
  from {
    /*private*/
    opacity: 0;

    /*public*/
    left: calc(var(--ez-toast__container--left) * -1);
  }

  to {
    /*private*/
    opacity: 1;

    /*public*/
    left: var(--ez-toast__container--left);
  }
}

@keyframes fadein {
  from {
    /*private*/
    opacity: 0;

    /*public*/
    left: calc(var(--ez-toast__container--left) * -1);
  }

  to {
    /*private*/
    opacity: 1;

    /*public*/
    left: var(--ez-toast__container--left);
  }
}

@-webkit-keyframes fadeout {
  from {
    /*private*/
    opacity: 1;

    /*public*/
    left: var(--ez-toast__container--left);
  }

  to {
    /*private*/
    bottom: 0;
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    /*private*/
    opacity: 1;

    /*public*/
    left: var(--ez-toast__container--left);
  }

  to {
    /*private*/
    bottom: 0;
    opacity: 0;
  }
}