// Partials / Pill Button

.pill-button{

  --fontSize: 13px;
  --lineHeight: 17px;
  --fontWeight: 600;
  --padding: 7px 16px;
  --color: $black;
  --borderColor: $pill-button-border-color;
  --borderRadius: 20px;
  --borderWidth: 1px;
  --marginRight: 10px;

  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: var(--borderWidth) solid $pill-button-border-color;
  font-size: var(--fontSize);
  line-height: var(--lineHeight);
  font-weight: var(--fontWeight);
  padding: var(--padding);
  border-radius: var(--borderRadius);
  margin-right: var(--marginRight);

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

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

  &:focus{
    outline:0;
  }

  &.large{
    --fontSize:16px;
    --lineHeight: 27px;
    --fontWeight: 500;
    --padding: 8px 20px 6px 20px;
    --borderRadius: 50px;
    --borderWidth: 2px;
    --marginRight: 25px;
  }

  &.blue{
    background-color:$blue;
    color:$white;
    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($tablet-landscape){
  .pill-button{
    &.large{
      --fontSize: 14px;
      --padding: 9px 17px 7px 17px;
      --marginright: 12px;
    }
  }
}

@include breakpoint($phone){
  .pill-button{
    --fontSize:12px;
    --lineHeight:15px;
    --padding: 7px 12px 5px 12px;
    --marginRight: 7px;

    &.large{
      --fontSize: 13px;
      --lineHeight: 19px;
      --padding: 7px 15px 7px 15px;
    }

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