ybc-blade[style*='bg-color: #005572'] .yubicool-button,
  ybc-blade[style*='bg-color: #005572'] ybc-cta[variation^='btn'] {
    --cta-variation-border-width: '0';
    --cta-theme-border-color: #ffffff !important;
    --cta-theme-hover-border-color: #005572 !important;
    --cta-theme-active-border-color: #17394F !important;
    --cta-theme-background-color: #005572 !important;
    --cta-theme-hover-background-color: #ffffff !important;
    --cta-theme-active-background-color: #17394F !important;
    --cta-theme-color: #ffffff !important;
    --cta-theme-hover-color: #005572 !important;
    --cta-theme-active-color: #ffffff !important;
  }

ybc-blade[style*='bg-color: #9aca3c'] .yubicool-button,
  ybc-blade[style*='bg-color: #9aca3c'] ybc-cta[variation^='btn'] {
    --cta-variation-border-width: 0 !important;
    --cta-theme-border-color: #4F7F0D !important;
    --cta-theme-hover-border-color: #4F7F0D !important;
    --cta-theme-active-border-color: #315E03 !important;
    --cta-theme-background-color: #ffffff !important;
    --cta-theme-hover-background-color: #4F7F0D !important;
    --cta-theme-active-background-color: #315E03 !important;
    --cta-theme-color: #4F7F0D !important;
    --cta-theme-hover-color: #ffffff !important;
    --cta-theme-active-color: #ffffff !important;
  }

ybc-blade[style*='bg-color: #007f95'] .yubicool-button,
  ybc-blade[style*='bg-color: #007f95'] ybc-cta[variation^='btn'],
  ybc-blade[style*='bg-color:#007f95'] .yubicool-button,
  ybc-blade[style*='bg-color:#007f95'] ybc-cta[variation^='btn'] {
    --cta-variation-border-width: 0 !important;
    --cta-theme-border-color: #007f95 !important;
    --cta-theme-hover-border-color: #007f95 !important;
    --cta-theme-active-border-color: #007f95 !important;
    --cta-theme-background-color: #ffffff !important;
    --cta-theme-hover-background-color: #155866 !important;
    --cta-theme-active-background-color: #163E47 !important;
    --cta-theme-color: #007f95 !important;
    --cta-theme-hover-color: #ffffff !important;
    --cta-theme-active-color: #ffffff !important;
  }

ybc-blade[style*='bg-color: #5c8211'] .yubicool-button,
  ybc-blade[style*='bg-color: #5c8211'] ybc-cta[variation^='btn'],
  ybc-blade[style*='bg-color:#5c8211'] .yubicool-button,
  ybc-blade[style*='bg-color:#5c8211'] ybc-cta[variation^='btn'] {
    --cta-variation-border-width: 0 !important;
    --cta-theme-border-color: #5c8211 !important;
    --cta-theme-hover-border-color: #5c8211 !important;
    --cta-theme-active-border-color: #5c8211 !important;
    --cta-theme-background-color: #ffffff !important;
    --cta-theme-hover-background-color: #425A13 !important;
    --cta-theme-active-background-color: #303F12 !important;
    --cta-theme-color: #5c8211 !important;
    --cta-theme-hover-color: #ffffff !important;
    --cta-theme-active-color: #ffffff !important;
  }

ybc-blade[style*='bg-color: #487694'] .yubicool-button,
  ybc-blade[style*='bg-color: #487694'] ybc-cta[variation^='btn'],
  ybc-blade[style*='bg-color:#487694'] .yubicool-button,
  ybc-blade[style*='bg-color:#487694'] ybc-cta[variation^='btn'] {
    --cta-variation-border-width: 0 !important;
    --cta-theme-border-color: #4a7694 !important;
    --cta-theme-hover-border-color: #2D5381 !important;
    --cta-theme-active-border-color: #2D5381 !important;
    --cta-theme-background-color: #ffffff !important;
    --cta-theme-hover-background-color: #2D5381 !important;
    --cta-theme-active-background-color: #233B59 !important;
    --cta-theme-color: #4a7694 !important;
    --cta-theme-hover-color: #ffffff !important;
    --cta-theme-active-color: #ffffff !important;
  }

ybc-blade[style*='bg-color: #5C8211'] .yubicool-button,
  ybc-blade[style*='bg-color: #5C8211'] ybc-cta[variation^='btn'],
  ybc-blade[style*='bg-color:#5C8211'] .yubicool-button,
  ybc-blade[style*='bg-color:#5C8211'] ybc-cta[variation^='btn'] {
    --cta-variation-border-width: 0 !important;
    --cta-theme-border-color: #5c8211 !important;
    --cta-theme-hover-border-color: #5c8211 !important;
    --cta-theme-active-border-color: #5c8211 !important;
    --cta-theme-background-color: #ffffff !important;
    --cta-theme-hover-background-color: #425A13 !important;
    --cta-theme-active-background-color: #303F12 !important;
    --cta-theme-color: #5c8211 !important;
    --cta-theme-hover-color: #ffffff !important;
    --cta-theme-active-color: #ffffff !important;
  }

ybc-blade[style*='bg-color: #0073a5'] .yubicool-button,
  ybc-blade[style*='bg-color: #0073a5'] ybc-cta[variation^='btn'],
  ybc-blade[style*='bg-color:#0073a5'] .yubicool-button,
  ybc-blade[style*='bg-color:#0073a5'] ybc-cta[variation^='btn'],
  .wrapper.bg--blue .yubicool-button,
  .wrapper.bg--blue ybc-cta[variation^='btn'] {
    --cta-variation-border-width: 0 !important;
    --cta-theme-border-color: #0073a5 !important;
    --cta-theme-hover-border-color: #1F5770 !important;
    --cta-theme-active-border-color: #1F5770 !important;
    --cta-theme-background-color: #ffffff !important;
    --cta-theme-hover-background-color: #1F5770 !important;
    --cta-theme-active-background-color: #1C3D4E !important;
    --cta-theme-color: #0073a5 !important;
    --cta-theme-hover-color: #ffffff !important;
    --cta-theme-active-color: #ffffff !important;
  }

ybc-blade[style*='bg-color: #0073a5'] .yubicool-button:focus, ybc-blade[style*='bg-color: #0073a5'] ybc-cta[variation^='btn']:focus, ybc-blade[style*='bg-color:#0073a5'] .yubicool-button:focus, ybc-blade[style*='bg-color:#0073a5'] ybc-cta[variation^='btn']:focus, .wrapper.bg--blue .yubicool-button:focus, .wrapper.bg--blue ybc-cta[variation^='btn']:focus {
      outline-color: #cae5f1;
    }

ybc-blade[variation~='hero'] ybc-cta:focus, ybc-blade[has-dark-bg~='true'] ybc-cta:focus {
    outline-color: #cae5f1 !important;
  }