@use 'sass:math';

.more-recommendations {
  display: flex;
  align-items: center;
  white-space: nowrap;
  line-height: math.div(16, 13); // (16 / 13) -> 16px computed

  &::after {
    background: url('chrome://global/skin/icons/arrow-right-12.svg') no-repeat center center;
    content: '';
    -moz-context-properties: fill;
    display: inline-block;
    fill: var(--newtab-primary-action-background);
    height: 16px;
    margin-inline-start: var(--space-xsmall);
    vertical-align: top;
    width: var(--icon-size-xsmall);
  }

  &:dir(rtl)::after  {
    background-image: url('chrome://global/skin/icons/arrow-left-12.svg');
  }
}