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

.btn                                            { margin:0; padding:14px 18px; color:var(--color-brand); fill:currentColor; background-color:transparent; border:0; font-family:inherit; font-size:1.4rem; font-weight:bold; line-height:initial; letter-spacing:.5px; min-height:40px; display:inline-flex; gap:8px; flex-direction:row; align-items:center; vertical-align:middle; justify-content:center; text-align:center; text-decoration:none; width:auto; flex-wrap:nowrap; position:relative; top:0; left:0; cursor:pointer; border:none; border-radius:30px; box-shadow:inset 0px 0px 0px 1px var(--color-brand); 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-brand); color:var(--color-snow); 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-brand100); color:var(--color-snow); cursor:not-allowed; }
.btn .icon                                      { top:initial; }

/***** Sizes *****/
.btn--xs                                        { min-height:10px; font-size:0.7rem; }
.btn--s                                         { padding:8px; min-height:16px; font-size:1.2rem; line-height:1.6rem; }
.btn--m                                         { font-size:1em; }
.btn--l                                         { min-height:60px; font-size:1.6rem; }
.btn--xl                                        { font-size:1.5em; }

.btn--width-100                                 { width:100%; }
.btn--width-50                                  { width:50%; }

/***** Alignment *****/
.btn--onRight                                   { margin-left:12px; }
.btn--onLeft                                    { margin-right:12px; }
.btn--positionTopRight                          { position:absolute; top:20px; right:20px; left:auto; }

/***** Hero *****/
.btn--hero                                      { padding:26px 26px 22px 26px; font-family:eagle; font-size:1.6rem; border-radius:40px; }

.btn--brand                                     { background-color:var(--color-brand); color:var(--color-snow); }
.btn--brand:hover                               { background-color:var(--color-brand300); }

/***** Christmas *****/
.btn--red                              			{ color:var(--color-snow); background-color:var(--color-christmasRed); box-shadow:inset 0px 0px 0px 1px var(--color-christmasRed); }
.btn--red:hover                        			{ background-color:var(--color-snow); color:var(--color-brand); }

.btn--green                            			{ color:var(--color-snow); background-color:var(--color-christmasGreen); box-shadow:inset 0px 0px 0px 1px var(--color-christmasGreen); }
.btn--green:hover                      			{ background-color:var(--color-snow); color:var(--color-brand); }


/***** Ghost - Snow *****/
.btn--ghostSnow                                 { background-color:transparent; color:var(--color-snow); box-shadow:inset 0px 0px 0px 1px var(--color-snow); }
.btn--ghostSnow:hover                           { background-color:var(--color-snow); color:var(--color-brand); box-shadow:inset 0px 0px 0px 1px transparent; }
.btn--ghostSnow:disabled,
.btn--ghostSnow:disabled:hover                  { background-color:transparent; color:var(--color-gray300); box-shadow:inset 0px 0px 0px 1px var(--color-gray300); }

/***** Snow *****/
.btn--snow                                      { background-color:var(--color-snow); color:var(--color-brand); box-shadow:inset 0px 0px 0px 1px var(--color-snow); }
.btn--snow:hover                                { background-color:var(--color-brand); color:var(--color-snow); box-shadow:inset 0px 0px 0px 1px var(--color-brand); }
.btn--snow:disabled,
.btn--snow:disabled:hover                       { background-color:var(--color-snow); color:var(--color-gray300); box-shadow:inset 0px 0px 0px 1px var(--color-snow); }

.btn--hoverSnow:hover                           { background-color:var(--color-snow); color:var(--color-gray500); }

/***** 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); }

/***********************************************
Tablet - This applies from 768px onwards
***********************************************/
@media (min-width:1200px)                       {

}