@use './shared' as *;
@use './design' as *;

.#{$namespace}-cell {
  @include basis;
  @include inherit-color;

  &--flex {
    display: flex;
  }

  &--start {
    justify-content: flex-start;
  }

  &--end {
    justify-content: flex-end;
  }

  &--center {
    justify-content: center;
  }

  &--space-around {
    justify-content: space-around;
  }

  &--space-between {
    justify-content: space-between;
  }

  &--space-evenly {
    justify-content: space-evenly;
  }

  &--top {
    align-items: flex-start;
  }

  &--middle {
    align-items: center;
  }

  &--bottom {
    align-items: flex-end;
  }

  & > .#{$namespace}-grid {
    width: 100%;
  }
}