@layer theme, base, components, utilities;
@layer components {
  :root, :host {
    --local-tasks-floating-block-bottom:  30%;
    --local-tasks-floating-block-right: 0;
    --local-tasks-floating-block-width: 100px;
    --local-tasks-floating-block-zindex: 1000;
    --local-tasks-floating-block-links-padding-y: 1rem;
    --local-tasks-floating-block-links-padding-x: 1.5rem;
  }
  .local-tasks-floating-block {
    bottom: var(--local-tasks-floating-block-bottom);
    right: var(--local-tasks-floating-block-right);
    width: var(--local-tasks-floating-block-width);
    z-index: var(--local-tasks-floating-block-zindex);
    cursor: pointer;
    opacity: .3;
    transition: opacity 0.25s ease-in-out;
  }

  .local-tasks-floating-block:focus,
  .local-tasks-floating-block:focus-within ,
  .local-tasks-floating-block:hover {
    opacity: 1;
  }
}
