button.btn {
    padding: 8px 12px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  
    svg-icon {
      svg {
        width: 14px;
        max-height: 26px;
      }
      margin-right: 8px;
    }
  
    &.circle {
      padding: 8px;
      width: 40px;
      height: 40px;
      svg-icon {
        margin-right: 0;
      }
    }
    &.btn-primary {
      background: linear-gradient(86.23deg, #21a843 -2.63%, #49f574 93.46%);
      color: rgba(0, 0, 0, 1);
      border: none;
  
      svg-icon {
        svg path {
          fill: rgba(0, 0, 0, 1);
        }
      }
      &:hover {
        background: rgba(33, 168, 67, 1);
      }
      &:disabled {
        background: rgb(105, 105, 105, 1);
      }
    }
    &.btn-primary-outline {
      background: transparent;
      color: white;
      // TODO : linear-gradient not working with border
      border: solid 2px rgba(33, 168, 67, 1);
      svg-icon {
        svg path {
          fill: white;
        }
      }
      &:hover {
        background: rgba(33, 168, 67, 1);
      }
      &:disabled {
        border: solid 2px rgb(105, 105, 105, 1);
        background: transparent;
        color: rgb(105, 105, 105, 1);
        svg-icon {
          svg path {
            fill: rgb(105, 105, 105, 1);
          }
        }
      }
    }
    &.large {
      padding: 12px 16px;
      font-size: 16px;
      &.btn-primary {
        padding: 14px 16px;
      }
      &.circle {
        padding: 0;
        width: 56px;
        height: 56px;
        border-radius: 30px;
        svg-icon {
          &,
          svg {
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }