import styled from "styled-components" ; import { ComponentSize , heights , sidePaddings } from "../../config/sizes" ; import { ButtonType } from "./button" ; type StateColors = { regular : string ; hover : string ; } ; const typeColors = { default : { regular : '#0018cf' , hover : '#2e27cc' , } , danger : { regular : '#d93848' , hover : '#eb4d5d' , } , ghost : { regular : 'transparent' , hover : '#dbdbdb' , } , secondary : { regular : '#000' , hover : '#3d3d3d' , } } ; interface StyledButtonProps { innerType : ButtonType ; size : ComponentSize ; withText : boolean ; } export const StyledButton = styled . button < StyledButtonProps > `
    display: flex;
    align-items: center;
    justify-content: center;

    /* Add margin in case of loading or icon */
    & > *:nth-child(1) {
        margin-left: ${ pr => pr . withText ? 7 : 0 }px;
    }
    font-size: 15px;

    border: none;
    cursor: pointer;
    background-color: ${ ( pr ) => typeColors [ pr . innerType ] . regular };
    padding: 0 ${ pr => sidePaddings [ pr . size ] }px;
    height: ${ pr => heights [ pr . size ] }px;
    color: ${ pr => pr . innerType === 'ghost' ? typeColors [ 'default' ] . regular : '#fff' };
    ${ pr => pr . disabled ? `
        background-color: #a6a6a6;
        color: #5e5e5e;
        cursor: not-allowed;

        &:hover {
            background-color: #a6a6a6 !important;
            color: #5e5e5e !important;
        }
    ` : '' }
    border-radius: 0;
    outline: none;

    &:focus {
        box-shadow: 0 0 0 1px #fff, 0 0 0 2px ${ ( pr ) => typeColors [ pr . innerType ] . regular };
    }
    &:hover {
        background-color: ${ ( pr ) => typeColors [ pr . innerType ] . hover };
    }
` ; export const StyledIcon = styled . div `
    height: 20px;
` ;