.btn {
  font-weight: var(--medium-font-weight);
  border-radius: var(--border-radius);
}

.btn-sm.with-svg {
  svg {
    width: 0.9rem;
    height: 0.9rem;
  }

  &.svg-left {
    svg {
      margin-right: 0.25rem;
    }
  }

  &.svg-right {
    svg {
      margin-left: 0.25rem;
    }
  }
}

.zoom-btn {
  background-color: #2d8cff;
  color: white;

  &:hover {
    background-color: #0f7bff;
  }
}

.discord-btn {
  background-color: var(--discord-brand-color);
  color: white;

  &:hover {
    color: white;
    background-color: #7b83ee;
  }
}

.instagram-btn {
  background: var(--ig-gradient);
  color: white;
  position: relative;
  border: none !important;

  * {
    position: relative;
  }

  &:before {
    content: "";
    transition: var(--transition);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    z-index: 0;
  }

  &:hover:before {
    opacity: 0.1;
  }
}

.btn-a,
.btn-link {
  color: var(--brand-color);
  cursor: pointer;

  &:focus,
  &:active,
  &:hover {
    text-decoration: none;
    color: var(--brand-active-color);
  }
}

.btn-a {
  font-size: inherit;
  vertical-align: inherit;
  font-weight: inherit;
  line-height: inherit;
  border: 0;
  padding: 0;
  display: inline-block;
}

.btn-link-gray {
  color: var(--tertiary-color);

  &:hover {
    color: var(--secondary-color);
  }
}