@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;
  }
}