.tb-button {
    font-size: $text-base;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    border: 1px solid currentColor;
    padding: $spacing-3 $spacing-base;
    border-radius: $radius-small;
    transition: $transition-base;

    &:hover {
        text-decoration: none;
    }

    &:focus {
        outline: .125rem dotted config('colors.primary-darkest');
        outline-offset: 1px;
    }

    &:active {
        outline: 0;
    }

    &[disabled] {
        cursor: not-allowed;
    }
}

.tb-button--small {
    font-size: $text-sm;
}

.tb-button--large {
    font-size: $text-lg;
}

.tb-button--has-icon {
    display: inline-flex;
    align-items: center;

    .tb-button__content-wrapper {
        display: inline-flex;
        align-items: center;
    }

    .tb-icon {
        top: 0;
        margin-right: $spacing-2;
    }
}

.tb-button--has-icon-last {
    .tb-icon {
        margin-right: 0;
        margin-left: $spacing-2;
    }
}

.tb-button--call-to-action {
    border-color: config('colors.primary-dark');
    color: config('colors.white');
    background: config('colors.primary');

    &:hover,
    &:focus {
        color: config('colors.white');
        background: config('colors.primary-dark');
        border-color: config('colors.primary-darker');
    }

    &:active {
        color: config('colors.white');
        background: config('colors.primary-darker');
        border-color: config('colors.primary-darkest');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: config('colors.white');
        background: config('colors.grey-light');
        border-color: config('colors.grey');
    }
}

.tb-button--primary {
    color: config('colors.primary');
    background: config('colors.white');

    &:hover,
    &:focus {
        color: config('colors.primary-dark');
        background: config('colors.white');
    }

    &:active {
        color: config('colors.primary-darker');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: config('colors.grey');
        background: config('colors.white');
        border-color: config('colors.grey-lighter');
    }
}

.tb-button--secondary {
    color: config('colors.grey-darker');
    background: config('colors.white');
    border-color: config('colors.grey-light');

    &:hover,
    &:focus {
        color: config('colors.grey-darkest');
        background: config('colors.white');
        border-color: config('colors.grey');
    }

    &:active {
        color: config('colors.black');
        border-color: config('colors.grey-darker');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: config('colors.grey');
        background: config('colors.white');
        border-color: config('colors.grey-lighter');
    }
}

.tb-button--primary-quiet {
    border: 0;
    padding-right: 0;
    padding-left: 0;
    color: config('colors.primary');
    background: config('colors.white');

    &:hover,
    &:focus {
        color: config('colors.primary-dark');
    }

    &:active {
        color: config('colors.primary-darker');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: config('colors.grey');
        background: config('colors.white');
    }
}

.tb-button--secondary-quiet {
    border: 0;
    padding-right: 0;
    padding-left: 0;
    color: config('colors.grey-darker');
    background: config('colors.white');

    &:hover,
    &:focus {
        color: config('colors.grey-darkest');
    }

    &:active {
        color: config('colors.black');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: config('colors.grey');
        background: config('colors.white');
    }
}

.tb-button--square {
    padding: $spacing-base;

    .tb-icon {
        height: 1.25em;
        width: 1.25em;
    }
}

.tb-button--round {
    border-radius: 50%;
}
