@import "../../../stylesheets/variables/_all"; .modal { display: flex; flex-direction: column; align-self: flex-start; padding: ($line-height-computed / 2) $line-height-computed; outline: none; @include mq($small-only) { width: 100% } } .content { color: $color-text; font-weight: normal; padding: $line-height-computed 0; } .header { display: flex; padding: $line-height-computed 0; border-bottom: $border-size solid $color-gray-lighter; } .actions { flex: 0 1 35%; display: flex; align-items: center; justify-content: space-between; } .title { @extend %text-elipsis; flex: 1; margin: 0; font-weight: 400; } %btn { flex: 0 1 48%; } .dismiss, .confirm { @extend %btn; } .dismiss { } .confirm { color: $color-white !important; background-color: $color-link !important; }