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

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

    > * {
      width: 100%;
    }
  }

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

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

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

      > * {
        width: 100%;
      }
    }

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

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

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

      > * {
        width: 100%;
      }
    }

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

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