.snackbar {
  position: fixed;
  top: -4px;
  
  display: flex;
  flex-direction: column-reverse;
  max-width: calc(488px + var(--space-inline-xl) * 2);
  width: 100%;
  z-index: 9999;

  &_left {
    left: 0;
    transform: translateX(0);
  }

  &_center {
    left: 50%;
    transform: translateX(-50%);
  }

  &_right {
    right: 0;
    transform: translateX(0);
  }

  &__container {
    position: fixed;
    left: var(--space-inline-xl);
    right: var(--space-inline-xl);
    display: flex;
    align-items: center;
    max-width: 488px;
    width: auto;
    padding: var(--snackbar-base-v-padding) var(--snackbar-base-h-padding);
    border-radius: var(--snackbar-base-border-radius);
    background-color: var(--snackbar-info-background-color);

    &:first-child {
      animation: fadeOut 0.35s linear 1 forwards;
    }

    &.show {
      visibility: visible;
      box-shadow: var(--snackbar-base-shadow);
      animation: fadeIn 0.35s linear 1 forwards;
    }

    &_success {
      border-left: var(--snackbar-success-border-left);

      .snackbar__title {
        color: var(--snackbar-success-title-color);
      }
    }

    &_error {
      border-left: var(--snackbar-error-border-left);

      .snackbar__title {
        color: var(--snackbar-error-title-color);
      }
    }

    &_info {
      border-left: var(--snackbar-info-border-left);

      .snackbar__title {
        color: var(--snackbar-info-title-color);
      }
    }

    &_warning {
      border-left: var(--snackbar-warning-border-left);

      .snackbar__title {
        color: var(--snackbar-warning-title-color);
      }
    }
  }

  &__title-description-links-container {
    display: flex;
    flex-direction: column;

    &_direction-row {
      flex-direction: row;

      .snackbar__links-container {
        margin-top: unset;
      }
    }
  }

  &__wrapper-for-title-description {
    display: flex;
    flex-direction: column;
    margin-right: var(--space-outer-xs);
  }
  
  &__icon {
    display: flex;
    margin-right: var(--space-inline-m);
    margin-bottom: auto;
    border-radius: 50%;
    color: var(--color-neutral-0);
  }

  &__title {
    margin-bottom: var(--space-inline-xs);
    font: var(--snackbar-base-title-font);
  }

  &__icon-close {
    display: flex;
    align-self: stretch;
    margin-left: auto;
    padding-left: var(--snackbar-base-close-padding-left);
    border-left: var(--snackbar-base-close-border-left);
    cursor: pointer;
  }

  &__description {
    font: var(--snackbar-base-light-font);
    color: var(--snackbar-base-text-color);
  }

  &__links-container {
    margin-top: var(--space-inline-m);

    a {
      color: var(--color-primary-1000);
      font: var(--text-p-l);
      text-decoration: underline;
    }
  }

  .font-for-title-without-description {
    color: var(--snackbar-base-text-color);
    font: var(--snackbar-base-text-font);
  }

  .font-for-caption-without-title {
    font: var(--snackbar-base-text-font);
    color: var(--snackbar-base-text-color);
  }

  @keyframes fadeIn {
    from {
      top: 0px;
      opacity: 0;
    }
    to {
      top: 20px;
      opacity: 1;
    }
  }

  @keyframes fadeOut {
    from {
      top: 20px;
      opacity: 1;
    }
    to {
      top: 40px;
      opacity: 0;
      visibility: hidden;
    }
  }
}