@import "../variables/media";
.button {
  width: fit-content;
  padding: 12rem 16rem;
  min-width: 133rem;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font: var( --nav-link);
  color: var(--common-white);
  text-decoration: none;
  border-radius: var(--border-r-8);
  transition: background-color var(--transition);
  gap: 10rem;
  &:hover {
    transition: background-color var(--transition);
    background-color: var(--common-green-hover);
  }
  &--main {
  background-color: var(--common-green);
  }
  &--transparent {
    color: var(--green-button);
    transition: transform var(--transition);
    padding: 10rem 0;
    min-width: fit-content;
    &:hover {
      transition: background-color var(--transition);
      background-color: transparent;
      transition: transform var(--transition);
      transform: scale(1.1);
    }
  }

  &--card {
    max-width: 170rem;
    text-align: left;
    background-color: var(--common-green-btn-social);
    font: var(--p-sub);
    gap: 10rem;
    padding: 8rem;
    flex-direction: row-reverse;
    svg {
      transform: scaleX(-1);
    }
  }
}