a.button,button{
  background-image:none;
  border-radius:.25rem;
  border-style:none;
  display:inline-block;
  font-family:sans-serif;
  font-family:var(--font-family-body,sans-serif);
  font-size:.875rem;
  font-weight:700;
  line-height:1.25rem;
  line-height:1;
  margin:0;
  padding:.5rem;
  text-decoration:none;
  transition:color .12s ease-out,background-color .12s ease-out;
  white-space:nowrap
}

a.button.secondary,button.secondary{
  padding:.25rem .5rem
}

@media (min-width:768px){
  a.button,button{
    font-size:1rem;
    line-height:1.5rem;
    line-height:1;
    padding:.5rem 1rem
  }
}

a.button.xsmall,a.button[size=xsmall],button.xsmall,button[size=xsmall]{
  border-radius:.125rem;
  font-size:.75rem;
  line-height:1rem;
  line-height:1;
  padding:.25rem .5rem
}

a.button.small,a.button[size=small],button.small,button[size=small]{
  font-size:.875rem;
  line-height:1.25rem;
  line-height:1;
  padding:.5rem
}

a.button.large,a.button[size=large],button.large,button[size=large]{
  font-size:1.5rem;
  line-height:2rem;
  line-height:1;
  padding:.75rem 1.5rem
}

a.button:hover,button:hover{
  cursor:pointer
}

a.button[disabled],a.button[disabled]:active,a.button[disabled]:hover,button[disabled],button[disabled]:active,button[disabled]:hover{
  cursor:not-allowed
}

a.button.fill,button.fill{
  width:100%
}

a.button>*,button>*{
  vertical-align:middle
}

a.button *,button *{
  pointer-events:none
}

a.button stencila-icon,button stencila-icon{
  --height:1.25em;
  --width:1.25em;
  padding-right:.25rem
}

a.button>img,a.button>svg,button>img,button>svg{
  display:inline-block;
  height:1.25em;
  padding-right:.25rem;
  width:1.25em
}

a.button.iconOnly,button.iconOnly{
  padding:.25rem
}

a.button.iconOnly>img,a.button.iconOnly>svg,a.button.iconOnly stencila-icon,button.iconOnly>img,button.iconOnly>svg,button.iconOnly stencila-icon{
  padding-right:0
}

a.button.iconOnly .label,button.iconOnly .label{
  clip:rect(0,0,0,0);
  border-width:0;
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  position:absolute;
  white-space:nowrap;
  width:1px
}

:host(::slotted(button)>*){
  vertical-align:middle
}

:host(::slotted(button)>img),:host(::slotted(button)>svg){
  display:inline-block;
  padding-right:.25rem
}

:host(::slotted(button)>img),:host(::slotted(button)>svg){
  height:1.25em;
  width:1.25em
}

:host([icon-only=true]::slotted(button)>img),:host([icon-only=true]::slotted(button)>svg){
  padding-right:0
}

a.button:not(.secondary),button:not(.secondary){
  --tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06);
  box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
  font-family:sans-serif;
  font-family:var(--font-family-body,sans-serif);
  font-weight:700;
  letter-spacing:.025em;
  text-transform:uppercase
}

a.button:not(.secondary):hover,button:not(.secondary):hover{
  background-color:#3c8455;
  background-color:var(--color-success-500,#3c8455);
  color:#fff;
  color:var(--color-stock,#fff)
}

a.button:not(.secondary)[disabled],a.button:not(.secondary)[disabled]:active,a.button:not(.secondary)[disabled]:hover,button:not(.secondary)[disabled],button:not(.secondary)[disabled]:active,button:not(.secondary)[disabled]:hover{
  cursor:not-allowed
}

a.button:not(.secondary).color-danger,button:not(.secondary).color-danger{
  background-color:#cf445e;
  background-color:var(--color-danger-500,#cf445e)
}

a.button:not(.secondary).color-danger:hover,button:not(.secondary).color-danger:hover{
  background-color:#8c1f38;
  background-color:var(--color-danger-700,#8c1f38)
}

a.button:not(.secondary).color-danger,button:not(.secondary).color-danger{
  color:#fff;
  color:var(--color-stock,#fff)
}

a.button:not(.secondary).color-danger[disabled],a.button:not(.secondary).color-danger[disabled]:active,a.button:not(.secondary).color-danger[disabled]:focus,a.button:not(.secondary).color-danger[disabled]:hover,button:not(.secondary).color-danger[disabled],button:not(.secondary).color-danger[disabled]:active,button:not(.secondary).color-danger[disabled]:focus,button:not(.secondary).color-danger[disabled]:hover{
  background-color:#ffa6ae;
  background-color:var(--color-danger-200,#ffa6ae);
  color:#e76276;
  color:var(--color-danger-400,#e76276)
}

a.button:not(.secondary).color-neutral,button:not(.secondary).color-neutral{
  background-color:#6e7591;
  background-color:var(--color-neutral-500,#6e7591)
}

a.button:not(.secondary).color-neutral:hover,button:not(.secondary).color-neutral:hover{
  background-color:#444a5e;
  background-color:var(--color-neutral-700,#444a5e)
}

a.button:not(.secondary).color-neutral,button:not(.secondary).color-neutral{
  color:#fff;
  color:var(--color-stock,#fff)
}

a.button:not(.secondary).color-neutral[disabled],a.button:not(.secondary).color-neutral[disabled]:active,a.button:not(.secondary).color-neutral[disabled]:focus,a.button:not(.secondary).color-neutral[disabled]:hover,button:not(.secondary).color-neutral[disabled],button:not(.secondary).color-neutral[disabled]:active,button:not(.secondary).color-neutral[disabled]:focus,button:not(.secondary).color-neutral[disabled]:hover{
  background-color:#b6bacf;
  background-color:var(--color-neutral-200,#b6bacf);
  color:#858ca8;
  color:var(--color-neutral-400,#858ca8)
}

a.button:not(.secondary).color-primary,button:not(.secondary).color-primary{
  background-color:#2069f2;
  background-color:var(--color-primary-500,#2069f2)
}

a.button:not(.secondary).color-primary:hover,button:not(.secondary).color-primary:hover{
  background-color:#1b5430;
  background-color:var(--color-success-700,#1b5430)
}

a.button:not(.secondary).color-primary,button:not(.secondary).color-primary{
  color:#fff;
  color:var(--color-stock,#fff)
}

a.button:not(.secondary).color-primary[disabled],a.button:not(.secondary).color-primary[disabled]:active,a.button:not(.secondary).color-primary[disabled]:focus,a.button:not(.secondary).color-primary[disabled]:hover,button:not(.secondary).color-primary[disabled],button:not(.secondary).color-primary[disabled]:active,button:not(.secondary).color-primary[disabled]:focus,button:not(.secondary).color-primary[disabled]:hover{
  background-color:#a7b3ff;
  background-color:var(--color-primary-200,#a7b3ff);
  color:#527fff;
  color:var(--color-primary-400,#527fff)
}

a.button:not(.secondary).color-success,button:not(.secondary).color-success{
  background-color:#3c8455;
  background-color:var(--color-success-500,#3c8455)
}

a.button:not(.secondary).color-success:hover,button:not(.secondary).color-success:hover{
  background-color:#1b5430;
  background-color:var(--color-success-700,#1b5430)
}

a.button:not(.secondary).color-success,button:not(.secondary).color-success{
  color:#fff;
  color:var(--color-stock,#fff)
}

a.button:not(.secondary).color-success[disabled],a.button:not(.secondary).color-success[disabled]:active,a.button:not(.secondary).color-success[disabled]:focus,a.button:not(.secondary).color-success[disabled]:hover,button:not(.secondary).color-success[disabled],button:not(.secondary).color-success[disabled]:active,button:not(.secondary).color-success[disabled]:focus,button:not(.secondary).color-success[disabled]:hover{
  background-color:#9dcaa9;
  background-color:var(--color-success-200,#9dcaa9);
  color:#589c6d;
  color:var(--color-success-400,#589c6d)
}

a.button:not(.secondary).color-warn,button:not(.secondary).color-warn{
  background-color:#dca435;
  background-color:var(--color-warn-500,#dca435)
}

a.button:not(.secondary).color-warn:hover,button:not(.secondary).color-warn:hover{
  background-color:#926b1b;
  background-color:var(--color-warn-700,#926b1b)
}

a.button:not(.secondary).color-warn,button:not(.secondary).color-warn{
  color:#926b1b;
  color:var(--color-warn-700,#926b1b)
}

a.button:not(.secondary).color-warn[disabled],a.button:not(.secondary).color-warn[disabled]:active,a.button:not(.secondary).color-warn[disabled]:focus,a.button:not(.secondary).color-warn[disabled]:hover,button:not(.secondary).color-warn[disabled],button:not(.secondary).color-warn[disabled]:active,button:not(.secondary).color-warn[disabled]:focus,button:not(.secondary).color-warn[disabled]:hover{
  background-color:#ffde88;
  background-color:var(--color-warn-200,#ffde88);
  color:#f6bc4d;
  color:var(--color-warn-400,#f6bc4d)
}

a.button:not(.secondary).color-stock,button:not(.secondary).color-stock{
  background-color:#fff;
  background-color:var(--color-stock,#fff);
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a)
}

a.button:not(.secondary).color-stock:hover,button:not(.secondary).color-stock:hover{
  background-color:#b6bacf;
  background-color:var(--color-neutral-200,#b6bacf);
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a)
}

a.button:not(.secondary).color-stock[disabled],a.button:not(.secondary).color-stock[disabled]:active,a.button:not(.secondary).color-stock[disabled]:hover,button:not(.secondary).color-stock[disabled],button:not(.secondary).color-stock[disabled]:active,button:not(.secondary).color-stock[disabled]:hover{
  background-color:#b6bacf;
  background-color:var(--color-neutral-200,#b6bacf);
  color:#6e7591;
  color:var(--color-neutral-500,#6e7591)
}

a.button.secondary,button.secondary{
  --tw-shadow:0 0 #0000;
  background-color:#fff;
  background-color:var(--color-stock,#fff);
  box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
  color:#2069f2;
  color:var(--color-primary-500,#2069f2);
  font-weight:700;
  letter-spacing:.025em;
  text-transform:uppercase
}

a.button.secondary:active,a.button.secondary:hover,button.secondary:active,button.secondary:hover{
  background-color:#2069f2;
  background-color:var(--color-primary-500,#2069f2);
  color:#fff;
  color:var(--color-stock,#fff)
}

a.button.secondary[disabled],a.button.secondary[disabled]:active,a.button.secondary[disabled]:hover,button.secondary[disabled],button.secondary[disabled]:active,button.secondary[disabled]:hover{
  background-color:#b6bacf;
  background-color:var(--color-neutral-200,#b6bacf);
  color:#6e7591;
  color:var(--color-neutral-500,#6e7591)
}

a.button.secondary.button.secondary.color-stock,a.button.secondary.secondary.color-stock,button.secondary.button.secondary.color-stock,button.secondary.secondary.color-stock{
  background-color:#fff;
  background-color:var(--color-stock,#fff);
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a)
}

a.button.secondary.button.secondary.color-stock:hover,a.button.secondary.secondary.color-stock:hover,button.secondary.button.secondary.color-stock:hover,button.secondary.secondary.color-stock:hover{
  background-color:#b6bacf;
  background-color:var(--color-neutral-200,#b6bacf);
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a)
}

a.button.secondary.button.secondary.color-stock[disabled],a.button.secondary.button.secondary.color-stock[disabled]:active,a.button.secondary.button.secondary.color-stock[disabled]:hover,a.button.secondary.secondary.color-stock[disabled],a.button.secondary.secondary.color-stock[disabled]:active,a.button.secondary.secondary.color-stock[disabled]:hover,button.secondary.button.secondary.color-stock[disabled],button.secondary.button.secondary.color-stock[disabled]:active,button.secondary.button.secondary.color-stock[disabled]:hover,button.secondary.secondary.color-stock[disabled],button.secondary.secondary.color-stock[disabled]:active,button.secondary.secondary.color-stock[disabled]:hover{
  background-color:#b6bacf;
  background-color:var(--color-neutral-200,#b6bacf);
  color:#6e7591;
  color:var(--color-neutral-500,#6e7591)
}

a.button.minimal,a.button.minimal:not(.secondary),button.minimal,button.minimal:not(.secondary){
  --tw-shadow:0 0 #0000;
  background-color:transparent;
  border-radius:.25rem;
  border-width:0;
  box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
  color:#2069f2;
  color:var(--color-primary-500,#2069f2);
  overflow:hidden;
  position:relative
}

a.button.minimal:before,a.button.minimal:not(.secondary):before,button.minimal:before,button.minimal:not(.secondary):before{
  content:"";
  display:block;
  height:100%;
  left:0;
  position:absolute;
  top:0;
  width:100%
}

a.button.minimal:focus,a.button.minimal:hover,a.button.minimal:not(.secondary):focus,a.button.minimal:not(.secondary):hover,button.minimal:focus,button.minimal:hover,button.minimal:not(.secondary):focus,button.minimal:not(.secondary):hover{
  background-color:transparent
}

a.button.minimal:focus:before,a.button.minimal:hover:before,a.button.minimal:not(.secondary):focus:before,a.button.minimal:not(.secondary):hover:before,button.minimal:focus:before,button.minimal:hover:before,button.minimal:not(.secondary):focus:before,button.minimal:not(.secondary):hover:before{
  background-color:rgba(0,0,0,.25);
  mix-blend-mode:darken
}

a.button.minimal.color-stock,a.button.minimal:not(.secondary).color-stock,button.minimal.color-stock,button.minimal:not(.secondary).color-stock{
  color:#fff;
  color:var(--color-stock,#fff)
}

a.button.minimal.color-key,a.button.minimal:not(.secondary).color-key,button.minimal.color-key,button.minimal:not(.secondary).color-key{
  color:#4a4a4a;
  color:var(--color-key,#4a4a4a)
}

a.button.minimal.color-danger,a.button.minimal:not(.secondary).color-danger,button.minimal.color-danger,button.minimal:not(.secondary).color-danger{
  color:#cf445e;
  color:var(--color-danger-500,#cf445e)
}

a.button.minimal.color-warn,a.button.minimal:not(.secondary).color-warn,button.minimal.color-warn,button.minimal:not(.secondary).color-warn{
  color:#dca435;
  color:var(--color-warn-500,#dca435)
}

a.button.minimal.color-success,a.button.minimal:not(.secondary).color-success,button.minimal.color-success,button.minimal:not(.secondary).color-success{
  color:#3c8455;
  color:var(--color-success-500,#3c8455)
}

a.button.minimal.color-primary,a.button.minimal:not(.secondary).color-primary,button.minimal.color-primary,button.minimal:not(.secondary).color-primary{
  color:#2069f2;
  color:var(--color-primary-500,#2069f2)
}

a.button.minimal.color-neutral,a.button.minimal:not(.secondary).color-neutral,button.minimal.color-neutral,button.minimal:not(.secondary).color-neutral{
  color:#6e7591;
  color:var(--color-neutral-500,#6e7591)
}

a.button.minimal.color-neutral:focus,a.button.minimal.color-neutral:hover,a.button.minimal:not(.secondary).color-neutral:focus,a.button.minimal:not(.secondary).color-neutral:hover,button.minimal.color-neutral:focus,button.minimal.color-neutral:hover,button.minimal:not(.secondary).color-neutral:focus,button.minimal:not(.secondary).color-neutral:hover{
  color:#1f212a;
  color:var(--color-neutral-900,#1f212a)
}

a.button.minimal:not(.secondary)[disabled],a.button.minimal:not(.secondary)[disabled]:active,a.button.minimal:not(.secondary)[disabled]:focus,a.button.minimal:not(.secondary)[disabled]:hover,a.button.minimal[disabled],a.button.minimal[disabled]:active,a.button.minimal[disabled]:focus,a.button.minimal[disabled]:hover,button.minimal:not(.secondary)[disabled],button.minimal:not(.secondary)[disabled]:active,button.minimal:not(.secondary)[disabled]:focus,button.minimal:not(.secondary)[disabled]:hover,button.minimal[disabled],button.minimal[disabled]:active,button.minimal[disabled]:focus,button.minimal[disabled]:hover{
  color:#000!important;
  color:var(--color-key,#000)!important;
  mix-blend-mode:soft-light;
  opacity:.65
}

a.button.minimal:not(.secondary)[disabled]:active:before,a.button.minimal:not(.secondary)[disabled]:before,a.button.minimal:not(.secondary)[disabled]:focus:before,a.button.minimal:not(.secondary)[disabled]:hover:before,a.button.minimal[disabled]:active:before,a.button.minimal[disabled]:before,a.button.minimal[disabled]:focus:before,a.button.minimal[disabled]:hover:before,button.minimal:not(.secondary)[disabled]:active:before,button.minimal:not(.secondary)[disabled]:before,button.minimal:not(.secondary)[disabled]:focus:before,button.minimal:not(.secondary)[disabled]:hover:before,button.minimal[disabled]:active:before,button.minimal[disabled]:before,button.minimal[disabled]:focus:before,button.minimal[disabled]:hover:before{
  background-color:#fff;
  background-color:var(--color-stock,#fff);
  mix-blend-mode:soft-light
}

a.button.minimal:not(.secondary)[disabled].color-key,a.button.minimal:not(.secondary)[disabled]:active.color-key,a.button.minimal:not(.secondary)[disabled]:focus.color-key,a.button.minimal:not(.secondary)[disabled]:hover.color-key,a.button.minimal[disabled].color-key,a.button.minimal[disabled]:active.color-key,a.button.minimal[disabled]:focus.color-key,a.button.minimal[disabled]:hover.color-key,button.minimal:not(.secondary)[disabled].color-key,button.minimal:not(.secondary)[disabled]:active.color-key,button.minimal:not(.secondary)[disabled]:focus.color-key,button.minimal:not(.secondary)[disabled]:hover.color-key,button.minimal[disabled].color-key,button.minimal[disabled]:active.color-key,button.minimal[disabled]:focus.color-key,button.minimal[disabled]:hover.color-key{
  mix-blend-mode:normal;
  opacity:.55
}

a.button.minimal:not(.secondary)[disabled].color-key:before,a.button.minimal:not(.secondary)[disabled]:active.color-key:before,a.button.minimal:not(.secondary)[disabled]:focus.color-key:before,a.button.minimal:not(.secondary)[disabled]:hover.color-key:before,a.button.minimal[disabled].color-key:before,a.button.minimal[disabled]:active.color-key:before,a.button.minimal[disabled]:focus.color-key:before,a.button.minimal[disabled]:hover.color-key:before,button.minimal:not(.secondary)[disabled].color-key:before,button.minimal:not(.secondary)[disabled]:active.color-key:before,button.minimal:not(.secondary)[disabled]:focus.color-key:before,button.minimal:not(.secondary)[disabled]:hover.color-key:before,button.minimal[disabled].color-key:before,button.minimal[disabled]:active.color-key:before,button.minimal[disabled]:focus.color-key:before,button.minimal[disabled]:hover.color-key:before{
  background-color:#fff;
  background-color:var(--color-stock,#fff);
  mix-blend-mode:normal
}

