@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/mixins" as mix;

.wrapper {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) min(calc(100vw - calc(var(--spacing-md) * 2)), 100ch)
    minmax(0, 1fr);
  align-items: center;
  padding: var(--spacing-md) 0 var(--spacing-lg);

  .toolbar {
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 5;
    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);

    @include mix.media("screen") {
      @include mix.dimensions("sm") {
        justify-content: flex-end;
        width: auto;
        position: relative;
        left: unset;
        background: inherit;
        border: none;
        box-shadow: none;
      }
    }
  }
}

.body {
  grid-column: 2;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
}