/* Button Variant Styles
 *
 * All button styling including 19 variants, hover states, and visual effects.
 * Buttons use CSS custom properties for colors defined in 1-variables.css.
 *
 * Variant system: button_variant_1 through button_variant_19
 * Each variant has unique styling for borders, backgrounds, hover effects, and animations.
 *
 * Color properties used:
 * - --button-color-preset-color
 * - --button-color-preset-background-color
 * - --button-color-preset-background-hover-color
 * - --button-color-preset-border-color
 * - --button-color-preset-hover-color
 */

/* Button Variant Styles */
div[data-variant=button_variant_1],div[data-variant=button_variant_2],div[data-variant=button_variant_3],div[data-variant=button_variant_4],div[data-variant=button_variant_5],div[data-variant=button_variant_6],div[data-variant=button_variant_7],div[data-variant=button_variant_8],div[data-variant=button_variant_9],div[data-variant=button_variant_10],div[data-variant=button_variant_11],div[data-variant=button_variant_12],div[data-variant=button_variant_13],div[data-variant=button_variant_14],div[data-variant=button_variant_15],div[data-variant=button_variant_16],div[data-variant=button_variant_17],div[data-variant=button_variant_18],div[data-variant=button_variant_19]{min-width:50px;border:1.5px solid;border-color:var(--button-color-preset-border-color)!important;padding:10px 20px!important;margin:5px!important;background-color:var(--button-color-preset-background-color)!important;color:var(--button-color-preset-color)!important;transition:background-color .3s cubic-bezier(.25,1,.5,1)}
div[data-variant=button_variant_1]:hover,div[data-variant=button_variant_2]:hover,div[data-variant=button_variant_3]:hover,div[data-variant=button_variant_4]:hover,div[data-variant=button_variant_5]:hover,div[data-variant=button_variant_6]:hover,div[data-variant=button_variant_7]:hover,div[data-variant=button_variant_8]:hover,div[data-variant=button_variant_9]:hover,div[data-variant=button_variant_10]:hover,div[data-variant=button_variant_11]:hover,div[data-variant=button_variant_12]:hover,div[data-variant=button_variant_13]:hover,div[data-variant=button_variant_14]:hover,div[data-variant=button_variant_15]:hover,div[data-variant=button_variant_16]:hover,div[data-variant=button_variant_17]:hover,div[data-variant=button_variant_18]:hover,div[data-variant=button_variant_19]:hover{background-color:var(--button-color-preset-background-hover-color)!important;color:var(--button-color-preset-hover-color)!important}
div[data-variant=button_variant_2]{border-color:transparent!important;box-shadow:-1px 3px 5px #0000000a}
div[data-variant=button_variant_3]:hover,div[data-variant=button_variant_3]{border-color:transparent!important;background-color:transparent!important}
div[data-variant=button_variant_4]{border-width:2px!important;border-color:var(--button-color-preset-border-color)!important;background-color:transparent!important}
div[data-variant=button_variant_4]:hover:after{height:100%}
div[data-variant=button_variant_5]{border-color:transparent!important;box-shadow:-1px 3px 5px #0000000a;position:relative;transition:all .3s cubic-bezier(.25,1,.5,1)}
div[data-variant=button_variant_5]:hover{background-color:transparent!important}
div[data-variant=button_variant_5]:after{content:"";display:block;bottom:0;height:0%;left:0;width:100%;position:absolute;background-color:var(--button-color-preset-background-hover-color)!important;transition:all .3s cubic-bezier(.25,1,.5,1);z-index:-1}
div[data-variant=button_variant_5]:hover:after{height:100%}
div[data-variant=button_variant_6]{border-radius:6px}
div[data-variant=button_variant_7]{background-color:transparent!important;border-color:transparent!important}
div[data-variant=button_variant_7]:after{content:"";width:0px;position:relative;bottom:0;height:2px;transform:translateY(6px);background-color:var(--button-color-preset-hover-color);display:block;transition:width .3s cubic-bezier(.25,1,.5,1)}
div[data-variant=button_variant_7]:hover:after{width:100%}
div[data-variant=button_variant_8]{border-radius:50px}
div[data-variant=button_variant_9]{border-radius:50px;margin:5px!important;background-color:transparent!important;transition:all .3s cubic-bezier(.25,1,.5,1)}
div[data-variant=button_variant_9]:hover{border-radius:50px;margin:5px!important;background-color:var(--button-color-preset-background-hover-color)!important;color:var(--button-color-preset-hover-color)!important;transition:all .3s cubic-bezier(.25,1,.5,1)}
div[data-variant=button_variant_10]{border:2px solid;border-color:var(--button-color-preset-border-color)!important;border-radius:100px!important;width:50px!important;height:50px!important;padding:0!important;font-size:12px!important;background-color:var(--button-color-preset-background-color)!important;margin:5px!important;text-align:center!important;color:var(--button-color-preset-color)!important;display:flex!important;align-items:center;justify-content:center}
div[data-variant=button_variant_11]{border-radius:50px}
div[data-variant=button_variant_12],div[data-variant=button_variant_13]{background-color:var(--button-color-preset-background-color)!important;position:relative;font-family:Open Sans,sans-serif;font-size:12px;text-decoration:none;color:var(--button-color-preset-color)!important;border:solid 1px var(--button-color-preset-border-color)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,rgb(0 0 0 / 29%)),color-stop(1,rgb(255 255 255 / 28%)));box-shadow:inset 0 1px #fdfdfda3,0 1px #ffffff3b;border-radius:5px;min-width:50px;padding:10px 20px!important}