@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/compat-tokens-mixins' as compatMixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

@include compatMixins.sky-default-overrides('.sky-toaster') {
  --sky-override-toaster-max-width: 300px;
  --sky-override-toaster-padding: 0 #{$sky-margin-double $sky-margin-double} 0;
}

@include compatMixins.sky-modern-overrides('.sky-toaster', false) {
  --sky-override-toaster-width: var(--modern-size-400);
  --sky-override-toaster-width-xs: var(--modern-size-320);
}

.sky-toaster {
  bottom: 0;
  right: 0;
  display: block;
  max-width: var(--sky-override-toaster-max-width, none);
  max-height: 100%;
  overflow-y: auto;
  position: fixed;
  padding: var(
    --sky-override-toaster-padding,
    var(--sky-space-inset-balanced-xl) var(--sky-space-inset-balanced-xl) 0
  );
}

.sky-theme-modern {
  .sky-toaster {
    width: var(
      --sky-override-toaster-width-xs,
      max(
        var(--sky-size-width-viewport-smallest),
        calc(
          min(var(--sky-size-max_width-overlay_message)) +
            calc(var(--sky-space-inset-balanced-xl) * 2)
        )
      )
    );
  }

  @include mixins.sky-host-responsive-container-sm-min(false) {
    .sky-toaster {
      width: var(
        --sky-override-toaster-width,
        max(
          var(--sky-size-width-viewport-smallest),
          calc(
            min(var(--sky-size-max_width-overlay_message)) +
              calc(var(--sky-space-inset-balanced-xl) * 2)
          )
        )
      );
    }
  }
}
