/* ====================================================== color-primary [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-primary-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-grey [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-error [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-warning [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-success [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-information [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-mortgage [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-mortgage-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-investments [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-investments-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-credit-cards [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-credit-cards-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-student [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-student-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-savings [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-savings-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking-purple [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-accent-checking-purple-text [COLOR_STEP_TOKENS] ====================================================== */ /* ====================================================== color-icon [COLOR_TOKEN] ====================================================== */ /* ====================================================== type-header-1 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-header-2 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-header-3 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-paragraph-1 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-paragraph-2 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-paragraph-3 [TEXT_TOKEN] ====================================================== */ /* ====================================================== type-text [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== type-text-semibold [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== type-text-bold [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== type-text-uppercase [TEXT_STEP_TOKENS] ====================================================== */ /* ====================================================== effect-shadow [EFFECT_TOKEN] ====================================================== */ /* ====================================================== effect-shadow-dark [EFFECT_TOKEN] ====================================================== */ /* ====================================================== effect-focus [EFFECT_TOKEN] ====================================================== */ /* ====================================================== icon-edit [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-pin-verification [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-show-password [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-placeholder [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-summit-central-logo [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-dashboard [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-member-banking [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-search [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-profile [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-insights [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-comment [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-accounts [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-appointment [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-relationship [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-deposit [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-withdrawl [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-transfer [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-correct [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-radio [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-radio-selected [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-checkbox [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== icon-checkbox-selected [ICON_STEPPED_TOKEN] ====================================================== */ /* ====================================================== graphic-scu-logo [GRAPHIC_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-primary-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-outline-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-grey-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-button-link-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-default-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-hover-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-focus-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-disabled-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-primary-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-default-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-hover-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-focus [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-focus-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-focus-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-disabled [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-disabled-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-icon-button-outline-disabled-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-default-line-top [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-default-line-bottom [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-default-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-hover-line-top [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-hover-line-bottom [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-hover-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-focused [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-focused-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-focused-line-top [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-focused-line-bottom [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-focused-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-line-top [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-line-bottom [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-hover [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-hover-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-hover-line-top [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-hover-line-bottom [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-v-selected-hover-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-h-icon [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-h-icon-icon-box [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-h-icon-icon-box-i-c-o-n-24 [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-h-icon-icon-box-notification [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-h-icon-icon-box-notification-number [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-h-icon-comments [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-nav-item-h-icon-select [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-beta-scu-button-2 [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-beta-scu-button-2-scu-button-2-background [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-beta-scu-button-2-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-field [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-field-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-field-default-input [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-field-default-placeholder [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-field-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-field-error-input [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-field-error-placeholder [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-error-error [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-label [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-text-scu-input-label-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-error-error [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-field [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-field-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-field-default-input [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-field-default-placeholder [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-field-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-field-error-input [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-textarea-scu-input-field-error-placeholder [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-default-scu-input-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-default-scu-input-error-error [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-default-i-c-o-n-16 [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-selected-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-selected-scu-input-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-selected-scu-input-error-error [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-radio-selected-i-c-o-n-16 [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-default [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-default-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-default-scu-input-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-default-scu-input-error-error [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-default-i-c-o-n-16 [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-selected [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-selected-label [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-selected-scu-input-error [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-selected-scu-input-error-error [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-input-checkbox-selected-i-c-o-n-16 [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-member-profile [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-member-profile-member-picture [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-member-profile-member-picture-screen-shot-2020-10-16-at-12-38-1 [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-member-profile-label-box [COMPONENT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-member-profile-label-box-member-name [TEXT_TOKEN] ====================================================== */ /* ====================================================== comp-scu-member-profile-label-box-member-since [TEXT_TOKEN] ====================================================== */ /* ====================================================== flex [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-fill [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-fill-container [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-align-self [FLEX_TOKENS] ====================================================== */ /* ====================================================== flex-space [FLEX_TOKENS] ====================================================== */ /* ====================================================== spacing [SPACING_TOKENS] ====================================================== */ /* ====================================================== col [COLUMN_TOKENS] ====================================================== */ /* ====================================================== colvw [COLUMN_TOKENS] ====================================================== */ :host { display: inline-block; } .comp-scu-button { outline: none; cursor: pointer; user-select: none; display: flex; -ms-flex-direction: var(--flex-center-ms-flex-direction, row); -ms-flex-pack: var(--flex-center-ms-flex-pack, center); -ms-flex-align: var(--flex-center-ms-flex-align, center); flex-flow: var(--flex-center-flex-flow, row nowrap); justify-content: var(--flex-center-justify-content, center); align-items: var(--flex-center-align-items, center); } .comp-scu-button.disabled { cursor: auto; } .comp-scu-button.primary { position: relative; background-color: var(--comp-scu-button-primary-default-background-color, #63a60a); border-radius: var(--comp-scu-button-primary-default-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-primary-default-padding-left, 24px); padding-right: var(--comp-scu-button-primary-default-padding-right, 24px); padding-top: var(--comp-scu-button-primary-default-padding-top, 11px); padding-bottom: var(--comp-scu-button-primary-default-padding-bottom, 11px); } .comp-scu-button.primary > *:not(:last-child) { margin-right: var(--comp-scu-button-primary-default-item-spacing, 0px); } .comp-scu-button.primary .label { position: relative; font-size: var(--comp-scu-button-primary-default-label-font-size, 16px); text-align: var(--comp-scu-button-primary-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-primary-default-label-color, white); font-family: var(--comp-scu-button-primary-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-primary-default-label-font-weight, 700); line-height: var(--comp-scu-button-primary-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-primary-default-label-letter-spacing, 0px); } .comp-scu-button.primary:hover { position: relative; background-color: var(--comp-scu-button-primary-hover-background-color, #2a4901); border-radius: var(--comp-scu-button-primary-hover-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-primary-hover-padding-left, 24px); padding-right: var(--comp-scu-button-primary-hover-padding-right, 24px); padding-top: var(--comp-scu-button-primary-hover-padding-top, 11px); padding-bottom: var(--comp-scu-button-primary-hover-padding-bottom, 11px); } .comp-scu-button.primary:hover > *:not(:last-child) { margin-right: var(--comp-scu-button-primary-hover-item-spacing, 0px); } .comp-scu-button.primary:hover .label { position: relative; font-size: var(--comp-scu-button-primary-hover-label-font-size, 16px); text-align: var(--comp-scu-button-primary-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-primary-hover-label-color, white); font-family: var(--comp-scu-button-primary-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-primary-hover-label-font-weight, 700); line-height: var(--comp-scu-button-primary-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-primary-hover-label-letter-spacing, 0px); } .comp-scu-button.primary:focus { position: relative; background-color: var(--comp-scu-button-primary-focus-background-color, #7eb633); border-radius: var(--comp-scu-button-primary-focus-corner-radius, 200px); box-shadow: var(--comp-scu-button-primary-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-primary-focus-padding-left, 24px); padding-right: var(--comp-scu-button-primary-focus-padding-right, 24px); padding-top: var(--comp-scu-button-primary-focus-padding-top, 11px); padding-bottom: var(--comp-scu-button-primary-focus-padding-bottom, 11px); } .comp-scu-button.primary:focus > *:not(:last-child) { margin-right: var(--comp-scu-button-primary-focus-item-spacing, 0px); } .comp-scu-button.primary:focus .label { position: relative; font-size: var(--comp-scu-button-primary-focus-label-font-size, 16px); text-align: var(--comp-scu-button-primary-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-primary-focus-label-color, white); font-family: var(--comp-scu-button-primary-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-primary-focus-label-font-weight, 700); line-height: var(--comp-scu-button-primary-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-primary-focus-label-letter-spacing, 0px); } .comp-scu-button.primary.disabled { position: relative; background-color: var(--comp-scu-button-primary-disabled-background-color, #7eb633); border-radius: var(--comp-scu-button-primary-disabled-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-primary-disabled-padding-left, 24px); padding-right: var(--comp-scu-button-primary-disabled-padding-right, 24px); padding-top: var(--comp-scu-button-primary-disabled-padding-top, 11px); padding-bottom: var(--comp-scu-button-primary-disabled-padding-bottom, 11px); } .comp-scu-button.primary.disabled > *:not(:last-child) { margin-right: var(--comp-scu-button-primary-disabled-item-spacing, 0px); } .comp-scu-button.primary.disabled .label { position: relative; font-size: var(--comp-scu-button-primary-disabled-label-font-size, 16px); text-align: var(--comp-scu-button-primary-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-primary-disabled-label-color, #b4d885); font-family: var(--comp-scu-button-primary-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-primary-disabled-label-font-weight, 700); line-height: var(--comp-scu-button-primary-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-primary-disabled-label-letter-spacing, 0px); } :host { display: inline-block; } .comp-scu-button.outline { position: relative; background-color: var(--comp-scu-button-outline-default-background-color, white); border-radius: var(--comp-scu-button-outline-default-corner-radius, 200px); border-width: var(--comp-scu-button-outline-default-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-default-stroke-color, #63a60a); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-default-padding-left, 24px); padding-right: var(--comp-scu-button-outline-default-padding-right, 24px); padding-top: var(--comp-scu-button-outline-default-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-default-padding-bottom, 11px); } .comp-scu-button.outline > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-default-item-spacing, 0px); } .comp-scu-button.outline .label { position: relative; font-size: var(--comp-scu-button-outline-default-label-font-size, 16px); text-align: var(--comp-scu-button-outline-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-default-label-color, #3a6303); font-family: var(--comp-scu-button-outline-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-default-label-font-weight, 400); line-height: var(--comp-scu-button-outline-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-default-label-letter-spacing, 0px); } .comp-scu-button.outline:hover { position: relative; background-color: var(--comp-scu-button-outline-hover-background-color, #fbfff6); border-radius: var(--comp-scu-button-outline-hover-corner-radius, 200px); border-width: var(--comp-scu-button-outline-hover-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-hover-stroke-color, #63a60a); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-hover-padding-left, 24px); padding-right: var(--comp-scu-button-outline-hover-padding-right, 24px); padding-top: var(--comp-scu-button-outline-hover-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-hover-padding-bottom, 11px); } .comp-scu-button.outline:hover > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-hover-item-spacing, 0px); } .comp-scu-button.outline:hover .label { position: relative; font-size: var(--comp-scu-button-outline-hover-label-font-size, 16px); text-align: var(--comp-scu-button-outline-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-hover-label-color, #3a6303); font-family: var(--comp-scu-button-outline-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-hover-label-font-weight, 400); line-height: var(--comp-scu-button-outline-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-hover-label-letter-spacing, 0px); } .comp-scu-button.outline:focus { position: relative; background-color: var(--comp-scu-button-outline-focus-background-color, white); border-radius: var(--comp-scu-button-outline-focus-corner-radius, 200px); border-width: var(--comp-scu-button-outline-focus-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-focus-stroke-color, #63a60a); box-shadow: var(--comp-scu-button-outline-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-focus-padding-left, 24px); padding-right: var(--comp-scu-button-outline-focus-padding-right, 24px); padding-top: var(--comp-scu-button-outline-focus-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-focus-padding-bottom, 11px); } .comp-scu-button.outline:focus > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-focus-item-spacing, 0px); } .comp-scu-button.outline:focus .label { position: relative; font-size: var(--comp-scu-button-outline-focus-label-font-size, 16px); text-align: var(--comp-scu-button-outline-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-focus-label-color, #3a6303); font-family: var(--comp-scu-button-outline-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-focus-label-font-weight, 400); line-height: var(--comp-scu-button-outline-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-focus-label-letter-spacing, 0px); } .comp-scu-button.outline.disabled { position: relative; background-color: var(--comp-scu-button-outline-disabled-background-color, white); border-radius: var(--comp-scu-button-outline-disabled-corner-radius, 200px); border-width: var(--comp-scu-button-outline-disabled-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-disabled-stroke-color, #bbda92); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-disabled-padding-left, 24px); padding-right: var(--comp-scu-button-outline-disabled-padding-right, 24px); padding-top: var(--comp-scu-button-outline-disabled-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-disabled-padding-bottom, 11px); } .comp-scu-button.outline.disabled > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-disabled-item-spacing, 0px); } .comp-scu-button.outline.disabled .label { position: relative; font-size: var(--comp-scu-button-outline-disabled-label-font-size, 16px); text-align: var(--comp-scu-button-outline-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-disabled-label-color, #c9e3a6); font-family: var(--comp-scu-button-outline-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-disabled-label-font-weight, 400); line-height: var(--comp-scu-button-outline-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-disabled-label-letter-spacing, 0px); } .comp-scu-button.grey { position: relative; background-color: var(--comp-scu-button-grey-default-background-color, #dbdbdb); border-radius: var(--comp-scu-button-grey-default-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-default-padding-left, 24px); padding-right: var(--comp-scu-button-grey-default-padding-right, 24px); padding-top: var(--comp-scu-button-grey-default-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-default-padding-bottom, 11px); } .comp-scu-button.grey > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-default-item-spacing, 0px); } .comp-scu-button.grey .label { position: relative; font-size: var(--comp-scu-button-grey-default-label-font-size, 16px); text-align: var(--comp-scu-button-grey-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-default-label-color, black); font-family: var(--comp-scu-button-grey-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-default-label-font-weight, 400); line-height: var(--comp-scu-button-grey-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-default-label-letter-spacing, 0px); } .comp-scu-button.grey:hover { position: relative; background-color: var(--comp-scu-button-grey-hover-background-color, #ebebeb); border-radius: var(--comp-scu-button-grey-hover-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-hover-padding-left, 24px); padding-right: var(--comp-scu-button-grey-hover-padding-right, 24px); padding-top: var(--comp-scu-button-grey-hover-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-hover-padding-bottom, 11px); } .comp-scu-button.grey:hover > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-hover-item-spacing, 0px); } .comp-scu-button.grey:hover .label { position: relative; font-size: var(--comp-scu-button-grey-hover-label-font-size, 16px); text-align: var(--comp-scu-button-grey-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-hover-label-color, black); font-family: var(--comp-scu-button-grey-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-hover-label-font-weight, 400); line-height: var(--comp-scu-button-grey-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-hover-label-letter-spacing, 0px); } .comp-scu-button.grey:focus { position: relative; background-color: var(--comp-scu-button-grey-focus-background-color, #dbdbdb); border-radius: var(--comp-scu-button-grey-focus-corner-radius, 200px); box-shadow: var(--comp-scu-button-grey-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-focus-padding-left, 24px); padding-right: var(--comp-scu-button-grey-focus-padding-right, 24px); padding-top: var(--comp-scu-button-grey-focus-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-focus-padding-bottom, 11px); } .comp-scu-button.grey:focus > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-focus-item-spacing, 0px); } .comp-scu-button.grey:focus .label { position: relative; font-size: var(--comp-scu-button-grey-focus-label-font-size, 16px); text-align: var(--comp-scu-button-grey-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-focus-label-color, black); font-family: var(--comp-scu-button-grey-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-focus-label-font-weight, 400); line-height: var(--comp-scu-button-grey-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-focus-label-letter-spacing, 0px); } .comp-scu-button.grey.disabled { position: relative; background-color: var(--comp-scu-button-grey-disabled-background-color, #ebebeb); border-radius: var(--comp-scu-button-grey-disabled-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-disabled-padding-left, 24px); padding-right: var(--comp-scu-button-grey-disabled-padding-right, 24px); padding-top: var(--comp-scu-button-grey-disabled-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-disabled-padding-bottom, 11px); } .comp-scu-button.grey.disabled > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-disabled-item-spacing, 0px); } .comp-scu-button.grey.disabled .label { position: relative; font-size: var(--comp-scu-button-grey-disabled-label-font-size, 16px); text-align: var(--comp-scu-button-grey-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-disabled-label-color, #c4c4c4); font-family: var(--comp-scu-button-grey-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-disabled-label-font-weight, 400); line-height: var(--comp-scu-button-grey-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-disabled-label-letter-spacing, 0px); } .comp-scu-button.link { position: relative; border-radius: var(--comp-scu-button-link-default-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-default-padding-left, 24px); padding-right: var(--comp-scu-button-link-default-padding-right, 24px); padding-top: var(--comp-scu-button-link-default-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-default-padding-bottom, 11px); } .comp-scu-button.link > *:not(:last-child) { margin-right: var(--comp-scu-button-link-default-item-spacing, 0px); } .comp-scu-button.link .label { position: relative; font-size: var(--comp-scu-button-link-default-label-font-size, 16px); text-align: var(--comp-scu-button-link-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-default-label-color, black); font-family: var(--comp-scu-button-link-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-default-label-font-weight, 400); line-height: var(--comp-scu-button-link-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-default-label-letter-spacing, 0px); } .comp-scu-button.link:hover { position: relative; border-radius: var(--comp-scu-button-link-hover-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-hover-padding-left, 24px); padding-right: var(--comp-scu-button-link-hover-padding-right, 24px); padding-top: var(--comp-scu-button-link-hover-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-hover-padding-bottom, 11px); } .comp-scu-button.link:hover > *:not(:last-child) { margin-right: var(--comp-scu-button-link-hover-item-spacing, 0px); } .comp-scu-button.link:hover .label { position: relative; font-size: var(--comp-scu-button-link-hover-label-font-size, 16px); text-align: var(--comp-scu-button-link-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-hover-label-color, black); font-family: var(--comp-scu-button-link-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-hover-label-font-weight, 400); line-height: var(--comp-scu-button-link-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-hover-label-letter-spacing, 0px); } .comp-scu-button.link:focus { position: relative; background-color: var(--comp-scu-button-link-focus-background-color, white); border-radius: var(--comp-scu-button-link-focus-corner-radius, 200px); box-shadow: var(--comp-scu-button-link-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-focus-padding-left, 24px); padding-right: var(--comp-scu-button-link-focus-padding-right, 24px); padding-top: var(--comp-scu-button-link-focus-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-focus-padding-bottom, 11px); } .comp-scu-button.link:focus > *:not(:last-child) { margin-right: var(--comp-scu-button-link-focus-item-spacing, 0px); } .comp-scu-button.link:focus .label { position: relative; font-size: var(--comp-scu-button-link-focus-label-font-size, 16px); text-align: var(--comp-scu-button-link-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-focus-label-color, black); font-family: var(--comp-scu-button-link-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-focus-label-font-weight, 400); line-height: var(--comp-scu-button-link-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-focus-label-letter-spacing, 0px); } .comp-scu-button.link.disabled { position: relative; border-radius: var(--comp-scu-button-link-disabled-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-disabled-padding-left, 24px); padding-right: var(--comp-scu-button-link-disabled-padding-right, 24px); padding-top: var(--comp-scu-button-link-disabled-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-disabled-padding-bottom, 11px); } .comp-scu-button.link.disabled > *:not(:last-child) { margin-right: var(--comp-scu-button-link-disabled-item-spacing, 0px); } .comp-scu-button.link.disabled .label { position: relative; font-size: var(--comp-scu-button-link-disabled-label-font-size, 16px); text-align: var(--comp-scu-button-link-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-disabled-label-color, #595959); font-family: var(--comp-scu-button-link-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-disabled-label-font-weight, 400); line-height: var(--comp-scu-button-link-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-disabled-label-letter-spacing, 0px); } :host { display: inline-block; } .comp-scu-button.icon { position: relative; background-color: var(--comp-scu-icon-button-primary-default-background-color, #63a60a); border-radius: var(--comp-scu-icon-button-primary-default-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-default-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-default-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-default-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-default-padding-bottom, 8px); } .comp-scu-button.icon > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-default-item-spacing, 8px); } .comp-scu-button.icon .icon { width: 24px; height: 24px; } .comp-scu-button.icon .label { position: relative; font-size: var(--comp-scu-icon-button-primary-default-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-default-label-color, white); font-family: var(--comp-scu-icon-button-primary-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-default-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-default-label-letter-spacing, 0px); } .comp-scu-button.icon:hover { position: relative; background-color: var(--comp-scu-icon-button-primary-hover-background-color, #2a4901); border-radius: var(--comp-scu-icon-button-primary-hover-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-hover-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-hover-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-hover-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-hover-padding-bottom, 8px); } .comp-scu-button.icon:hover > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-hover-item-spacing, 8px); } .comp-scu-button.icon:hover .icon { width: 24px; height: 24px; } .comp-scu-button.icon:hover .label { position: relative; font-size: var(--comp-scu-icon-button-primary-hover-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-hover-label-color, white); font-family: var(--comp-scu-icon-button-primary-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-hover-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-hover-label-letter-spacing, 0px); } .comp-scu-button.icon:focus { position: relative; background-color: var(--comp-scu-icon-button-primary-focus-background-color, #7eb633); border-radius: var(--comp-scu-icon-button-primary-focus-corner-radius, 200px); box-shadow: var(--comp-scu-icon-button-primary-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-focus-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-focus-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-focus-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-focus-padding-bottom, 8px); } .comp-scu-button.icon:focus > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-focus-item-spacing, 8px); } .comp-scu-button.icon:focus .icon { width: 24px; height: 24px; } .comp-scu-button.icon:focus .label { position: relative; font-size: var(--comp-scu-icon-button-primary-focus-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-focus-label-color, white); font-family: var(--comp-scu-icon-button-primary-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-focus-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-focus-label-letter-spacing, 0px); } .comp-scu-button.icon.disabled { position: relative; background-color: var(--comp-scu-icon-button-primary-disabled-background-color, #7eb633); border-radius: var(--comp-scu-icon-button-primary-disabled-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-disabled-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-disabled-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-disabled-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-disabled-padding-bottom, 8px); } .comp-scu-button.icon.disabled > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-disabled-item-spacing, 8px); } .comp-scu-button.icon.disabled .icon { width: 24px; height: 24px; } .comp-scu-button.icon.disabled .label { position: relative; font-size: var(--comp-scu-icon-button-primary-disabled-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-disabled-label-color, #b4d885); font-family: var(--comp-scu-icon-button-primary-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-disabled-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-disabled-label-letter-spacing, 0px); } :host { display: inline-block; } .comp-scu-button.outline { position: relative; background-color: var(--comp-scu-button-outline-default-background-color, white); border-radius: var(--comp-scu-button-outline-default-corner-radius, 200px); border-width: var(--comp-scu-button-outline-default-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-default-stroke-color, #63a60a); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-default-padding-left, 24px); padding-right: var(--comp-scu-button-outline-default-padding-right, 24px); padding-top: var(--comp-scu-button-outline-default-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-default-padding-bottom, 11px); } .comp-scu-button.outline > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-default-item-spacing, 0px); } .comp-scu-button.outline .label { position: relative; font-size: var(--comp-scu-button-outline-default-label-font-size, 16px); text-align: var(--comp-scu-button-outline-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-default-label-color, #3a6303); font-family: var(--comp-scu-button-outline-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-default-label-font-weight, 400); line-height: var(--comp-scu-button-outline-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-default-label-letter-spacing, 0px); } .comp-scu-button.outline:hover { position: relative; background-color: var(--comp-scu-button-outline-hover-background-color, #fbfff6); border-radius: var(--comp-scu-button-outline-hover-corner-radius, 200px); border-width: var(--comp-scu-button-outline-hover-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-hover-stroke-color, #63a60a); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-hover-padding-left, 24px); padding-right: var(--comp-scu-button-outline-hover-padding-right, 24px); padding-top: var(--comp-scu-button-outline-hover-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-hover-padding-bottom, 11px); } .comp-scu-button.outline:hover > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-hover-item-spacing, 0px); } .comp-scu-button.outline:hover .label { position: relative; font-size: var(--comp-scu-button-outline-hover-label-font-size, 16px); text-align: var(--comp-scu-button-outline-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-hover-label-color, #3a6303); font-family: var(--comp-scu-button-outline-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-hover-label-font-weight, 400); line-height: var(--comp-scu-button-outline-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-hover-label-letter-spacing, 0px); } .comp-scu-button.outline:focus { position: relative; background-color: var(--comp-scu-button-outline-focus-background-color, white); border-radius: var(--comp-scu-button-outline-focus-corner-radius, 200px); border-width: var(--comp-scu-button-outline-focus-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-focus-stroke-color, #63a60a); box-shadow: var(--comp-scu-button-outline-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-focus-padding-left, 24px); padding-right: var(--comp-scu-button-outline-focus-padding-right, 24px); padding-top: var(--comp-scu-button-outline-focus-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-focus-padding-bottom, 11px); } .comp-scu-button.outline:focus > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-focus-item-spacing, 0px); } .comp-scu-button.outline:focus .label { position: relative; font-size: var(--comp-scu-button-outline-focus-label-font-size, 16px); text-align: var(--comp-scu-button-outline-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-focus-label-color, #3a6303); font-family: var(--comp-scu-button-outline-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-focus-label-font-weight, 400); line-height: var(--comp-scu-button-outline-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-focus-label-letter-spacing, 0px); } .comp-scu-button.outline.disabled { position: relative; background-color: var(--comp-scu-button-outline-disabled-background-color, white); border-radius: var(--comp-scu-button-outline-disabled-corner-radius, 200px); border-width: var(--comp-scu-button-outline-disabled-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-button-outline-disabled-stroke-color, #bbda92); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-outline-disabled-padding-left, 24px); padding-right: var(--comp-scu-button-outline-disabled-padding-right, 24px); padding-top: var(--comp-scu-button-outline-disabled-padding-top, 11px); padding-bottom: var(--comp-scu-button-outline-disabled-padding-bottom, 11px); } .comp-scu-button.outline.disabled > *:not(:last-child) { margin-right: var(--comp-scu-button-outline-disabled-item-spacing, 0px); } .comp-scu-button.outline.disabled .label { position: relative; font-size: var(--comp-scu-button-outline-disabled-label-font-size, 16px); text-align: var(--comp-scu-button-outline-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-outline-disabled-label-color, #c9e3a6); font-family: var(--comp-scu-button-outline-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-outline-disabled-label-font-weight, 400); line-height: var(--comp-scu-button-outline-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-outline-disabled-label-letter-spacing, 0px); } .comp-scu-button.grey { position: relative; background-color: var(--comp-scu-button-grey-default-background-color, #dbdbdb); border-radius: var(--comp-scu-button-grey-default-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-default-padding-left, 24px); padding-right: var(--comp-scu-button-grey-default-padding-right, 24px); padding-top: var(--comp-scu-button-grey-default-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-default-padding-bottom, 11px); } .comp-scu-button.grey > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-default-item-spacing, 0px); } .comp-scu-button.grey .label { position: relative; font-size: var(--comp-scu-button-grey-default-label-font-size, 16px); text-align: var(--comp-scu-button-grey-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-default-label-color, black); font-family: var(--comp-scu-button-grey-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-default-label-font-weight, 400); line-height: var(--comp-scu-button-grey-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-default-label-letter-spacing, 0px); } .comp-scu-button.grey:hover { position: relative; background-color: var(--comp-scu-button-grey-hover-background-color, #ebebeb); border-radius: var(--comp-scu-button-grey-hover-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-hover-padding-left, 24px); padding-right: var(--comp-scu-button-grey-hover-padding-right, 24px); padding-top: var(--comp-scu-button-grey-hover-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-hover-padding-bottom, 11px); } .comp-scu-button.grey:hover > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-hover-item-spacing, 0px); } .comp-scu-button.grey:hover .label { position: relative; font-size: var(--comp-scu-button-grey-hover-label-font-size, 16px); text-align: var(--comp-scu-button-grey-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-hover-label-color, black); font-family: var(--comp-scu-button-grey-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-hover-label-font-weight, 400); line-height: var(--comp-scu-button-grey-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-hover-label-letter-spacing, 0px); } .comp-scu-button.grey:focus { position: relative; background-color: var(--comp-scu-button-grey-focus-background-color, #dbdbdb); border-radius: var(--comp-scu-button-grey-focus-corner-radius, 200px); box-shadow: var(--comp-scu-button-grey-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-focus-padding-left, 24px); padding-right: var(--comp-scu-button-grey-focus-padding-right, 24px); padding-top: var(--comp-scu-button-grey-focus-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-focus-padding-bottom, 11px); } .comp-scu-button.grey:focus > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-focus-item-spacing, 0px); } .comp-scu-button.grey:focus .label { position: relative; font-size: var(--comp-scu-button-grey-focus-label-font-size, 16px); text-align: var(--comp-scu-button-grey-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-focus-label-color, black); font-family: var(--comp-scu-button-grey-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-focus-label-font-weight, 400); line-height: var(--comp-scu-button-grey-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-focus-label-letter-spacing, 0px); } .comp-scu-button.grey.disabled { position: relative; background-color: var(--comp-scu-button-grey-disabled-background-color, #ebebeb); border-radius: var(--comp-scu-button-grey-disabled-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-grey-disabled-padding-left, 24px); padding-right: var(--comp-scu-button-grey-disabled-padding-right, 24px); padding-top: var(--comp-scu-button-grey-disabled-padding-top, 11px); padding-bottom: var(--comp-scu-button-grey-disabled-padding-bottom, 11px); } .comp-scu-button.grey.disabled > *:not(:last-child) { margin-right: var(--comp-scu-button-grey-disabled-item-spacing, 0px); } .comp-scu-button.grey.disabled .label { position: relative; font-size: var(--comp-scu-button-grey-disabled-label-font-size, 16px); text-align: var(--comp-scu-button-grey-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-grey-disabled-label-color, #c4c4c4); font-family: var(--comp-scu-button-grey-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-grey-disabled-label-font-weight, 400); line-height: var(--comp-scu-button-grey-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-grey-disabled-label-letter-spacing, 0px); } .comp-scu-button.link { position: relative; border-radius: var(--comp-scu-button-link-default-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-default-padding-left, 24px); padding-right: var(--comp-scu-button-link-default-padding-right, 24px); padding-top: var(--comp-scu-button-link-default-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-default-padding-bottom, 11px); } .comp-scu-button.link > *:not(:last-child) { margin-right: var(--comp-scu-button-link-default-item-spacing, 0px); } .comp-scu-button.link .label { position: relative; font-size: var(--comp-scu-button-link-default-label-font-size, 16px); text-align: var(--comp-scu-button-link-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-default-label-color, black); font-family: var(--comp-scu-button-link-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-default-label-font-weight, 400); line-height: var(--comp-scu-button-link-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-default-label-letter-spacing, 0px); } .comp-scu-button.link:hover { position: relative; border-radius: var(--comp-scu-button-link-hover-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-hover-padding-left, 24px); padding-right: var(--comp-scu-button-link-hover-padding-right, 24px); padding-top: var(--comp-scu-button-link-hover-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-hover-padding-bottom, 11px); } .comp-scu-button.link:hover > *:not(:last-child) { margin-right: var(--comp-scu-button-link-hover-item-spacing, 0px); } .comp-scu-button.link:hover .label { position: relative; font-size: var(--comp-scu-button-link-hover-label-font-size, 16px); text-align: var(--comp-scu-button-link-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-hover-label-color, black); font-family: var(--comp-scu-button-link-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-hover-label-font-weight, 400); line-height: var(--comp-scu-button-link-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-hover-label-letter-spacing, 0px); } .comp-scu-button.link:focus { position: relative; background-color: var(--comp-scu-button-link-focus-background-color, white); border-radius: var(--comp-scu-button-link-focus-corner-radius, 200px); box-shadow: var(--comp-scu-button-link-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-focus-padding-left, 24px); padding-right: var(--comp-scu-button-link-focus-padding-right, 24px); padding-top: var(--comp-scu-button-link-focus-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-focus-padding-bottom, 11px); } .comp-scu-button.link:focus > *:not(:last-child) { margin-right: var(--comp-scu-button-link-focus-item-spacing, 0px); } .comp-scu-button.link:focus .label { position: relative; font-size: var(--comp-scu-button-link-focus-label-font-size, 16px); text-align: var(--comp-scu-button-link-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-focus-label-color, black); font-family: var(--comp-scu-button-link-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-focus-label-font-weight, 400); line-height: var(--comp-scu-button-link-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-focus-label-letter-spacing, 0px); } .comp-scu-button.link.disabled { position: relative; border-radius: var(--comp-scu-button-link-disabled-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-button-link-disabled-padding-left, 24px); padding-right: var(--comp-scu-button-link-disabled-padding-right, 24px); padding-top: var(--comp-scu-button-link-disabled-padding-top, 11px); padding-bottom: var(--comp-scu-button-link-disabled-padding-bottom, 11px); } .comp-scu-button.link.disabled > *:not(:last-child) { margin-right: var(--comp-scu-button-link-disabled-item-spacing, 0px); } .comp-scu-button.link.disabled .label { position: relative; font-size: var(--comp-scu-button-link-disabled-label-font-size, 16px); text-align: var(--comp-scu-button-link-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-button-link-disabled-label-color, #595959); font-family: var(--comp-scu-button-link-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-button-link-disabled-label-font-weight, 400); line-height: var(--comp-scu-button-link-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-button-link-disabled-label-letter-spacing, 0px); } :host { display: inline-block; } .comp-scu-button.icon { position: relative; background-color: var(--comp-scu-icon-button-primary-default-background-color, #63a60a); border-radius: var(--comp-scu-icon-button-primary-default-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-default-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-default-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-default-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-default-padding-bottom, 8px); } .comp-scu-button.icon > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-default-item-spacing, 8px); } .comp-scu-button.icon .icon { width: 24px; height: 24px; } .comp-scu-button.icon .label { position: relative; font-size: var(--comp-scu-icon-button-primary-default-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-default-label-color, white); font-family: var(--comp-scu-icon-button-primary-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-default-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-default-label-letter-spacing, 0px); } .comp-scu-button.icon:hover { position: relative; background-color: var(--comp-scu-icon-button-primary-hover-background-color, #2a4901); border-radius: var(--comp-scu-icon-button-primary-hover-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-hover-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-hover-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-hover-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-hover-padding-bottom, 8px); } .comp-scu-button.icon:hover > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-hover-item-spacing, 8px); } .comp-scu-button.icon:hover .icon { width: 24px; height: 24px; } .comp-scu-button.icon:hover .label { position: relative; font-size: var(--comp-scu-icon-button-primary-hover-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-hover-label-color, white); font-family: var(--comp-scu-icon-button-primary-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-hover-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-hover-label-letter-spacing, 0px); } .comp-scu-button.icon:focus { position: relative; background-color: var(--comp-scu-icon-button-primary-focus-background-color, #7eb633); border-radius: var(--comp-scu-icon-button-primary-focus-corner-radius, 200px); box-shadow: var(--comp-scu-icon-button-primary-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-focus-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-focus-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-focus-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-focus-padding-bottom, 8px); } .comp-scu-button.icon:focus > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-focus-item-spacing, 8px); } .comp-scu-button.icon:focus .icon { width: 24px; height: 24px; } .comp-scu-button.icon:focus .label { position: relative; font-size: var(--comp-scu-icon-button-primary-focus-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-focus-label-color, white); font-family: var(--comp-scu-icon-button-primary-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-focus-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-focus-label-letter-spacing, 0px); } .comp-scu-button.icon.disabled { position: relative; background-color: var(--comp-scu-icon-button-primary-disabled-background-color, #7eb633); border-radius: var(--comp-scu-icon-button-primary-disabled-corner-radius, 200px); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-primary-disabled-padding-left, 24px); padding-right: var(--comp-scu-icon-button-primary-disabled-padding-right, 24px); padding-top: var(--comp-scu-icon-button-primary-disabled-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-primary-disabled-padding-bottom, 8px); } .comp-scu-button.icon.disabled > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-primary-disabled-item-spacing, 8px); } .comp-scu-button.icon.disabled .icon { width: 24px; height: 24px; } .comp-scu-button.icon.disabled .label { position: relative; font-size: var(--comp-scu-icon-button-primary-disabled-label-font-size, 16px); text-align: var(--comp-scu-icon-button-primary-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-primary-disabled-label-color, #b4d885); font-family: var(--comp-scu-icon-button-primary-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-primary-disabled-label-font-weight, 700); line-height: var(--comp-scu-icon-button-primary-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-primary-disabled-label-letter-spacing, 0px); } :host { display: inline-block; } .comp-scu-button.outline.icon { position: relative; background-color: var(--comp-scu-icon-button-outline-default-background-color, white); border-radius: var(--comp-scu-icon-button-outline-default-corner-radius, 200px); border-width: var(--comp-scu-icon-button-outline-default-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-icon-button-outline-default-stroke-color, #63a60a); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-outline-default-padding-left, 24px); padding-right: var(--comp-scu-icon-button-outline-default-padding-right, 24px); padding-top: var(--comp-scu-icon-button-outline-default-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-outline-default-padding-bottom, 8px); } .comp-scu-button.outline.icon > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-outline-default-item-spacing, 8px); } .comp-scu-button.outline.icon .icon { width: 24px; height: 24px; } .comp-scu-button.outline.icon .label { position: relative; font-size: var(--comp-scu-icon-button-outline-default-label-font-size, 16px); text-align: var(--comp-scu-icon-button-outline-default-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-outline-default-label-color, #569008); font-family: var(--comp-scu-icon-button-outline-default-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-outline-default-label-font-weight, 400); line-height: var(--comp-scu-icon-button-outline-default-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-outline-default-label-letter-spacing, 0px); } .comp-scu-button.outline.icon:hover { position: relative; background-color: var(--comp-scu-icon-button-outline-hover-background-color, #fbfff6); border-radius: var(--comp-scu-icon-button-outline-hover-corner-radius, 200px); border-width: var(--comp-scu-icon-button-outline-hover-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-icon-button-outline-hover-stroke-color, #63a60a); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-outline-hover-padding-left, 24px); padding-right: var(--comp-scu-icon-button-outline-hover-padding-right, 24px); padding-top: var(--comp-scu-icon-button-outline-hover-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-outline-hover-padding-bottom, 8px); } .comp-scu-button.outline.icon:hover > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-outline-hover-item-spacing, 8px); } .comp-scu-button.outline.icon:hover .icon { width: 24px; height: 24px; } .comp-scu-button.outline.icon:hover .label { position: relative; font-size: var(--comp-scu-icon-button-outline-hover-label-font-size, 16px); text-align: var(--comp-scu-icon-button-outline-hover-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-outline-hover-label-color, #569008); font-family: var(--comp-scu-icon-button-outline-hover-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-outline-hover-label-font-weight, 400); line-height: var(--comp-scu-icon-button-outline-hover-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-outline-hover-label-letter-spacing, 0px); } .comp-scu-button.outline.icon:focus { position: relative; background-color: var(--comp-scu-icon-button-outline-focus-background-color, white); border-radius: var(--comp-scu-icon-button-outline-focus-corner-radius, 200px); box-shadow: var(--comp-scu-icon-button-outline-focus-shadow, 0px 0px 0px 2px #359bf9); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-outline-focus-padding-left, 24px); padding-right: var(--comp-scu-icon-button-outline-focus-padding-right, 24px); padding-top: var(--comp-scu-icon-button-outline-focus-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-outline-focus-padding-bottom, 8px); } .comp-scu-button.outline.icon:focus > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-outline-focus-item-spacing, 8px); } .comp-scu-button.outline.icon:focus .icon { width: 24px; height: 24px; } .comp-scu-button.outline.icon:focus .label { position: relative; font-size: var(--comp-scu-icon-button-outline-focus-label-font-size, 16px); text-align: var(--comp-scu-icon-button-outline-focus-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-outline-focus-label-color, #569008); font-family: var(--comp-scu-icon-button-outline-focus-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-outline-focus-label-font-weight, 400); line-height: var(--comp-scu-icon-button-outline-focus-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-outline-focus-label-letter-spacing, 0px); } .comp-scu-button.outline.icon.disabled { position: relative; background-color: var(--comp-scu-icon-button-outline-disabled-background-color, white); border-radius: var(--comp-scu-icon-button-outline-disabled-corner-radius, 200px); border-width: var(--comp-scu-icon-button-outline-disabled-stroke-weight, 1px); border-style: solid; border-color: var(--comp-scu-icon-button-outline-disabled-stroke-color, #bbda92); display: flex; flex-flow: row nowrap; padding-left: var(--comp-scu-icon-button-outline-disabled-padding-left, 24px); padding-right: var(--comp-scu-icon-button-outline-disabled-padding-right, 24px); padding-top: var(--comp-scu-icon-button-outline-disabled-padding-top, 8px); padding-bottom: var(--comp-scu-icon-button-outline-disabled-padding-bottom, 8px); } .comp-scu-button.outline.icon.disabled > *:not(:last-child) { margin-right: var(--comp-scu-icon-button-outline-disabled-item-spacing, 8px); } .comp-scu-button.outline.icon.disabled .icon { width: 24px; height: 24px; } .comp-scu-button.outline.icon.disabled .icon #iconSvg { fill: var(--comp-scu-icon-button-outline-disabled-label-color); } .comp-scu-button.outline.icon.disabled .icon #iconSvg * { fill: var(--comp-scu-icon-button-outline-disabled-label-color); } .comp-scu-button.outline.icon.disabled .label { position: relative; font-size: var(--comp-scu-icon-button-outline-disabled-label-font-size, 16px); text-align: var(--comp-scu-icon-button-outline-disabled-label-text-align-horizontal, CENTER); color: var(--comp-scu-icon-button-outline-disabled-label-color, #c9e3a6); font-family: var(--comp-scu-icon-button-outline-disabled-label-font-family, "Proxima Nova"); font-weight: var(--comp-scu-icon-button-outline-disabled-label-font-weight, 400); line-height: var(--comp-scu-icon-button-outline-disabled-label-line-height, 18.75px); letter-spacing: var(--comp-scu-icon-button-outline-disabled-label-letter-spacing, 0px); } .comp-scu-button.icon.icon_only, .comp-scu-button.icon.icon_only:hover, .comp-scu-button.icon.icon_only:focus, .comp-scu-button.icon.icon_only.disabled { width: var(--spacing-5, 40px); height: var(--spacing-5, 40px); padding: 0; } .comp-scu-button.icon.icon_only .icon, .comp-scu-button.icon.icon_only:hover .icon, .comp-scu-button.icon.icon_only:focus .icon, .comp-scu-button.icon.icon_only.disabled .icon { margin: 0; } .comp-scu-button.icon.icon_only .label, .comp-scu-button.icon.icon_only:hover .label, .comp-scu-button.icon.icon_only:focus .label, .comp-scu-button.icon.icon_only.disabled .label { display: none; }