.actionable-message { background: $Blue-000; border: 1px solid $Blue-200; border-radius: 8px; padding: 16px; margin-top: 18px; display: flex; flex-flow: column; align-items: center; @include H7; &__message { color: $Blue-600; text-align: center; } &__actions { display: flex; width: 80%; justify-content: space-evenly; align-items: center; margin-top: 10px; color: $Blue-600; } &__action { font-weight: bold; cursor: pointer; } &--warning { background: $Yellow-100; border: 1px solid $Yellow-500; justify-content: center; .actionable-message__message, .actionable-message__action { color: $Black-100; } .actionable-message__action--secondary { text-decoration: underline; } } &--left-aligned { .actionable-message__message, .actionable-message__actions { justify-content: flex-start; text-align: left; width: 100%; } } }