/* Konkooran | minimal transparent back-to-top button */
#kkbtt-button,
#kkbtt-button *{
  box-sizing:border-box;
}

button#kkbtt-button{
  --kkbtt-progress:0deg;
  position:fixed;
  bottom:calc(var(--kkbtt-bottom-desktop) + env(safe-area-inset-bottom, 0px));
  z-index:9997;
  display:block;
  width:var(--kkbtt-size);
  height:var(--kkbtt-size);
  min-width:var(--kkbtt-size);
  min-height:var(--kkbtt-size);
  max-width:var(--kkbtt-size);
  max-height:var(--kkbtt-size);
  aspect-ratio:1/1;
  margin:0;
  padding:0;
  border:0 !important;
  border-radius:50%;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  overflow:hidden;
  isolation:isolate;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(12px);
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
}

/* Only the very thin progress ring is painted; the centre remains transparent. */
button#kkbtt-button::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:50%;
  background:conic-gradient(
    var(--kkbtt-primary) 0deg,
    var(--kkbtt-primary) var(--kkbtt-progress),
    rgba(8,127,133,.18) var(--kkbtt-progress),
    rgba(8,127,133,.18) 360deg
  );
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  mask:radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  pointer-events:none;
}

button#kkbtt-button.kkbtt-button--no-progress::before{
  background:none;
  -webkit-mask:none;
  mask:none;
  border:2px solid rgba(8,127,133,.28);
}

button#kkbtt-button.kkbtt-button--left{left:var(--kkbtt-side-desktop);right:auto;}
button#kkbtt-button.kkbtt-button--right{right:var(--kkbtt-side-desktop);left:auto;}

button#kkbtt-button.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

button#kkbtt-button.is-visible:hover{
  transform:translateY(-3px);
}
button#kkbtt-button.is-visible:active{transform:scale(.96);}
button#kkbtt-button:focus-visible{
  outline:3px solid rgba(8,127,133,.60);
  outline-offset:3px;
}

button#kkbtt-button .kkbtt-button__inner{
  position:absolute;
  inset:4px;
  z-index:1;
  display:grid;
  place-items:center;
  border:0 !important;
  border-radius:50%;
  background:transparent !important;
  background-color:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}

button#kkbtt-button .kkbtt-button__arrow{
  position:relative;
  display:block;
  top:-1px;
  color:var(--kkbtt-icon) !important;
  font-family:Arial, sans-serif;
  font-size:calc(var(--kkbtt-size) * .51);
  font-weight:800;
  line-height:1;
  /* Highlight improves contrast on dark and light content; no opaque disk. */
  text-shadow:0 1px 2px rgba(255,255,255,.94), 0 0 3px rgba(255,255,255,.72);
  transition:color .2s ease;
}
button#kkbtt-button:hover .kkbtt-button__arrow{
  color:var(--kkbtt-hover) !important;
}

@media(max-width:600px){
  button#kkbtt-button{
    bottom:calc(var(--kkbtt-bottom-mobile) + env(safe-area-inset-bottom, 0px));
  }
  button#kkbtt-button.kkbtt-button--left{
    left:var(--kkbtt-side-mobile);
    right:auto;
  }
  button#kkbtt-button.kkbtt-button--right{
    right:var(--kkbtt-side-mobile);
    left:auto;
  }
}
@media(prefers-reduced-motion:reduce){
  button#kkbtt-button,
  button#kkbtt-button .kkbtt-button__arrow{transition:none;}
}
@media print{button#kkbtt-button{display:none !important;}}