vault/ui/app/styles/components/action-block.scss

@use '../utils/font_variables';
@use '../utils/mixins';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

@mixin stacked-grid {
  grid-template-columns: 1fr;
  grid-row: 1/1;
}
@mixin stacked-content {
  margin-bottom: size_variables.$spacing-24;
}

.action-block-width {
  width: 100%;
}

.action-block {
  grid-template-columns: 2fr 1fr;
  display: grid;
  padding: size_variables.$spacing-16 size_variables.$spacing-24;
  line-height: inherit;
  grid-gap: size_variables.$spacing-16;

  @include mixins.until(size_variables.$mobile) {
    @include stacked-grid();
  }
}

.action-block-info {
  @include mixins.until(size_variables.$mobile) {
    @include stacked-content();
  }
}

.action-block.stacked {
  @include stacked-grid();
}
.stacked > .action-block-info {
  @include stacked-content();
}

.action-block-title {
  font-size: size_variables.$size-5;
  font-weight: font_variables.$font-weight-bold;
}
.action-block-action {
  text-align: right;
  @include mixins.until(size_variables.$mobile) {
    text-align: left;
  }
}

/* Action Block Grid */
.replication-actions-grid-layout {
  display: flex;
  flex-wrap: wrap;
  margin: size_variables.$spacing-16 0;
  @include mixins.until(size_variables.$mobile) {
    display: block;
  }
}

.replication-actions-grid-item {
  flex-basis: 50%;
  padding: size_variables.$spacing-12;
  display: flex;
  width: 100%;
}

.replication-actions-grid-item .action-block {
  width: 100%;
  @include mixins.until(size_variables.$mobile) {
    height: inherit;
  }
}