.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 theme('colors.primary.900');
        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: theme('colors.primary.600');
    color: theme('colors.white');
    background: theme('colors.primary.500');

    &:hover,
    &:focus {
        color: theme('colors.white');
        background: theme('colors.primary.600');
        border-color: theme('colors.primary.800');
    }

    &:active {
        color: theme('colors.white');
        background: theme('colors.primary.800');
        border-color: theme('colors.primary.900');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: theme('colors.white');
        background: theme('colors.gray.400');
        border-color: theme('colors.gray.500');
    }
}

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

    &:hover,
    &:focus {
        color: theme('colors.primary.600');
        background: theme('colors.white');
    }

    &:active {
        color: theme('colors.primary.800');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: theme('colors.gray.500');
        background: theme('colors.white');
        border-color: theme('colors.gray.200');
    }
}

.tb-button--secondary {
    color: theme('colors.gray.800');
    background: theme('colors.white');
    border-color: theme('colors.gray.400');

    &:hover,
    &:focus {
        color: theme('colors.gray.900');
        background: theme('colors.white');
        border-color: theme('colors.gray.500');
    }

    &:active {
        color: theme('colors.black');
        border-color: theme('colors.gray.800');
    }

    &[disabled],
    &[disabled]:hover,
    &[disabled]:focus,
    &[disabled]:active {
        color: theme('colors.gray.500');
        background: theme('colors.white');
        border-color: theme('colors.gray.200');
    }
}

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

    &:hover,
    &:focus {
        color: theme('colors.primary.600');
    }

    &:active {
        color: theme('colors.primary.800');
    }

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

.tb-button--secondary-quiet {
    border: 0;
    padding-right: 0;
    padding-left: 0;
    color: theme('colors.gray.800');
    background: theme('colors.white');

    &:hover,
    &:focus {
        color: theme('colors.gray.900');
    }

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

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

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

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

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