/*
* Amazium (http://www.amazium.co.uk)
* Copyright 2010 - 2019, Mike Ballan
* Licensed under MIT (https://github.com/OwlyStuff/Amazium/blob/master/LICENSE)
*/

/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Font-face setup
- Fonts overrides
- Navigation
- Color examples setup
- Media Queries
*/

/***********************************************
Mobile First - This applies from 0px to 749px
***********************************************/

/***** Button Reset *****/
button[aria-disabled=true]                      { cursor:inherit; }
input::-moz-focus-inner,
button::-moz-focus-inner                        { border:0; padding:0; }

.btn                                            { margin:0; padding:8px 16px; color:var(--color-snow); fill:currentColor; background-color:var(--color-brand500); border:0; font-size:1.4rem; font-weight:700; letter-spacing:2px; line-height:initial; min-height:40px; display:inline-flex; gap:8px; flex-direction:row; align-items:center; vertical-align:middle; justify-content:center; text-align:left; text-decoration:none; width:auto; flex-wrap:nowrap; position:relative; top:0; left:0; cursor:pointer; border:none; border-radius:0 var(--radius) var(--radius) var(--radius); overflow:visible; -webkit-appearance:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; transition:background 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s, color 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s; }
.btn:hover                                      { background-color:var(--color-info800); transition:background 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s, color 0.2s cubic-bezier(0.33, 0, 0.2, 1) 0s; }
.btn:disabled,
.btn:disabled:hover                             { background-color:var(--color-mist); color:var(--color-gray300); cursor:not-allowed; }
.btn .icon                                      { top:initial; }

/***** Sizes *****/
.btn--hero                                      { padding:20px 30px; font-size:1.8rem; line-height:2rem; border-radius:0 60px 60px 60px; }

/***** Ghost *****/
.btn--ghost                                     { background-color:transparent; color:var(--color-gray500); box-shadow:inset 0px 0px 0px 1px var(--color-gray300); }
.btn--ghost:hover                               { background-color:var(--color-info500); color:var(--color-snow); box-shadow:inset 0px 0px 0px 1px transparent; }
.btn--ghost:disabled,
.btn--ghost:disabled:hover                      { background-color:var(--color-haze); color:var(--color-gray300); box-shadow:inset 0px 0px 0px 1px var(--color-mist); }
.btn--ghost.btn--hoversnow:hover                { background-color:var(--color-negative500); }

/***** Snow *****/
.btn--snow                                      { background-color:var(--color-snow); color:var(--color-gray500); }
.btn--snow:hover                                { background-color:var(--color-info500); color:var(--color-snow); }
.btn--snow:disabled,
.btn--snow:disabled:hover                       { background-color:var(--color-snow); color:var(--color-gray300); }
.btn--hoverSnow:hover                           { background-color:var(--color-snow); color:var(--color-gray500); }

/***** Cream *****/
a.btn--cream                                     { background-color:var(--color-cream800); color:var(--color-black); }

/***** None *****/
.btn--none,
.btn--none:hover,
.btn--none:disabled,
.btn--none:disabled:hover                       { padding:0; background-color:transparent; font-size:inherit; color:var(--color-gray500); border-radius:0; min-height:20px; }
.btn--none:hover                                { color:var(--color-black); }

/***** Link *****/
.btn--link,
.btn--link:hover,
.btn--link:disabled,
.btn--link:disabled:hover                       { padding:0; font-size:revert; line-height:inherit; min-height:auto; background-color:transparent; color:var(--color-info500); border-radius:0; border:none; }
.btn--link:hover                                { text-decoration:underline; }