@import '../../css/variables.scss';

.heroNPMWrapper {
  flex-direction: row;
  justify-content: stretch;
  max-width: fit-content;
  display: flex;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: copy;
}

.heroNPMCopy {
  max-width: fit-content;
  height: $line-heights-button;
  color: var(--oss-text-dark);
  background-color: var(--oss-input-background);
  text-align: left;
  padding: 0.21rem 0.94rem;
  line-height: $line-heights-npm;
  font-size: $font-sizes-body-sm;
  letter-spacing: $letter-spacing-sm;
  font-weight: $font-weights-link;
  margin: 0;
  flex: 1 0 auto;
  border-radius: var(--oss-border-radius) 0 0 var(--oss-border-radius);
  border: 0;
}

.heroNPMButton {
  width: $spacing-xxl;
  height: $line-heights-button;
  line-height: $line-heights-button;
  background: var(--oss-button-light);
  transition: all 0.3s ease-in-out;
  font-size: $font-sizes-body-sm;
  font-weight: $font-weights-link;
  letter-spacing: $letter-spacing-lg;
  color: var(--oss-text-light);
  border-radius: 0 var(--oss-border-radius) var(--oss-border-radius) 0;
  text-transform: uppercase;

  &:hover {
    background: var(--oss-button-light-hover);
  }
}
