Commit bcc4a85d authored by Mickaël Bourgier's avatar Mickaël Bourgier
Browse files

Remove ButtonGroup snapshot testing

parent 90e80f00
Pipeline #974 passed with stage
in 1 minute and 42 seconds
import React from 'react';
import renderer from 'react-test-renderer';
import { SheetsRegistry } from 'react-jss';
import { render } from '@testing-library/react';
import { createTheme } from '../styles';
import wrapToTest from '../utils/wrapToTest';
import Button from '../Button';
import ButtonGroup from './ButtonGroup';
import Button from './../Button';
import IconButton from '../IconButton';
describe('<ButtonGroup />', () => {
let componentToTest;
let sheets;
let theme;
beforeEach(() => {
componentToTest = null;
sheets = null;
theme = null;
});
afterEach(() => {
if (componentToTest !== null) {
const options = {
...(sheets !== null ? { sheets } : {}),
...(theme !== null ? { theme } : {})
describe('color prop', () => {
it('must set the background color of buttons if they do not override', () => {
const palette = {
success: 'green',
danger: 'red'
};
const component = renderer.create(wrapToTest(options)(componentToTest));
expect(component.toJSON()).toMatchSnapshot();
if (sheets !== null) {
expect(sheets.toString()).toMatchSnapshot();
}
}
});
test('Render with children', () => {
componentToTest = (
<ButtonGroup>
<Button>Hello</Button>
<Button>
<strong>you</strong>
</Button>
</ButtonGroup>
);
sheets = new SheetsRegistry();
const { getAllByText } = render(
wrapToTest({
theme: createTheme({ colors: { palette } })
})(
<ButtonGroup color='success'>
<Button>success</Button>
<Button>success</Button>
<Button color='danger'>danger</Button>
<Button>success</Button>
</ButtonGroup>
)
);
getAllByText(/success/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.success};`);
});
getAllByText(/danger/).forEach(element => {
expect(element).toHaveStyle(`background-color: ${palette.danger};`);
});
});
});
test('Should include className and other props', () => {
componentToTest = (
<ButtonGroup className={'my-custom-classname'} customProp={'fez'}>
<Button>Hello</Button>
<Button>
<strong>you</strong>
</Button>
</ButtonGroup>
);
describe('pill prop', () => {
it('must round buttons and icon buttons', () => {
const Icon = () => 'icon';
const { getByText } = render(
wrapToTest()(
<ButtonGroup pill>
<Button>button</Button>
<IconButton>
<Icon />
</IconButton>
</ButtonGroup>
)
);
expect(getByText(/button/)).toHaveStyle(`border-radius: 100rem`);
expect(getByText(/icon/)).toHaveStyle(`border-radius: 100rem`);
});
});
});
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<ButtonGroup /> Render with children 1`] = `
<div
className="ButtonGroup-root-0-1-1"
>
<button
className="Button-root-0-1-5 Button-primaryColor-0-1-10 Button-plainVariant-0-1-6 ButtonGroup-child-0-1-2"
>
Hello
</button>
<button
className="Button-root-0-1-5 Button-primaryColor-0-1-10 Button-plainVariant-0-1-6 ButtonGroup-child-0-1-2"
>
<strong>
you
</strong>
</button>
</div>
`;
exports[`<ButtonGroup /> Render with children 2`] = `
".ButtonGroup-root-0-1-1 {
display: inline-flex;
align-items: center;
}
.ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1, .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2 {
float: left;
}
.ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:first-child), .ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:first-child) .ButtonGroup-child-0-1-2, .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:first-child), .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:first-child) .ButtonGroup-child-0-1-2 {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:last-child), .ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:last-child) .ButtonGroup-child-0-1-2, .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:last-child), .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:last-child) .ButtonGroup-child-0-1-2 {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:first-child):not(:last-child), .ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:first-child):not(:last-child) .ButtonGroup-child-0-1-2, .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:first-child):not(:last-child), .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:first-child):not(:last-child) .ButtonGroup-child-0-1-2 {
border-radius: 0;
}
.ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:first-child).ButtonGroup-outlineVariant-0-1-3, .ButtonGroup-root-0-1-1 .ButtonGroup-root-0-1-1:not(:first-child) .ButtonGroup-child-0-1-2.ButtonGroup-outlineVariant-0-1-3, .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:first-child).ButtonGroup-outlineVariant-0-1-3, .ButtonGroup-root-0-1-1 .ButtonGroup-child-0-1-2:not(:first-child) .ButtonGroup-child-0-1-2.ButtonGroup-outlineVariant-0-1-3 {
margin-left: -1px;
}
.ButtonGroup-child-0-1-2:hover {
z-index: 1;
}
.ButtonGroup-fullWidth-0-1-4 {
width: 100%;
}
.ButtonGroup-fullWidth-0-1-4 .ButtonGroup-child-0-1-2 {
flex-grow: 1;
}
.Button-root-0-1-5 {
color: inherit;
cursor: pointer;
display: inline-flex;
padding: 0.25rem 1rem;
outline: 0 !important;
transition: background-position 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
box-shadow: none;
user-select: none;
align-items: center;
line-height: 1.5;
font-weight: normal;
font-family: inherit;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-radius: 0.25rem;
vertical-align: middle;
justify-content: center;
text-decoration: none;
background-color: transparent;
background-image: none;
}
.Button-textVariant-0-1-7 {
background-color: transparent;
}
.Button-outlineVariant-0-1-8 {
background-color: transparent;
}
.Button-gradientVariant-0-1-9:not(.Button-disabled-0-1-21) {
padding: calc(0.25rem + 1px) calc(1rem + 1px);
}
.Button-primaryColor-0-1-10.Button-textVariant-0-1-7 {
color: #3796e2;
}
.Button-primaryColor-0-1-10.Button-outlineVariant-0-1-8 {
color: #3796e2;
border-color: #3796e2;
}
.Button-primaryColor-0-1-10.Button-plainVariant-0-1-6 {
color: white;
background-color: #3796e2;
}
.Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9 {
color: white;
border-width: 0;
background-size: 200%;
background-color: #3796e2;
background-image: linear-gradient(60deg, hsl(206.70000000000005, 74.7%, 38.6%), hsl(206.70000000000005, 74.7%, 55.1%), rgb(181, 195, 244));
background-position: 100% 0;
}
.Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(55, 150, 226, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(55, 150, 226, 0.6);
}
.Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(55, 150, 226, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(55, 150, 226, 0.6);
}
.Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-primaryColor-0-1-10.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-primaryColor-0-1-10.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-primaryColor-0-1-10.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(48, 132, 199);
}
.Button-primaryColor-0-1-10.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(42, 113, 171);
}
.Button-primaryColor-0-1-10.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-primaryColor-0-1-10.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(48, 132, 199);
border-color: rgb(48, 132, 199);
background-color: rgba(55, 150, 226, 0.09999999999999998);
}
.Button-primaryColor-0-1-10.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):active {
color: rgb(42, 113, 171);
border-color: rgb(42, 113, 171);
background-color: rgba(55, 150, 226, 0.19999999999999996);
}
.Button-primaryColor-0-1-10.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):hover, .Button-primaryColor-0-1-10.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):focus {
color: rgb(48, 132, 199);
background-color: rgba(55, 150, 226, 0.09999999999999998);
}
.Button-primaryColor-0-1-10.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):active {
color: rgb(42, 113, 171);
background-color: rgba(55, 150, 226, 0.19999999999999996);
}
.Button-secondaryColor-0-1-11.Button-textVariant-0-1-7 {
color: #ea4c88;
}
.Button-secondaryColor-0-1-11.Button-outlineVariant-0-1-8 {
color: #ea4c88;
border-color: #ea4c88;
}
.Button-secondaryColor-0-1-11.Button-plainVariant-0-1-6 {
color: white;
background-color: #ea4c88;
}
.Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9 {
color: white;
border-width: 0;
background-size: 200%;
background-color: #ea4c88;
background-image: linear-gradient(60deg, hsl(337.20000000000005, 79%, 42.5%), hsl(337.20000000000005, 79%, 60.8%), rgb(246, 181, 184));
background-position: 100% 0;
}
.Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(234, 76, 136, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(234, 76, 136, 0.6);
}
.Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(234, 76, 136, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(234, 76, 136, 0.6);
}
.Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-secondaryColor-0-1-11.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-secondaryColor-0-1-11.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-secondaryColor-0-1-11.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(205, 67, 119);
}
.Button-secondaryColor-0-1-11.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(175, 57, 102);
}
.Button-secondaryColor-0-1-11.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-secondaryColor-0-1-11.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(205, 67, 119);
border-color: rgb(205, 67, 119);
background-color: rgba(234, 76, 136, 0.09999999999999998);
}
.Button-secondaryColor-0-1-11.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):active {
color: rgb(175, 57, 102);
border-color: rgb(175, 57, 102);
background-color: rgba(234, 76, 136, 0.19999999999999996);
}
.Button-secondaryColor-0-1-11.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):hover, .Button-secondaryColor-0-1-11.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):focus {
color: rgb(205, 67, 119);
background-color: rgba(234, 76, 136, 0.09999999999999998);
}
.Button-secondaryColor-0-1-11.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):active {
color: rgb(175, 57, 102);
background-color: rgba(234, 76, 136, 0.19999999999999996);
}
.Button-successColor-0-1-12.Button-textVariant-0-1-7 {
color: #66bb6a;
}
.Button-successColor-0-1-12.Button-outlineVariant-0-1-8 {
color: #66bb6a;
border-color: #66bb6a;
}
.Button-successColor-0-1-12.Button-plainVariant-0-1-6 {
color: white;
background-color: #66bb6a;
}
.Button-successColor-0-1-12.Button-gradientVariant-0-1-9 {
color: white;
border-width: 0;
background-size: 200%;
background-color: #66bb6a;
background-image: linear-gradient(60deg, hsl(122.80000000000001, 38.5%, 39.7%), hsl(122.80000000000001, 38.5%, 56.7%), rgb(178, 221, 195));
background-position: 100% 0;
}
.Button-successColor-0-1-12.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(102, 187, 106, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(102, 187, 106, 0.6);
}
.Button-successColor-0-1-12.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-successColor-0-1-12.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-successColor-0-1-12.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(102, 187, 106, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(102, 187, 106, 0.6);
}
.Button-successColor-0-1-12.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-successColor-0-1-12.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-successColor-0-1-12.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-successColor-0-1-12.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-successColor-0-1-12.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(91, 166, 94);
}
.Button-successColor-0-1-12.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(79, 146, 83);
}
.Button-successColor-0-1-12.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-successColor-0-1-12.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(91, 166, 94);
border-color: rgb(91, 166, 94);
background-color: rgba(102, 187, 106, 0.09999999999999998);
}
.Button-successColor-0-1-12.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):active {
color: rgb(79, 146, 83);
border-color: rgb(79, 146, 83);
background-color: rgba(102, 187, 106, 0.19999999999999996);
}
.Button-successColor-0-1-12.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):hover, .Button-successColor-0-1-12.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):focus {
color: rgb(91, 166, 94);
background-color: rgba(102, 187, 106, 0.09999999999999998);
}
.Button-successColor-0-1-12.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):active {
color: rgb(79, 146, 83);
background-color: rgba(102, 187, 106, 0.19999999999999996);
}
.Button-infoColor-0-1-13.Button-textVariant-0-1-7 {
color: #4dbbe2;
}
.Button-infoColor-0-1-13.Button-outlineVariant-0-1-8 {
color: #4dbbe2;
border-color: #4dbbe2;
}
.Button-infoColor-0-1-13.Button-plainVariant-0-1-6 {
color: white;
background-color: #4dbbe2;
}
.Button-infoColor-0-1-13.Button-gradientVariant-0-1-9 {
color: white;
border-width: 0;
background-size: 200%;
background-color: #4dbbe2;
background-image: linear-gradient(60deg, hsl(195.70000000000005, 72%, 41.6%), hsl(195.70000000000005, 72%, 59.4%), rgb(179, 205, 243));
background-position: 100% 0;
}
.Button-infoColor-0-1-13.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(77, 187, 226, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(77, 187, 226, 0.6);
}
.Button-infoColor-0-1-13.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-infoColor-0-1-13.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-infoColor-0-1-13.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(77, 187, 226, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(77, 187, 226, 0.6);
}
.Button-infoColor-0-1-13.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-infoColor-0-1-13.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-infoColor-0-1-13.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-infoColor-0-1-13.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-infoColor-0-1-13.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(69, 167, 202);
}
.Button-infoColor-0-1-13.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(61, 147, 178);
}
.Button-infoColor-0-1-13.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-infoColor-0-1-13.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(69, 167, 202);
border-color: rgb(69, 167, 202);
background-color: rgba(77, 187, 226, 0.09999999999999998);
}
.Button-infoColor-0-1-13.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):active {
color: rgb(61, 147, 178);
border-color: rgb(61, 147, 178);
background-color: rgba(77, 187, 226, 0.19999999999999996);
}
.Button-infoColor-0-1-13.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):hover, .Button-infoColor-0-1-13.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):focus {
color: rgb(69, 167, 202);
background-color: rgba(77, 187, 226, 0.09999999999999998);
}
.Button-infoColor-0-1-13.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):active {
color: rgb(61, 147, 178);
background-color: rgba(77, 187, 226, 0.19999999999999996);
}
.Button-warningColor-0-1-14.Button-textVariant-0-1-7 {
color: #f6b74d;
}
.Button-warningColor-0-1-14.Button-outlineVariant-0-1-8 {
color: #f6b74d;
border-color: #f6b74d;
}
.Button-warningColor-0-1-14.Button-plainVariant-0-1-6 {
color: rgba(0, 0, 0, 0.8);
background-color: #f6b74d;
}
.Button-warningColor-0-1-14.Button-gradientVariant-0-1-9 {
color: rgba(0, 0, 0, 0.8);
border-width: 0;
background-size: 200%;
background-color: #f6b74d;
background-image: linear-gradient(60deg, hsl(37.60000000000002, 90.4%, 44.3%), hsl(37.60000000000002, 90.4%, 63.3%), rgb(249, 244, 129));
background-position: 100% 0;
}
.Button-warningColor-0-1-14.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(246, 183, 77, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(246, 183, 77, 0.6);
}
.Button-warningColor-0-1-14.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-warningColor-0-1-14.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-warningColor-0-1-14.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(246, 183, 77, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(246, 183, 77, 0.6);
}
.Button-warningColor-0-1-14.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-warningColor-0-1-14.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-warningColor-0-1-14.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-warningColor-0-1-14.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-warningColor-0-1-14.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(222, 165, 70);
}
.Button-warningColor-0-1-14.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(199, 148, 62);
}
.Button-warningColor-0-1-14.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-warningColor-0-1-14.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(222, 165, 70);
border-color: rgb(222, 165, 70);
background-color: rgba(246, 183, 77, 0.09999999999999998);
}
.Button-warningColor-0-1-14.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):active {
color: rgb(199, 148, 62);
border-color: rgb(199, 148, 62);
background-color: rgba(246, 183, 77, 0.19999999999999996);
}
.Button-warningColor-0-1-14.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):hover, .Button-warningColor-0-1-14.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):focus {
color: rgb(222, 165, 70);
background-color: rgba(246, 183, 77, 0.09999999999999998);
}
.Button-warningColor-0-1-14.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):active {
color: rgb(199, 148, 62);
background-color: rgba(246, 183, 77, 0.19999999999999996);
}
.Button-dangerColor-0-1-15.Button-textVariant-0-1-7 {
color: #ed5655;
}
.Button-dangerColor-0-1-15.Button-outlineVariant-0-1-8 {
color: #ed5655;
border-color: #ed5655;
}
.Button-dangerColor-0-1-15.Button-plainVariant-0-1-6 {
color: white;
background-color: #ed5655;
}
.Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9 {
color: white;
border-width: 0;
background-size: 200%;
background-color: #ed5655;
background-image: linear-gradient(60deg, hsl(0.39999999999997726, 80.9%, 44.2%), hsl(0.39999999999997726, 80.9%, 63.1%), rgb(246, 198, 173));
background-position: 100% 0;
}
.Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(237, 86, 85, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(237, 86, 85, 0.6);
}
.Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(237, 86, 85, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(237, 86, 85, 0.6);
}
.Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-dangerColor-0-1-15.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-dangerColor-0-1-15.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-dangerColor-0-1-15.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(207, 75, 74);
}
.Button-dangerColor-0-1-15.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(178, 65, 64);
}
.Button-dangerColor-0-1-15.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-dangerColor-0-1-15.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(207, 75, 74);
border-color: rgb(207, 75, 74);
background-color: rgba(237, 86, 85, 0.09999999999999998);
}
.Button-dangerColor-0-1-15.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):active {
color: rgb(178, 65, 64);
border-color: rgb(178, 65, 64);
background-color: rgba(237, 86, 85, 0.19999999999999996);
}
.Button-dangerColor-0-1-15.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):hover, .Button-dangerColor-0-1-15.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):focus {
color: rgb(207, 75, 74);
background-color: rgba(237, 86, 85, 0.09999999999999998);
}
.Button-dangerColor-0-1-15.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):active {
color: rgb(178, 65, 64);
background-color: rgba(237, 86, 85, 0.19999999999999996);
}
.Button-lightColor-0-1-16.Button-textVariant-0-1-7 {
color: #f0f3f8;
}
.Button-lightColor-0-1-16.Button-outlineVariant-0-1-8 {
color: #f0f3f8;
border-color: #f0f3f8;
}
.Button-lightColor-0-1-16.Button-plainVariant-0-1-6 {
color: rgba(0, 0, 0, 0.8);
background-color: #f0f3f8;
}
.Button-lightColor-0-1-16.Button-gradientVariant-0-1-9 {
color: rgba(0, 0, 0, 0.8);
border-width: 0;
background-size: 200%;
background-color: #f0f3f8;
background-image: linear-gradient(60deg, hsl(217.5, 36.4%, 67%), hsl(217.5, 36.4%, 95.7%), rgb(244, 244, 250));
background-position: 100% 0;
}
.Button-lightColor-0-1-16.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(240, 243, 248, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(240, 243, 248, 0.6);
}
.Button-lightColor-0-1-16.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-lightColor-0-1-16.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-lightColor-0-1-16.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(240, 243, 248, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(240, 243, 248, 0.6);
}
.Button-lightColor-0-1-16.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-lightColor-0-1-16.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-lightColor-0-1-16.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-lightColor-0-1-16.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-lightColor-0-1-16.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(226, 228, 233);
}
.Button-lightColor-0-1-16.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(211, 214, 218);
}
.Button-lightColor-0-1-16.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-lightColor-0-1-16.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(226, 228, 233);
border-color: rgb(226, 228, 233);
background-color: rgba(240, 243, 248, 0.09999999999999998);
}
.Button-lightColor-0-1-16.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):active {
color: rgb(211, 214, 218);
border-color: rgb(211, 214, 218);
background-color: rgba(240, 243, 248, 0.19999999999999996);
}
.Button-lightColor-0-1-16.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):hover, .Button-lightColor-0-1-16.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):focus {
color: rgb(226, 228, 233);
background-color: rgba(240, 243, 248, 0.09999999999999998);
}
.Button-lightColor-0-1-16.Button-textVariant-0-1-7:not(.Button-muted-0-1-20):active {
color: rgb(211, 214, 218);
background-color: rgba(240, 243, 248, 0.19999999999999996);
}
.Button-darkColor-0-1-17.Button-textVariant-0-1-7 {
color: #555555;
}
.Button-darkColor-0-1-17.Button-outlineVariant-0-1-8 {
color: #555555;
border-color: #555555;
}
.Button-darkColor-0-1-17.Button-plainVariant-0-1-6 {
color: white;
background-color: #555555;
}
.Button-darkColor-0-1-17.Button-gradientVariant-0-1-9 {
color: white;
border-width: 0;
background-size: 200%;
background-color: #555555;
background-image: linear-gradient(60deg, hsl(0, 0%, 23.3%), hsl(0, 0%, 33.3%), rgb(196, 196, 196));
background-position: 100% 0;
}
.Button-darkColor-0-1-17.Button-gradientVariant-0-1-9.Button-shadow-0-1-22 {
box-shadow: 0 0.4rem 2rem 0 rgba(85, 85, 85, 0.19999999999999996), 0 0.7rem 1rem -0.5rem rgba(85, 85, 85, 0.6);
}
.Button-darkColor-0-1-17.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:hover, .Button-darkColor-0-1-17.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:focus, .Button-darkColor-0-1-17.Button-gradientVariant-0-1-9.Button-shadow-0-1-22:active {
box-shadow: 0 0.4rem 3rem 0 rgba(85, 85, 85, 0.19999999999999996), 0 0.7rem 2rem -0.5rem rgba(85, 85, 85, 0.6);
}
.Button-darkColor-0-1-17.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):hover, .Button-darkColor-0-1-17.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):focus {
background-position: 50% 0;
}
.Button-darkColor-0-1-17.Button-gradientVariant-0-1-9:not(.Button-muted-0-1-20):active {
background-position: 0 0;
}
.Button-darkColor-0-1-17.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):hover, .Button-darkColor-0-1-17.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):focus {
background-color: rgb(73, 73, 73);
}
.Button-darkColor-0-1-17.Button-plainVariant-0-1-6:not(.Button-muted-0-1-20):active {
background-color: rgb(61, 61, 61);
}
.Button-darkColor-0-1-17.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):hover, .Button-darkColor-0-1-17.Button-outlineVariant-0-1-8:not(.Button-muted-0-1-20):focus {
color: rgb(73, 73, 73);
border-color: rgb(73, 73, 73);
background-color: rgba(85, 85, 85, 0.09999999999999998);