@use 'sass:math';

.pocket-logged-in-cta {
  $max-button-width: 130px;
  $min-button-height: 18px;

  font-size: var(--font-size-small);
  margin-inline-end: var(--space-large);
  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: var(--border-radius-small);
    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 2px to align with the rest of the cta text.
    margin-block-start: calc(var(--space-xxsmall) * -1);
    min-height: $min-button-height;
    padding: 0 var(--space-small);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-inline-end: var(--space-small);
  }

  .pocket-cta-button,
  .cta-text {
    vertical-align: top;
  }
}
