@hashicorp/react-subnav/partials/CtaLinks/github-stars-link/style.module.css

Displays a navigation bar, with links and a call-to-action.

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

/* Note: consumes from theme.module.css, as marked */

.root {
  --local-scrim-color: transparent;
  --local-divider-color: var(--border-color); /* from theme.module.css */

  position: relative;
  color: var(--gh-stars-icon-color); /* from theme.module.css */
  border: 1px solid var(--local-divider-color); /* from theme.module.css */
  background: none;
  transition: background 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;

  /* Scrim used in most hover effects */
  &::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    border-radius: 1px;
    transition: background 0.25s ease;
    z-index: 0;
    background-color: var(--local-scrim-color);
  }

  &:hover,
  &:active {
    --local-divider-color: transparent;
    --local-scrim-color: var(
      --gh-stars-scrim-color
    ); /* from theme.module.css */
  }
}

.github {
  display: flex;
  align-items: center;
  padding: 9px 10px;
  & > svg {
    width: 20px;
    height: 20px;

    & [fill] {
      fill: currentColor;
    }

    & [stroke] {
      stroke: currentColor;
    }
  }
}

.stars {
  display: flex;
  align-items: center;
  height: 100%;
  border-left: 1px solid;
  border-color: var(--local-divider-color);
  padding: 6px 12px 7px 10px;
  transition: border-color 0.2s;
  z-index: 1;
  & > svg {
    width: 16px;
    height: 16px;
    margin-right: 4px;
    margin-top: 1px;

    & [fill] {
      fill: currentColor;
    }

    & [stroke] {
      stroke: currentColor;
    }
  }
}