Source code
Revision control
Copy as Markdown
Other Tools
@use 'sass:math';
.pocket-logged-in-cta {
$max-button-width: 130px;
$min-button-height: 18px;
font-size: 13px;
margin-inline-end: 20px;
display: flex;
align-items: flex-start;
.pocket-cta-button {
white-space: nowrap;
background: var(--newtab-primary-action-background);
letter-spacing: -0.34px;
color: $white;
border-radius: 4px;
cursor: pointer;
max-width: $max-button-width;
// The button height is 2px taller than the rest of the cta text.
// So I move it up by 1px to align with the rest of the cta text.
margin-top: -1px;
min-height: $min-button-height;
padding: 0 8px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 11px;
margin-inline-end: 10px;
}
.cta-text {
font-weight: normal;
font-size: 13px;
line-height: math.div(16, 13); // (16 / 13) -> 16px computed
}
.pocket-cta-button,
.cta-text {
vertical-align: top;
}
}