@import "variables.css";

.root {
  &[aria-selected="true"] {
    @mixin outline;
  }
}

.link {
  display: flex;
  justify-content: center;
  align-items: center;

  background: $story-search-results-see-all-background;
  min-height: calc(3 * var(--mini-unit));

  font-family: var(--v2-font-family-primary);
  font-weight: var(--v2-font-weight-primary-semi-bold);
  font-size: var(--v2-font-size-3);
  line-height: var(--v2-line-height-reset);
  color: $story-search-results-see-all-label;

  text-decoration: none;
  text-transform: uppercase;

  &:hover {
    background: $story-search-results-see-all-hover;
  }
}

.icon {
  font-weight: var(--font-weight-medium);
  padding-left: calc(0.5 * var(--mini-unit));
  line-height: calc(16em / 13);
  margin-top: -2px;

  color: $story-search-results-see-all-label;
}
