.copyable-code { & { display: flex; align-items: flex-start; position: relative; width: 100%; padding: 8px 14px; padding-bottom: 3px; border: var(--decor-border-100); border-color: rgb(var(--tone-gray-200)); border-radius: var(--decor-radius-200); } &.obfuscated { padding-left: 4px; } &::after { position: absolute; top: 0; right: 0; width: 40px; height: 100%; display: block; content: ''; background-color: rgb(var(--tone-gray-050)); } .copy-button { position: absolute; top: 0; right: 0; z-index: 1; } .copy-button button { width: 40px; height: 40px; } .copy-button button:empty::after { display: none; } button[aria-expanded] { margin-top: 1px; margin-right: 4px; cursor: pointer; } button[aria-expanded]::before { content: ''; --icon-size: icon-000; --icon-color: rgb(var(--tone-gray-500)); } button[aria-expanded=true]::before { --icon-name: icon-eye-off; } button[aria-expanded=false]::before { --icon-name: icon-eye; } pre { padding-right: 30px; } code { display: inline-block; overflow: hidden; text-overflow: ellipsis; width: 100%; } hr { width: calc(100% - 80px); margin: 0; margin-top: 8px; margin-bottom: 13px; border: 3px dashed rgb(var(--tone-gray-300)); background-color: rgb(var(--tone-gray-000)); } }