/** UI Elements – Buttons **/ .btn{

display:inline-block;
font-weight:600;
font-family:$mainFont;
line-height:1;
text-align:center;
text-decoration:none;
border-radius:0;
outline:none;
cursor:pointer;
@include transition(.25s ease-in-out);
&--lg{
    padding:18px 30px;
    font-size:1.125em;
    border:1px solid;
    @include media-min($sm){
        padding:18px 36px;
        font-size:1.11em;
    }
}
&--md{
    padding:14px 27px;
    font-size:1em;
    border:1px solid;
    @include media-min($sm){
        padding:15px 32px;
        font-size:.88em;
    }
}
&--primary{
    color:$white;
    background-color:$yellow;
    border-color:$yellow;
    &:hover, &:focus{
        color:$yellow;
        background:transparent;
        border-color:$yellow;
    }
}
&--secondary{
    color:$white;
    background-color:$blue;
    border-color:$blue;
    &:hover, &:focus{
        color:$blue;
        background:transparent;
        border-color:rgba($blue,.38);
    }
}
&--ghost{
    color:rgba($black,.87);
    background-color:transparent;
    border-color:rgba($black,.87);
    &:hover, &:focus{
        color:$white;
        background:$black;
        border-color:$black;
    }
}
&__github{
    display:inline-block;
    width:18px;
    height:18px;
    margin-right:-2px;
    margin-left:8px;
    vertical-align:-4px;
    background:url('../img/github_black.svg')no-repeat center;
    background-size:100%;
    @include media-min($sm){
        width:24px;
        height:24px;
        margin-right:-4px;
        vertical-align:-6px;
    }
}
&:hover &__github{
    background:url('../img/github_white.svg')no-repeat center;
    background-size:100%;
}
&--md &__github{
    margin-left:6px;
    @include media-min($sm){
        vertical-align:-7px;
    }
}
&__icon{
    display:inline-block;
    width:18px;
    height:18px;
    vertical-align:-4px;
    @include media-min($sm){
        width:24px;
        height:24px;
        font-size:24px;
        vertical-align:-6px;
    }
    @include material-icons(18px);
    &--left{
        margin-right:8px;
        margin-left:-2px;
    }
    &--right{
        margin-right:-2px;
        margin-left:8px;
    }
}
&--md &__icon{
    @include media-min($sm){
        vertical-align:-7px;
    }
    &--left{
        margin-right:6px;
    }
    &--right{
        margin-left:6px;
    }
}
&__arrow{
    &::before{
        display:inline-block;
        width:18px;
        height:18px;
        vertical-align:-4px;
        content:"";
        @include material-icons(18px);
        @include media-min($sm){
            width:24px;
            height:24px;
            font-size:24px;
            vertical-align:-6px;
        }
    }
    &--left::before{
        margin-right:8px;
        margin-left:-2px;
        content:"arrow_backward";
        @include media-min($sm){
            margin-left:-4px;
        }
    }
    &--right::before{
        margin-right:-2px;
        margin-left:8px;
        content:"arrow_forward";
        @include media-min($sm){
            margin-right:-4px;
        }
    }
}

}

/** Dark mode styles **/ body.dark-mode .btn{

&--secondary{
    color:$white;
    background-color:$yellow;
    border-color:$yellow;
    &:hover, &:focus{
        color:$yellow;
        background:transparent;
        border-color:$yellow;
    }
}
&--ghost{
    color:$white;
    background-color:transparent;
    border-color:rgba($white,.18);
    &:hover, &:focus{
        color:$black;
        background-color:$white;
        border-color:$white;
    }
}
&__github{
    background:url('../img/github_white.svg')no-repeat center;
    background-size:100%;
}
&:hover .btn__github{
    background:url('../img/github_black.svg')no-repeat center;
    background-size:100%;
}

}