/**
* Copyright (c) HashiCorp, Inc.
* SPDX-License-Identifier: MPL-2.0
*/
.modal-background {
background: rgba(235, 238, 242, 0.9);
}
.modal-card {
box-shadow: $box-shadow-highest;
border: 1px solid $grey-light;
max-height: calc(100vh - 70px);
margin-top: 60px;
min-width: calc(100vw * 0.3);
&-head {
border-radius: 0;
background-color: $grey-lightest;
border-bottom: 1px solid $grey-light;
&-foot {
border: 0;
background-color: $white;
&-title.title {
margin: 0;
.copy-text {
padding: $spacing-s;
margin-bottom: $spacing-s;
code {
overflow: scroll;
max-width: calc(100% - 36px);
background-color: inherit;
.copy-close {
margin-top: $spacing-s;
.modal-card-title.title {
display: flex;
align-items: center;
pre {
.is-highlight {
.modal-card-head {
background: $yellow-010;
border: 1px solid $yellow-100;
.modal-card-title {
color: $yellow-dark;
.modal-confirm-section .is-help {
color: $grey;
margin: $spacing-xxs 0;
strong {
color: inherit;
.modal-confirm-section {
margin: $spacing-xl 0 $spacing-m;
.modal-card-foot-outlined {
background: #f7f8fa;
border-top: 1px solid #bac1cc;
.modal-radio-button {
align-items: baseline;
margin-bottom: $spacing-xs;
input {
top: 2px;
.helper-text {
margin-left: 10px;
// customize spacing (.modal-card-body is restricted to padding: 20px)
.modal-card-custom {
background-color: white;
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
&.has-padding-m {
padding: $spacing-m;
&.has-padding-btm-left {
padding-bottom: $spacing-m;
padding-left: $spacing-m;