import React from 'react'; import styled, { StyledFunction } from 'styled-components'; import Button, { ButtonProps } from '../Button'; import tokens from '../../../tokens'; const button: StyledFunction<typeof Button> = styled(Button); const ButtonBase: React.FC<ButtonProps> = button` display: inline-flex; align-items: center; justify-content: center; padding: ${tokens.space.none} ${tokens.space.m}; min-height: ${tokens.sizes.xxl}; border: ${tokens.borders.normal}; border-radius: ${tokens.radii.rectRadius}; transition: ${tokens.transitions.fast}; &, &:hover, &:focus { color: var(--t-button-color, ${({ theme }) => theme.colors?.textColor}); background: var(--t-button-background-color); border-color: var(--t-button-border-color); text-decoration: none; } &[aria-busy='true'], &[aria-disabled='true'] { opacity: ${tokens.opacity.disabled}; } &[aria-busy='true'] { cursor: progress; } &[aria-disabled='true'] { cursor: not-allowed; } &.btn--small { min-height: ${tokens.sizes.xl}; .btn__loading, .btn__icon { + .btn__text { margin-left: ${tokens.space.xs}; } } &.btn--has-text { padding: ${tokens.space.none} ${tokens.space.s}; } } `; ButtonBase.displayName = 'Button.Base'; export default ButtonBase;