.VLButton
{
 --button-font-size:0.65rem;
 --button-background:var(--white);
 --button-background-hover:var(--white);
 --button-color:var(--grey7);
 --button-color-hover:var(--blue4);
 --button-color-active:var(--blue4);
 --button-color-active-on:var(--blue4-on);
 --button-color-inactive:var(--grey8);
 --button-disabled:var(--grey5);
 --button-border-width:1px;
 --button-border-style:solid;
 --button-border-color:var(--button-color);
 --button-border-color-hover:var(--button-color-hover);
 --button-border-radius:var(--UI-small-border-radius);
 --button-padding:0.5em 1em;
 --button-margin:0 0.5em;
 --button-text-align:center;
 background-color:var(--button-background);
 color:var(--button-color);
 cursor:pointer;
 display:inline-block;
 border:var(--button-border-width) var(--button-border-style) var(--button-border-color);
 border-radius:var(--button-border-radius);
 padding:var(--button-padding);
 margin:var(--button-margin);
 text-decoration:none;
 font-size:var(--button-font-size);
 line-height:1;
 text-align:var(--button-text-align)
}

a.VLButton
{
 text-decoration:none
}

.VLButton:not([disabled]):hover
{
 color:var(--button-color-hover);
 background-color:var(--button-background-hover);
 border-color:var(--button-border-color-hover);
}

.VLButton-link
{
 --button-border-width:0;
 --button-border-color:transparent;
 --button-color:var(--link);
 --button-color-hover:var(--link-hover);
 --button-background:transparent;
 --button-background-hover:transparent;
 --button-padding:0;
 --button-margin:0;
 --button-text-align:left
}

.VLButton-link.VLButton-bracket::before
{
 content:'[ '
}

.VLButton-link.VLButton-bracket::after
{
 content:' ]'
}

.VLButton-destructive
{
 --button-color:var(--link-destructive);
 --button-color-hover:var(--link-destructive-hover)
}

.VLButton[disabled]
{
 --button-color:var(--button-disabled);
 --button-color-hover:var(--button-disabled);
 cursor:default
}

.VLButton:not([disabled])[aria-pressed=true]
{
 --button-color:var(--button-color-active)
}

.VLButton-link:not([disabled]):hover
{
 text-decoration:underline
}

.VLButton-big
{
 --button-font-size:1.25rem;
 --button-padding:1em 2em
}

.VLButton-small
{
 --button-padding:0.25em 0.5em
}

.VLButton > svg
{
 vertical-align:middle
}

.VLButton.VLIcon
{
 --button-font-size:0.85rem;
 --button-background:transparent;
 --button-border-color:transparent
}