@use 'libs/components/theme/src/lib/styles/mixins' as mixins;
@use 'libs/components/theme/src/lib/styles/variables' as *;

// Host element must be a block to allow FF to make proper getBoundingClientRect() calculations.
@include mixins.sky-component-host('modern') {
  display: block;
}

@include mixins.sky-component('modern', '.sky-action-button-container', false) {
  margin: 0 auto;

  // Grid based on the assumption that each action button is 446px wide with 30px inner margins.
  &.sky-action-button-container-sm {
    max-width: 446px; // 1 action button per row.
  }

  &.sky-action-button-container-md {
    max-width: 912px; // 2 action buttons per row.
  }

  &.sky-action-button-container-lg {
    max-width: 1378px; // 3 action buttons per row.
  }

  .sky-action-button-flex {
    sky-action-button {
      display: block;
    }

    .sky-action-button {
      height: auto;
      min-width: auto;
      margin: 0;
    }
  }
}

@include mixins.sky-component(
  'modern',
  '.sky-action-button-container',
  false,
  'xs'
) {
  .sky-action-button-flex {
    display: flex;
    flex-flow: row wrap;
    padding: 0;
    margin: 0 0 -20px -20px;

    sky-action-button {
      margin: 0 0 20px 20px;
      flex: 0 1 446px;
    }
  }
}

@include mixins.sky-component(
  'modern',
  '.sky-action-button-container',
  false,
  'sm'
) {
  .sky-action-button-flex {
    &.sky-action-button-flex-align-center {
      justify-content: center;
    }

    &.sky-action-button-flex-align-left {
      justify-content: flex-start;
    }
  }
}
