@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/variables" as var;
@use "@styles/abstracts/placeholders";

.wrapper {
  --toolbar-size: #{fun.convert-px(75)};

  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--spacing-sm);
  width: 100%;
  height: var(--toolbar-size);
  position: relative;
  background: var(--color-bg);
  border-top: fun.convert-px(4) solid;
  border-image: radial-gradient(
      ellipse at top,
      var(--color-primary-lighter) 20%,
      var(--color-primary) 100%
    )
    1;
  box-shadow: 0 fun.convert-px(-2) fun.convert-px(3) fun.convert-px(-1)
    var(--color-shadow-dark);

  :global {
    animation: slide-in-from-bottom 0.8s ease-in-out 0s 1;
  }

  @media screen and (max-width: #{var.get-breakpoint("sm")}) {
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;

    .modal {
      width: 100%;
      position: fixed;
      top: unset;
      left: 0;
      bottom: calc(var(--toolbar-size) - #{fun.convert-px(4)});
      max-height: calc(100vh - var(--toolbar-size));
    }
  }

  @media screen and (max-height: #{var.get-breakpoint("2xs")}) {
    --toolbar-size: #{fun.convert-px(70)};
  }

  @media screen and (min-width: #{var.get-breakpoint("sm")}) {
    .modal {
      &--search,
      &--settings {
        min-width: fun.convert-px(380);
      }
    }
  }
}