@import "../components/buttons.css";
@import "../mixins/text/h1.css";
@import "../mixins/grid/row.css";
@import "../mixins/grid/column.css";
@import "../mixins/utils/border-box.css";
@import "../mixins/utils/center-items.css";

.buttons__title {
  @mixin h1;
}

.buttons__list {
  @mixin row;
  flex-wrap: wrap;
}

.buttons__list__item {
  @mixin column 4;
  @mixin center-items;
  @mixin border-box;
  padding: 2rem;
  transition: all .1s ease-in-out .2s;

  .menu-active & {
    @mixin column 12;
  }

  & > * {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
  }
}

.buttons__list__item__group {
  margin-bottom: 1rem;
}