/*buttons*/
input[type=submit], input[type=reset], button, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button, .button, a[role=button] {
  font-weight: var(--vel-typography-text-alt-100-bold-font_weight, var(--vel-typography-text-alt-100-font_weight));
}

input[type=submit], input[type=reset], button, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button, .button, a[role=button] {
  border: 1px solid transparent;
  position: relative;
  display: inline-flex;
  justify-content: center;
  transition: box-shadow 0.1s ease-out 0s, border-color 0.1s ease-out 0s, background-color 0.1s ease-out 0s, color 0.1s ease-out 0s;
  text-align: center;
  text-decoration: none;
  font-size: var(--vel-typography-text-alt-200-bold-font_size, var(--vel-typography-text-alt-200-font_size));
  line-height: var(--vel-typography-text-alt-200-bold-line_height, var(--vel-typography-text-alt-200-line_height));
  font-family: var(--vel-typography-text-alt-200-font_family);
  letter-spacing: var(--vel-typography-text-alt-200-bold-letter_spacing, var(--vel-typography-text-alt-200-letter_spacing));
  border-radius: var(--vel-shape500-border_radius);
  padding-block: calc((40px - var(--vel-typography-text-alt-200-bold-font_size, var(--vel-typography-text-alt-200-font_size)) * var(--vel-typography-text-alt-200-bold-line_height, var(--vel-typography-text-alt-200-line_height))) / 2 - 1px);
  padding-inline: calc(var(--vel-fixed-spacing-04) - 1px);
  color: var(--vel-color-text-on_primary);
  background-color: var(--vel-color-secondary-400);
  cursor: pointer;
  min-height: 40px;
  align-items: center;
  gap: var(--vel-fixed-spacing-02);
  flex-wrap: nowrap;
  white-space: nowrap;
}

input[type=submit].large, input[type=reset].large, button.large, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.large, .button.large, a[role=button].large {
  font-size: var(--vel-typography-text-alt-300-bold-font_size, var(--vel-typography-text-alt-300-font_size));
  line-height: var(--vel-typography-text-alt-300-bold-line_height, var(--vel-typography-text-alt-300-line_height));
  font-family: var(--vel-typography-text-alt-300-font_family);
  letter-spacing: var(--vel-typography-text-alt-300-bold-letter_spacing, var(--vel-typography-text-alt-300-letter_spacing));
  border-radius: var(--vel-shape500-border_radius);
  padding-block: calc((48px - var(--vel-typography-text-alt-300-bold-font_size, var(--vel-typography-text-alt-300-font_size)) * var(--vel-typography-text-alt-300-bold-line_height, var(--vel-typography-text-alt-300-line_height))) / 2 - 1px);
  padding-inline: calc(var(--vel-fixed-spacing-07) - 1px);
  min-height: 48px;
}

input[type=submit].small, input[type=reset].small, button.small, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.small, .button.small, a[role=button].small {
  font-size: var(--vel-typography-text-alt-100-bold-font_size, var(--vel-typography-text-alt-100-font_size));
  line-height: var(--vel-typography-text-alt-100-bold-line_height, var(--vel-typography-text-alt-100-line_height));
  font-family: var(--vel-typography-text-alt-100-font_family);
  letter-spacing: var(--vel-typography-text-alt-100-bold-letter_spacing, var(--vel-typography-text-alt-100-letter_spacing));
  border-radius: var(--vel-shape500-border_radius);
  padding-block: calc((24px - var(--vel-typography-text-alt-100-bold-font_size, var(--vel-typography-text-alt-100-font_size)) * var(--vel-typography-text-alt-100-bold-line_height, var(--vel-typography-text-alt-100-line_height))) / 2 - 1px);
  padding-inline: calc(var(--vel-fixed-spacing-03) - 1px);
  min-height: 24px;
}

input[type=submit].inline, input[type=reset].inline, button.inline, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.inline, .button.inline, a[role=button].inline {
  min-height: 2rem;
  padding-block: unset;
}

input[type=submit][disabled],
input[type=reset][disabled],
button[disabled],
.ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button[disabled], .button[disabled], a[role=button][disabled],
button.outline[disabled], .button.outline[disabled], a[role=button].outline[disabled],
button.secondary[disabled], .button.secondary[disabled], a[role=button].secondary[disabled] {
  color: var(--vel-color-form-text-disabled);
  border-color: transparent;
  background-color: var(--vel-color-form-bg-disabled);
  cursor: default;
}

input[type=submit].secondary, button.secondary, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.secondary, .button.secondary {
  /* min-height: 30px; */
  color: var(--vel-color-text-on_primary);
  background-color: var(--vel-color-primary-400);
  /* width: auto; */
}

.ui-dialog button.ui-dialog-titlebar-close, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.ui-dialog-titlebar-close, input[type=submit].muted, button.muted, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.muted, .button.muted {
  /* min-height: 30px; */
  color: var(--vel-color-form-text-default);
  background-color: transparent;
  border: none;
  /* font-weight: inherit; */
}

input[type=submit].outline, button.outline, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.outline, .button.outline, a[role=button].outline {
  /* min-height: 30px; */
  color: var(--vel-color-form-text-default);
  background-color: transparent;
  border: 1px solid var(--vel-color-secondary-400);
  /* font-weight: inherit; */
}

.ui-dialog button.ui-dialog-titlebar-close:focus,
.ui-dialog button.ui-dialog-titlebar-close:hover, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.ui-dialog-titlebar-close:focus,
.ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.ui-dialog-titlebar-close:hover,
input[type=submit].muted:not([disabled]):hover, button.muted:not([disabled]):hover, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.muted:not([disabled]):hover, .button.muted:not([disabled]):hover,
input[type=submit].muted:focus, button.muted:focus, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.muted:focus, .button.muted:focus {
  color: var(--vel-color-neutral-700);
  border-color: transparent;
  background-color: var(--vel-color-neutral-100);
}

input[type=submit].outline:not([disabled]):hover, button.outline:not([disabled]):hover, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.outline:not([disabled]):hover, .button.outline:not([disabled]):hover, a[role=button].outline:not([disabled]):hover,
input[type=submit].outline:focus, button.outline:focus, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button.outline:focus, .button.outline:focus, a[role=button].outline:focus {
  color: var(--vel-color-secondary-400);
  border-color: var(--vel-color-secondary-300);
  background-color: var(--vel-color-secondary-50);
  box-shadow: 0 0 0 1px var(--vel-color-secondary-300) inset, var(--vel-elevation200-box_shadow);
}

input[type=submit]:not([disabled]):hover, input[type=reset]:not([disabled]):hover, button:not([disabled]):hover, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button:not([disabled]):hover, .button:not([disabled]):hover, a[role=button]:not([disabled]):hover,
input[type=submit]:focus, input[type=reset]:focus, button:focus, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button:focus, .button:focus, a[role=button]:focus {
  color: var(--vel-color-text-on_secondary);
  border-color: transparent;
  background-color: var(--vel-color-secondary-300);
  box-shadow: var(--vel-elevation200-box_shadow);
}

input[type=submit].secondary:not([disabled]):hover, input[type=submit].secondary:focus, .button.secondary:not([disabled]):hover, .button.secondary:focus {
  color: var(--vel-color-text-on_primary);
  border-color: transparent;
  background-color: var(--vel-color-primary-500);
  box-shadow: var(--vel-elevation200-box_shadow);
}

input[type=submit].secondary {
  color: var(--vel-color-text-on_primary);
  background-color: var(--vel-color-primary-400);
}

input[type=submit].tertiary:not([disabled]):hover, input[type=reset]:not([disabled]):hover,
input[type=submit].tertiary:focus, input[type=reset]:focus {
  color: var(--vel-color-text-on_brand_support1);
  border-color: transparent;
  background-color: var(--vel-color-brand-support1-500);
  box-shadow: var(--vel-elevation200-box_shadow);
}

input[type=submit].tertiary, input[type=reset] {
  color: var(--vel-color-text-on_brand_support1);
  background-color: var(--vel-color-brand-support1-400);
}

button > svg, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button > svg, .button > svg {
  display: block;
  height: 1.5em;
}

a[role=button]:hover {
  text-decoration: none;
}

button .fa.fa-chevron-right, .ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button .fa.fa-chevron-right,
button br,
.ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button br {
  display: none;
}

.ui-dialog > div.ui-dialog-buttonpane > div.ui-dialog-buttonset > button,
.command-row > button {
  font-size: var(--vel-typography-text-alt-300-bold-font_size, var(--vel-typography-text-alt-300-font_size));
  line-height: var(--vel-typography-text-alt-300-bold-line_height, var(--vel-typography-text-alt-300-line_height));
  font-family: var(--vel-typography-text-alt-300-font_family);
  letter-spacing: var(--vel-typography-text-alt-300-bold-letter_spacing, var(--vel-typography-text-alt-300-letter_spacing));
  border-radius: var(--vel-shape500-border_radius);
  padding-block: calc((48px - var(--vel-typography-text-alt-300-bold-font_size, var(--vel-typography-text-alt-300-font_size)) * var(--vel-typography-text-alt-300-bold-line_height, var(--vel-typography-text-alt-300-line_height))) / 2 - 1px);
  padding-inline: calc(var(--vel-fixed-spacing-07) - 1px);
  min-height: 48px;
}