@use "sass:math";

$spacing: 1.5em;

.toolbar {
  display: flex;
  margin-bottom: math.div($spacing, 2);
  justify-content: space-between;
  flex-wrap: wrap;
  margin-left: math.div(-$spacing, 4);
  margin-right: math.div(-$spacing, 4);

  &.collapse + .toolbar {
    margin-top: math.div(-$spacing, 2);
  }

  .toolbar-item {
    margin-bottom: math.div($spacing, 2);
    padding-left: math.div($spacing, 4);
    padding-right: math.div($spacing, 4);
    align-self: center;
    flex-grow: 1;

    &.is-minimum {
      flex-grow: 0;
    }

    &.is-right-aligned {
      flex-grow: 0;
      margin-left: auto;
    }

    &.is-top-aligned {
      align-self: auto;
    }

    &.is-mobile-full-width {
      @include mobile {
        flex-grow: 1;
        margin-left: 0;
        width: 100%;
      }
    }
  }
}