.button--clear{
    border: none;
    background-color: transparent;
    padding: 0;
    outline: none;
    cursor: pointer;
}

.button{
    @extend .button--clear;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    padding: #{$spacing * 0.75} $spacing * 2;
    background-color: $button;
    color: $color0;
    border-radius: $radius;
    display: inline-block;
    text-align:center;
    transition: background-color $duration;

    &:hover, &:active, &:focus{
        background-color: darken($button, 5%);
    }

    &.active{
        background-color: darken($button, 10%);
    }
}

@for $i from 0 to length($colors) {
    .button--#{$i}{
        background-color: nth($colors, $i + 1);
    
        &:hover, &:active, &:focus{
            background-color: darken(nth($colors, $i + 1), 5%);
        }

        &.active{
            background-color: darken(nth($colors, $i + 1), 10%);
        }
    }
}

.button[disabled]{
    opacity: 0.5;
    pointer-events: none;
}