/* // BUTTONS // */
.button
{
    --padding-rate: 1;
    --foreground: var(--button-color, #222);
    --background: var(--button-background, #fff);
    --resize-rate: 1; 
    --weight: var(--f-medium);
    
    --font-size: calc(var(--base-size) * var(--resize-rate));
    
    --_v-pad: calc((var(--font-size) * var(--padding-rate)) - (var(--font-size) * .5));
    --_h-pad: calc(var(--font-size) * var(--padding-rate) * 2);

    width: max-content;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: var(--adjusted-font-size);
    font-weight: var(--weight);
    text-align: center;
    padding-top: var(--_v-pad);
    padding-bottom: calc(var(--_v-pad) + (var(--font-size) * var(--fm-bound-correction)));
    padding-left: var(--_h-pad);
    padding-right: var(--_h-pad);
    height: calc(var(--font-size) + ((var(--font-size) * var(--padding-rate)) * 2));
    box-sizing: border-box;
    overflow: hidden;
    cursor: pointer;
    transition: all .4s var(--base-easing);
    z-index: 0;
}

.button.negative
{
    --background: var(--button-color, #222);
    --foreground: var(--button-background, #fff);
}

.button::before,
.button::after
{
    content: '';
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    box-sizing: border-box;
    border-radius: inherit;
    transition: inherit;
}
.button::before
{
    background-color: var(--background);
    opacity: 0;
}

/* -- LINE -- */
.button.line
{
    color: var(--background);
}

.button.line::before
{
    opacity: 0;
}

.button.line::after
{
    border: 1px solid var(--background);
}

.button.line:hover,
.button.line:focus,
.button.line:focus-within
{
    color: var(--foreground);
}

.button.button.line:hover::before,
.button.button.line:focus::before,
.button.button.line:focus-within::before
{
    opacity: 1;
}

/* -- FILL -- */
.button.fill
{
    color: var(--foreground);
}

.button.fill::before
{
    opacity: 1;
}

/* -- FILL TO DARK / TO LIGHT -- */

.button.fill.dark:hover::before,
.button.fill.dark:focus::before,
.button.fill.dark:focus-within::before
{
    filter: brightness(.75);
}

.button.fill.light:hover::before,
.button.fill.light:focus::before,
.button.fill.light:focus-within::before
{
    filter: brightness(1.25);
}


/* -- FILL INVERT -- */
.button.fill.invert:hover,
.button.fill.invert:focus,
.button.fill.invert:focus-within
{
    color: var(--background);
}

.button.fill.invert:hover::before,
.button.fill.invert:focus::before,
.button.fill.invert:focus-within::before
{
    background-color: var(--foreground);
}

/* -- FILL TRANSPARENT -- */
.button.fill.transparent
{
    color: var(--foreground);
}

.button.fill.transparent.dark,
.button.fill.transparent.light
{
    background-color: none;
}

.button.fill.transparent::before
{
    opacity: 0;
}

.button.fill.transparent:hover,
.button.fill.transparent:focus,
.button.fill.transparent:focus-within
{
    color: var(--shading);
}

.button.fill.transparent:hover::before,
.button.fill.transparent:focus::before,
.button.fill.transparent:focus-within::before
{
    opacity: 1;
}

/* -- TYPES -- */
.button.close,
.button.directional
{
    --fm-size-ratio: 1;
    --size: calc(var(--font-size) * 2);
    padding: 0;
    width: var(--size);
    height: var(--size);
}

.button.close::after,
.button.directional::after
{
    font-family: var(--vg-ns);
    font-weight: normal;
    position: relative;
    justify-content: center;
    align-items: center;
    padding: 0;
}

.button.close::after
{
    content: '\e0b8';
}

.button.directional.prev::after
{
    content: '\24';
    margin-left: -4px;
}

.button.directional.next::after
{
    content: '\25';
    margin-left: 4px;
}

/* -- ICONS -- */

.button > i[class^='esl'],
.button > i[class^='icon']
{
    display: block;
    line-height: 0;
    align-self: center;
    margin: calc(var(--font-size) * -.5) 0;
    margin-bottom: calc((var(--font-size) * -.5) - (var(--font-size) * var(--fm-bound-correction)));
}


.button > i[class^='esl']::before,
.button > i[class^='icon']::before
{
    font-size: var(--font-size);
    line-height: var(--base-size);
}

.button > i[class^='icon']:last-child
{
    margin-left: var(--base-size);
}

.button > i[class^='icon']:first-child
{
    margin-right: var(--base-size);
}

.button > i[class^='icon']:last-child:first-child
{
    margin-left: 0;
    margin-right: 0;
}


.button[style ^= '--icon:']::after,
.button[style *= ' --icon:']::after,
.button[data-icon]::after
{
    --font-size-ratio: var(--vg-ns-size-ratio);
    font-size: var(--font-size);
    font-family: var(--vg-ns);
    font-weight: normal;
    padding-right: var(--font-size);
    padding-left: var(--font-size);
}

.button[data-icon]::after
{
    content: attr(data-icon); /* Character Model: &#x.... */
}

.button[style ^= '--icon:']::after,
.button[style *= ' --icon:']::after
{
    content: var(--icon); /* Character Moddel: \... */
}

.button[style ^= '--icon:'],
.button[style *= ' --icon:'],
.button[data-icon]
{
    padding-left: calc(var(--font-size) * 2.5);
}

.button[data-icon].right,
.button[style ^= '--icon:'].right,
.button[style *= ' --icon:'].right
{
    padding-left: var(--font-size);
    padding-right: calc(var(--font-size) * 2.5);
}

.button[data-icon].right::after,
.button[style ^= '--icon:'].right::after,
.button[style *= ' --icon:'].right::after
{
    justify-content: right;
}

/* -- MODIFICATIONS -- */
.button.rounded
{
    border-radius: calc(var(--font-size) * .5);
}

.button.round
{
    border-radius: 200px;
}

.button.small
{
    --resize-rate: .75;
}

.button.center
{
    margin-left: auto;
    margin-right: auto;
}

.button.align-right
{
    margin-left: auto;
}

.button.large
{
    --resize-rate: 1.25;
}

.button.x-large
{
    --resize-rate: 1.75;
}

.button.xx-large
{
    --resize-rate: 2.5;
}

.button.narrow
{
    --padding-rate: .5;
}

.button.double-gap
{
    --padding-rate: 2;
}


/* // SIMPLE LINK // */
.simple-link
{
    color: var(--link-color);
    transition: color .3s linear;
}

.simple-link:hover,
.simple-link:focus-within
{
    color: var(--link-highlight);
}

.button.whatsapp
{
    --resize-rate: 2.5;
    --padding-rate: .5;
    --background: #25D366;
    --foreground: #fff;
    --font-size: calc(var(--base-size) * var(--resize-rate));
    height: auto;
    padding: calc(var(--font-size) * var(--padding-rate));
    border-radius: calc(var(--font-size) * 2);
}

.button.whatsapp > i
{
    display: block;
    margin: 0;
}

.button.whatsapp > i::before
{
    font-size: var(--font-size);
    line-height: var(--font-size);
    aspect-ratio: 1;
    display: block;
    color: var(--foreground);
    margin: 0;
}