.debug-log { &.modal { padding: 50px; .content { margin: 0; max-width: 100%; width: 100%; height: 100%; display: flex; flex-direction: column; textarea { flex-grow: 1; width: 100%; resize: none; min-height: 100px; } } } .result { $link-max-width: 400px; $open-width: 72px; $open-height: 36px; text-align: center; $group-max-width: $link-max-width + $open-width; .input-group { display: inline-block; width: 100%; max-width: $group-max-width; } $open-pad-x: ($open-width - $button-height - 2) / 2; $open-pad-y: ($open-height - $button-height - 2) / 2; .open { float: left; display: inline-block; width: $open-width; height: $open-height; padding: $open-pad-y $open-pad-x; cursor: pointer; border: solid 1px #ccc; border-radius: 0 $border-radius $border-radius 0; background: $grey_l; &:before { content: ''; display: block; width: $button-height; height: $button-height; @include header-icon-black('/images/open_link.svg'); } } .link { border-radius: $border-radius 0 0 $border-radius; float: left; width: calc(100% - #{$open-width}); max-width: $link-max-width; height: $open-height; padding: 0 10px; outline-offset: -4px; border: solid 1px #ccc; border-right: none; } } }