.p_btn {
  &.isPrimary,
  &.isOutline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: fit-content;
    padding: 13px 30px;
    border-radius: 58px;
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    position: relative;
    line-height: normal;
  }

  &.isPrimary {
    font-weight: bold;
    min-width: 300px;
    background: #60c51d;
    color: white;
    border: 1px solid #60c51d;
  }

  &.isOutline {
    font-weight: bold;
    min-width: 300px;
    background: white;
    color: #60c51d;
    border: 1px solid #60c51d;
  }

  &.isPrimary::after,
  &.isOutline::after {
    content: "";
    width: 18px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 1L17 7.5L10.5 14' stroke='%23ffffff' stroke-width='1.5'/%3E%3Cpath d='M1 7.5H17' stroke='%23ffffff' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  &.isOutline::after {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='15' viewBox='0 0 18 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5 1L17 7.5L10.5 14' stroke='%2360c51d' stroke-width='1.5'/%3E%3C/svg%3E");
  }

  &.isPrimary.isLink::after {
    background-image: url("../../images/linkIcon.svg");
    background-size: contain;
  }

  &.isOutline.isLink::after {
    background-image: url("../../images/linkIcon.svg");
    background-size: contain;
    filter: brightness(0) saturate(100%) invert(58%) sepia(95%) saturate(1200%) hue-rotate(70deg)
      brightness(95%) contrast(85%);
  }

  &.isPrimary:hover, &.isPrimary:focus {
    color: white !important;
    background-color: #59b819 !important;
  }

  &.isOutline:hover, &.isOutline:focus {
    color: #65d11e !important;
    opacity: 0.8;
  }
}