.canva-btn {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  line-height: 1.6;
  box-sizing: border-box;
  user-select: none;
  cursor: pointer;
  border: 1px solid transparent;
  max-width: 100%;
  min-width: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  transition: background-color 0.1s linear;
}

.canva-btn-i {
  background-size: contain;
}

.canva-btn-theme-default {
  background-color: #7d2ae8;
  color: #ffffff;
}

.canva-btn-theme-default:hover,
.canva-btn-theme-default:focus {
  background-color: #8d39fa;
}

.canva-btn-theme-default:active {
  background-color: #6718cf;
}

.canva-btn-theme-dark {
  background-color: #0e1318;
  color: #ffffff;
}

.canva-btn-theme-light {
  border-color: #9a9da3;
  background-color: #ffffff;
  color: #0e1318;
}

.canva-btn-theme-light:active {
  background-color: #f8f9f9;
}

.canva-btn-size-l {
  height: 48px;
  border-radius: 5px;
  font-size: 16px;
  padding-right: 16px;
}

.canva-btn-size-l .canva-btn-i {
  width: 32px;
  height: 32px;
  margin-left: 11px;
  margin-right: 13px;
}

.canva-btn-size-m {
  height: 40px;
  border-radius: 4px;
  font-size: 14px;
  padding-right: 16px;
}

.canva-btn-size-m .canva-btn-i {
  width: 24px;
  height: 24px;
  margin: 0 9px;
}

.canva-btn-size-s {
  height: 32px;
  border-radius: 3px;
  font-size: 12px;
  padding-right: 12px;
}

.canva-btn-size-s .canva-btn-i {
  width: 20px;
  height: 20px;
  margin: 0 8px;
}

.canva-btn-size-xs {
  height: 24px;
  border-radius: 2px;
  font-size: 12px;
  padding-right: 8px;
}

.canva-btn-size-xs .canva-btn-i {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  margin-right: 5px;
}

/* SVG files are inlined here just as an example. If you're going to use Canva logo in SVG format on your website, you can host SVG files and use them in CSS using URL in `background-image: url(...)`; */

.canva-btn-theme-dark .canva-btn-i,
.canva-btn-theme-light .canva-btn-i,
.canva-btn-theme-default .canva-btn-i {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='2' y='2' width='28' height='28'%3E%3Cpath d='M16 29.3334C23.3638 29.3334 29.3333 23.3638 29.3333 16C29.3333 8.63622 23.3638 2.66669 16 2.66669C8.63619 2.66669 2.66666 8.63622 2.66666 16C2.66666 23.3638 8.63619 29.3334 16 29.3334Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.33331 1.33337H30.6666V30.6667H1.33331V1.33337Z' fill='%2300C4CC'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4773 18.628C21.4479 18.498 21.3762 18.3814 21.2734 18.2965C21.1706 18.2115 21.0426 18.1631 20.9093 18.1587C20.8021 18.1551 20.696 18.182 20.6035 18.2363C20.511 18.2906 20.4358 18.37 20.3866 18.4654C20.3306 18.5507 20.28 18.6374 20.232 18.7187C20.1965 18.7797 20.16 18.8402 20.1226 18.9C19.496 19.8867 19.0026 20.324 17.8333 20.936C17.3078 21.2065 16.7269 21.352 16.136 21.3614C14.416 21.3614 13.416 19.8387 13.0826 18.5347C12.496 16.2254 13.4693 13.352 14.736 11.708C15.4546 10.7734 16.2573 10.2347 16.9386 10.232C17.1224 10.2379 17.3021 10.2874 17.463 10.3765C17.6239 10.4655 17.7613 10.5915 17.864 10.744C18.2213 11.3187 18.3373 11.8027 17.9306 12.712C17.8729 12.8495 17.8671 13.0032 17.9145 13.1446C17.9618 13.2859 18.0591 13.4052 18.188 13.48C18.528 13.6614 18.9466 13.4574 19.4013 12.8054C19.8813 12.1187 19.912 11.04 19.472 10.3494C18.9293 9.50005 17.8786 8.97205 16.7093 8.97205C15.893 8.97931 15.0946 9.21236 14.4026 9.64538C11.5226 11.4654 9.87196 15.668 10.724 19.012C11.028 20.2054 11.6973 21.284 12.5586 21.9747C12.8973 22.2414 14.112 23.112 15.5853 23.112H15.6026C17.088 23.1054 18.216 22.4747 18.9386 21.9987C19.728 21.4734 20.416 20.7507 21.0453 19.7894C21.0973 19.7107 21.148 19.6294 21.1973 19.5467L21.336 19.3214C21.4063 19.2219 21.4552 19.1089 21.4795 18.9896C21.5038 18.8702 21.5031 18.7471 21.4773 18.628ZM15.5853 22.8067V22.808V22.8067Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.canva-btn-theme-dark:hover .canva-btn-i,
.canva-btn-theme-dark:focus .canva-btn-i,
.canva-btn-theme-light:hover .canva-btn-i,
.canva-btn-theme-light:focus .canva-btn-i,
.canva-btn-theme-default:hover .canva-btn-i,
.canva-btn-theme-default:focus .canva-btn-i {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='2' y='2' width='28' height='28'%3E%3Cpath d='M16 29.3334C23.3638 29.3334 29.3333 23.3638 29.3333 16C29.3333 8.63622 23.3638 2.66669 16 2.66669C8.63619 2.66669 2.66666 8.63622 2.66666 16C2.66666 23.3638 8.63619 29.3334 16 29.3334Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.33331 1.33337H30.6666V30.6667H1.33331V1.33337Z' fill='%2300D9E1'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4773 18.628C21.4479 18.498 21.3762 18.3814 21.2734 18.2965C21.1706 18.2115 21.0426 18.1631 20.9093 18.1587C20.8021 18.1551 20.696 18.182 20.6035 18.2363C20.511 18.2906 20.4358 18.37 20.3866 18.4654C20.3306 18.5507 20.28 18.6374 20.232 18.7187C20.1965 18.7797 20.16 18.8402 20.1226 18.9C19.496 19.8867 19.0026 20.324 17.8333 20.936C17.3078 21.2065 16.7269 21.352 16.136 21.3614C14.416 21.3614 13.416 19.8387 13.0826 18.5347C12.496 16.2254 13.4693 13.352 14.736 11.708C15.4546 10.7734 16.2573 10.2347 16.9386 10.232C17.1224 10.2379 17.3021 10.2874 17.463 10.3765C17.6239 10.4655 17.7613 10.5915 17.864 10.744C18.2213 11.3187 18.3373 11.8027 17.9306 12.712C17.8729 12.8495 17.8671 13.0032 17.9145 13.1446C17.9618 13.2859 18.0591 13.4052 18.188 13.48C18.528 13.6614 18.9466 13.4574 19.4013 12.8054C19.8813 12.1187 19.912 11.04 19.472 10.3494C18.9293 9.50005 17.8786 8.97205 16.7093 8.97205C15.893 8.97931 15.0946 9.21236 14.4026 9.64538C11.5226 11.4654 9.87196 15.668 10.724 19.012C11.028 20.2054 11.6973 21.284 12.5586 21.9747C12.8973 22.2414 14.112 23.112 15.5853 23.112H15.6026C17.088 23.1054 18.216 22.4747 18.9386 21.9987C19.728 21.4734 20.416 20.7507 21.0453 19.7894C21.0973 19.7107 21.148 19.6294 21.1973 19.5467L21.336 19.3214C21.4063 19.2219 21.4552 19.1089 21.4795 18.9896C21.5038 18.8702 21.5031 18.7471 21.4773 18.628ZM15.5853 22.8067V22.808V22.8067Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.canva-btn-theme-dark:active .canva-btn-i,
.canva-btn-theme-light:active .canva-btn-i,
.canva-btn-theme-default:active .canva-btn-i {
  background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='2' y='2' width='28' height='28'%3E%3Cpath d='M16 29.3334C23.3638 29.3334 29.3333 23.3638 29.3333 16C29.3333 8.63622 23.3638 2.66669 16 2.66669C8.63619 2.66669 2.66666 8.63622 2.66666 16C2.66666 23.3638 8.63619 29.3334 16 29.3334Z' fill='white'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.33331 1.33337H30.6666V30.6667H1.33331V1.33337Z' fill='%2300AFB5'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M21.4773 18.628C21.4479 18.498 21.3762 18.3814 21.2734 18.2965C21.1706 18.2115 21.0426 18.1631 20.9093 18.1587C20.8021 18.1551 20.696 18.182 20.6035 18.2363C20.511 18.2906 20.4358 18.37 20.3866 18.4654C20.3306 18.5507 20.28 18.6374 20.232 18.7187C20.1965 18.7797 20.16 18.8402 20.1226 18.9C19.496 19.8867 19.0026 20.324 17.8333 20.936C17.3078 21.2065 16.7269 21.352 16.136 21.3614C14.416 21.3614 13.416 19.8387 13.0826 18.5347C12.496 16.2254 13.4693 13.352 14.736 11.708C15.4546 10.7734 16.2573 10.2347 16.9386 10.232C17.1224 10.2379 17.3021 10.2874 17.463 10.3765C17.6239 10.4655 17.7613 10.5915 17.864 10.744C18.2213 11.3187 18.3373 11.8027 17.9306 12.712C17.8729 12.8495 17.8671 13.0032 17.9145 13.1446C17.9618 13.2859 18.0591 13.4052 18.188 13.48C18.528 13.6614 18.9466 13.4574 19.4013 12.8054C19.8813 12.1187 19.912 11.04 19.472 10.3494C18.9293 9.50005 17.8786 8.97205 16.7093 8.97205C15.893 8.97931 15.0946 9.21236 14.4026 9.64538C11.5226 11.4654 9.87196 15.668 10.724 19.012C11.028 20.2054 11.6973 21.284 12.5586 21.9747C12.8973 22.2414 14.112 23.112 15.5853 23.112H15.6026C17.088 23.1054 18.216 22.4747 18.9386 21.9987C19.728 21.4734 20.416 20.7507 21.0453 19.7894C21.0973 19.7107 21.148 19.6294 21.1973 19.5467L21.336 19.3214C21.4063 19.2219 21.4552 19.1089 21.4795 18.9896C21.5038 18.8702 21.5031 18.7471 21.4773 18.628ZM15.5853 22.8067V22.808V22.8067Z' fill='white'/%3E%3C/g%3E%3C/svg%3E%0A");
}
