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

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

@mixin ql-buttons-common($primary) {
  transition-property: border, box-shadow, width;
  transition-duration: 150ms;
  transition-timing-function: linear;

  border: .1rem solid mat.get-color-from-palette($primary, 400, .7);
  outline: none;
  border-radius: .2rem;

  &:hover {
    border: .1rem solid mat.get-color-from-palette($primary, 700, .7);
    box-shadow: 0 0 .15rem .02rem mat.get-color-from-palette($primary, 300, 1);
  }

}

@mixin ql-button-theme($theme, $overrides: ()) {
  @keyframes spinner-spin {
    0% {
      transform: rotateZ(0deg);
    }

    100% {
      transform: rotateZ(360deg);
    }

  }

  $button-values: (
          width: 4.8rem,
          height: 3.2rem,
          spinner-width: 1.6rem
  );

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

  $config: mat.get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  @include mat.ripple();

  .ql-button-spinner {
    animation: spinner-spin 2s linear infinite;
    transform-origin: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }


  ql-button {
    @include extract-style-map($button-values);

    .ql-button {
      @include base-size-style($button-values);
      @include base-color-style($theme);
      @include ql-buttons-common($primary);
      box-sizing: content-box;

      .text {
        justify-content: center;
        align-items: center;
        display: flex;
        flex-flow: row;
        width: var(--width);
        height: var(--height)
      }

      .extra {
        flex: 1 1 0;

      }
    }

    .ql-fab-button {
      // For fab buttons we use height twice intentionally as width and height need to be the same
      width: ql-get-value(height, $button-values);
      height: ql-get-value(height, $button-values);

      @include base-color-style($theme);
      @include ql-buttons-common($primary);
      @include mat.elevation(4);

      border-radius: 50%;
    }

    &.with-extra {
      .ql-fab-button {
        .text {
          width: auto;
          height: auto;
        }
        .extra {
          flex: 1 1 100%;
          width: var(--width);
          height: 100%;
        }
      }

      .ql-button {
        width: calc(var(--width) + var(--spinner-width));
      }

      .ql-button .text {
        width: auto;
        height: auto;
        flex: 1 1 70%;
      }

      .ql-button .extra {
        flex: 1 1 30%;
        width: var(--spinner-width);
      }
    }
  }

}