@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/spacing';
@import '~@kaizen/design-tokens/sass/layout';

@layer kz-components {
  .actions {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
  }

  .actionsAlignStart {
    flex-direction: row-reverse;
    justify-content: flex-end;
  }

  .padded {
    padding: $spacing-md;
    flex-direction: column;

    @media (min-width: $layout-breakpoints-medium) {
      padding: 0 $spacing-lg $spacing-lg;
      flex-direction: row-reverse;
    }
  }

  .actionButton {
    width: 100%;

    @media (min-width: $layout-breakpoints-medium) {
      width: inherit;
    }
  }

  .actionButton + .actionButton {
    margin-inline-end: $spacing-sm;

    @media (max-width: (calc(#{$layout-breakpoints-medium} - 1px))) {
      margin-block-start: $spacing-sm;
    }
  }

  .footerWrap {
    align-items: baseline;
    width: 100%;
    box-sizing: border-box;
  }

  .center {
    display: flex;
    justify-content: center;
  }

  .border {
    border-block-start: 1px solid $border-solid-border-color;
  }

  .start {
    display: flex;
    justify-content: flex-start;
  }

  .end {
    display: flex;
    justify-content: flex-end;
  }

  .fixed {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
  }

  .filler {
    visibility: hidden;
  }
}