/* floating-action-buttons */
@media all {

  .page-floating-action-buttons {

    --color-turquoise: oklch(66.43% 0.148 238.34);
    --color-purple: oklch(37.76% 0.133 313.57);
    --color-green: oklch(0.684 0.164 129.15);
    --color-green: oklch(68.4% 0.164 129.15);
    --color-white: oklch(1 0 0);

    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9;

    ul {
      list-style: none;
      padding: unset;
      margin: unset;
    }

    ul ,
    a {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .25rem;
    }

    .floating-action-buttons-element {
      height: auto;
      width: 8rem;
      padding: .25rem;
      box-shadow: unset !important;

      &:is(:focus-visible, :hover) .floating-action-buttons-element-icon::after {
        transform: rotate(-18deg) scale(1.1);
      }
    }

    .floating-action-buttons-element[data-icon*="dios-"]:is(:focus-visible, :hover) {
      background: var(--color-purple);
    }

    .floating-action-buttons-element-icon::after {
      display: block;
      height: 2rem;
      width: 2rem;
      filter: invert(100);
      transition: .175s cubic-bezier(.46,-0.17,.82,2.47);
    }

    .floating-action-buttons-element-text {
      font-size: 0.875rem;
      line-height: 1.125rem;
      font-weight: 500;
      hyphens: auto;
      color: var(--color-white);
    }

    .floating-action-buttons-element[data-icon="dios-herz"] {
      background: var(--color-green);

      .floating-action-buttons-element-icon::after {
        content: url("../Icons/icon-dios-herz.svg");
      }
    }

    .floating-action-buttons-element[data-icon="dios-rakete"] {
      background: var(--color-turquoise);

      .floating-action-buttons-element-icon::after {
        content: url("../Icons/icon-dios-rakete.svg");
      }
    }

    @media (min-width: 72.5rem) {

      top: 50%;
      right: 0;
      bottom: unset;
      left: unset;
      transform: translateY(-50%);

      .floating-action-buttons-element {
        height: 6.25rem;
        width: 6.25rem;
      }

      ul ,
      a {
        flex-direction: column;
      }

      .floating-action-buttons-element-text {
        text-align: center;
      }

    }

  }

}