@use "sass:map";
@use '~@angular/material' as mat;

@import "../common/base-styles.theme";

@mixin fab-theme($theme, $typo: null, $overrides: ()) {
  $config: mat.get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  $fab-values: (
          width: 3.2rem,
          height: 3.2rem,
          expand-list-right: .5rem,
          expand-list-bottom: .5rem,
          expand-list-top: calc(var(--list-items) * var(--height) * -1),
          background-color: mat.get-color-from-palette($primary, 700),
          margin-right: 0.8rem,
          margin-bottom: 0.8rem,
          expand-items-space-between: .4rem
  );

  $fab-values: map.merge($fab-values, $overrides);


  ql-fab {
    @include extract-style-map($fab-values);
    --list-items: 0;

    position: fixed;
    z-index: 999;
    right: 0;
    bottom: 0;

    .disabled {
      background: lightgrey;
      border-color: darkgrey;
      cursor: not-allowed;
      pointer-events: none;
    }

    .expand-list {


      .expand-list-items {
        bottom: var(--expand-list-bottom);
        top: var(--expand-list-top);
        right: var(--expand-list-right);

        > * {
          margin-bottom: var(--expand-items-space-between);
        }
      }
    }

    button {
      @include base-size-style($fab-values);
      background-color: var(--background-color);
      margin-right: var(--margin-right);
      margin-bottom: var(--margin-bottom);

      border-radius: 50%;
      @include mat.elevation(8);
    }
  }
}