@import './../../functions', './../../mixins', './../../variables';

$button-wrapper-button: (
  'margin': 12,
);

@layer base {
  .button-wrapper {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    line-height: normal;
    display: flex;
    flex-flow: row wrap;
    place-content: center;

    li,
    > button,
    > .button {
      margin: 0 px-to-rem(get-map($button-wrapper-button, 'margin'))
        px-to-rem(get-map($button-wrapper-button, 'margin'))
        px-to-rem(get-map($button-wrapper-button, 'margin'));
    }

    li {
      line-height: normal;
      display: flex;
      align-content: center;

      &:last-child {
        margin-bottom: px-to-rem(get-map($button-wrapper-button, 'margin'));
      }
    }

    button,
    .button {
      margin-top: auto;
      margin-bottom: auto;
    }
  }
}
