// Custom variables.
@import "../../sass/base.scss";

[style*="--bb--justify-alignment--sm:"] {
  &.cbb-block {
    &:not(.is-grid-item) {
      display: grid;
      justify-content: var(--bb--justify-alignment--sm);

      > * {
        width: auto;
      }
    }
  }

  &.cbb-block-parent.is-grid {
    justify-items: var(--bb--justify-alignment--sm);
  }

  &.cbb-block.is-grid-item {
    justify-self: var(--bb--justify-alignment--sm);
  }
}

@media (min-width: map-get($breakpoints, md )) {
  [style*="--bb--justify-alignment--md:"] {
    &.cbb-block {
      &:not(.is-grid-item) {
        display: grid;
        justify-content: var(--bb--justify-alignment--md);

        > * {
          width: auto;
        }
      }
    }

    &.cbb-block-parent.is-grid {
      justify-items: var(--bb--justify-alignment--md);
    }

    &.cbb-block.is-grid-item {
      justify-self: var(--bb--justify-alignment--md);
    }
  }
}

@media (min-width: map-get($breakpoints, lg )) {
  [style*="--bb--justify-alignment--lg:"] {
    &.cbb-block {
      &:not(.is-grid-item) {
        display: grid;
        justify-content: var(--bb--justify-alignment--lg);

        > * {
          width: auto;
        }
      }
    }

    &.cbb-block-parent.is-grid {
      justify-items: var(--bb--justify-alignment--lg);
    }

    &.cbb-block.is-grid-item {
      justify-self: var(--bb--justify-alignment--lg);
    }
  }
}