// Partials / Pill Button

.pill-button{
  transition-duration:0.2s;
  transition-property:border;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  appearance:none;
  background-color:transparent;
  color:$black;
  border:1px solid $pill-button-border-color;
  font-size:13px;
  line-height:17px;
  font-weight:600;
  padding:7px 16px;
  border-radius:20px;
  margin-right:10px;

  &:last-child{
    margin-right:0;
  }

  &:hover{
    border-color:$blue;
  }

  .icon{
    position:relative;
    top:-1px;
    width:14px;
    height:14px;
    margin-left:-3px;
    margin-right:8px;

    svg{
      width:14px;
      height:14px;
    }
  }
}

@include breakpoint($phone){
  .pill-button{
    font-size:12px;
    line-height:15px;
    padding:7px 12px 5px 12px;
    margin-right:7px;

    .icon{
      top:0;
      margin-left:-1px;
      margin-right:5px;
    }
  }
}
