.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; font-family: Monaco, Consolas, 'Courier New', Courier, monospace; font-size: 12px; @include dark-theme { background-color: $color-gray-90; border: 1px solid $color-gray-45; color: $color-gray-02; } } } } .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 - 22px) / 2; $open-pad-y: ($open-height - 22px) / 2; .open { float: left; display: inline-block; width: $open-width; height: $open-height; padding: $open-pad-y $open-pad-x; cursor: pointer; border-radius: 0 5px 5px 0; @include light-theme { border: solid 1px $color-gray-25; background: $color-gray-02; } @include dark-theme { border: solid 1px $color-gray-45; background-color: $color-gray-90; color: $color-gray-02; } &:before { content: ''; display: block; width: 24px; height: 24px; @include light-theme { @include header-icon-black('../images/icons/v2/open-24.svg'); } @include dark-theme { @include header-icon-white('../images/icons/v2/open-24.svg'); } } } .link { border-radius: 5px 0 0 5px; float: left; width: calc(100% - #{$open-width}); max-width: $link-max-width; height: $open-height; padding: 0 10px; outline-offset: -4px; @include light-theme { border: solid 1px $color-gray-25; border-right: none; } @include dark-theme { color: $color-gray-02; border: solid 1px $color-gray-45; border-right: none; background-color: $color-gray-90; } } } }