packages/styles/scss/components/_fab.scss

   1 @use "sass:map";
   2
   3 .fab {
   4         &#{&} {
   5                 // Specificity -_-v
   6                 position: fixed;
   7                 inset-block-end: em(64);
   8                 inset-inline-end: var(--right, 1.6em);
   9                 z-index: map.get($z-indexes, 'floating-action-buttons');
  10                 block-size: rem(56);
  11                 inline-size: rem(56);
  12                 border-radius: 50%;
  13                 padding: 0.5em;
  14                 box-shadow: var(--shadow-lifted);
  15                 transition: inset-block-end 0.5s easing(ease-out-quart);
  16
  17                 &--inBackground {
  18                         z-index: 0;
  19                 }
  20
  21                 @include media('>small') {
  22                         inset-block-end: 1em;
  23                 }
  24         }
  25 }