@use "sb-element/core/spacing";
@use "sb-element/core/transitioning";
@use "sb-element/core/display";
@use "sb-element/core/box-shadow";
/*****************************************************************************
Alert / Style
******************************************************************************/

// ROOT
.sb-alert {
  @include display.flex($align: baseline);
  position: fixed;
  left: 0;
  right: 0;
  z-index: 999;
  top: calc(spacing.get-size(m) * (-10));

  .sb-alert-box {
    min-width: 300px;
    overflow: visible;
    @include box-shadow.smooth;
    @include transitioning.ease(300ms, transform);
  }

  &.sb--hidden {
    display: none;
  }

  &.sb--visibly-hidden .sb-alert-box {
    transform: translateY(0);
  }

  &.sb--visible .sb-alert-box {
    transform: translateY(calc(10.5 * spacing.get-size(m)));
  }
}