@import (reference) "./../styles/variables/zindex.less";
@import (reference) "./../styles/variables/neptune-tokens.less";
@import (reference) "./../styles/less/mixins/_logical-properties.less";

.snackbar {
  text-align: center;
  position: fixed;
  bottom: 0;
  .left(0);

  .right(0, 0);

  z-index: @zindex-mobile-nav;

  &__text {
    background: @color-navy-background-elevated;
    color: @color-navy-content-primary;
    display: inline-flex;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
    align-items: center;
    justify-content: space-between;
    .text-align(left);

    font-size: var(--font-size-14);
    margin: 0 var(--size-16);
    padding: var(--size-8) var(--size-16);
    width: calc(100% - var(--size-32));
    transition: 400ms cubic-bezier(0.215, 0.61, 0.355, 1);

    .np-theme-personal & {
      box-shadow: 0 2px 4px 0 rgba(69, 71, 69, 0.35);
      position: relative;
      background: var(--color-contrast-theme);
      border-radius: var(--radius-small);
      color: var(--color-contrast-overlay);

      &::after {
        display: block;
        border-radius: inherit;
        height: 100%;
        width: 100%;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        background-color: var(--color-background-neutral);
      }
    }

    .np-theme-personal--dark &,
    .np-theme-personal--forest-green & {
      box-shadow: none;
    }

    @media (--screen-sm) {
      width: auto;
      max-width: 600px;
    }

    &__action {
      flex-shrink: 0;
      margin-left: var(--size-16);

      [dir="rtl"] & {
        margin-right: var(--size-16);
        margin-left: 0;
      }
    }

    &-container-enter,
    &-container-exit {
      transform: translateY(calc(100% + 10px));
    }

    &-container-enter-active {
      transform: translateY(-16px);
      transform: translateY(calc(-16px - env(safe-area-inset-bottom)));

      @media (--screen-sm) {
        transform: translateY(-24px);
      }
    }
  }
}