@import '../config/import';
@import '../base/boxes';

.crayons-snackbar {
  position: fixed;
  z-index: 9999; // todo: make z-index a variable..
  left: $su-2;
  right: $su-2;
  bottom: $su-2;
  display: grid;
  grid-gap: $su-2;

  @media (min-width: $breakpoint-s) {
    max-width: 480px;
    width: auto;
    left: $su-6;
    right: auto;
    bottom: $su-6;
    justify-items: flex-start;
  }

  &__item {
    @extend .crayons-box;
    @extend .crayons-box--filled;
    @extend .crayons-box--level-1;
    color: var(--body-color-inverted);
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: $su-2;
  }

  &__body {
    padding: 0 $su-2;
  }

  &__actions {
    flex-shrink: 0;
    padding-left: $su-2;
  }
}
