@use 'sass:math';
@use '@angular/material/core/style/variables';

$name-prefix: 'ngx-virtual-select-field';
$option-prefix: 'ngx-virtual-select-field-option';

@mixin inherit-material-theme() {
  :root {
    --#{$name-prefix}-trigger-text-color: var(
      --mat-select-enabled-trigger-text-color
    );
    --#{$name-prefix}-trigger-text-color--disabled: var(
      --mat-select-disabled-trigger-text-color
    );
    --#{$name-prefix}-trigger-font-family: var(--mat-select-trigger-text-font);
    --#{$name-prefix}-trigger-line-height: var(
      --mat-select-trigger-text-line-height
    );
    --#{$name-prefix}-trigger-font-size: var(--mat-select-trigger-text-size);
    --#{$name-prefix}-trigger-font-weight: var(
      --mat-select-trigger-text-weight
    );
    --#{$name-prefix}-trigger-letter-spacing: var(
      --mat-select-trigger-text-tracking
    );

    --#{$name-prefix}-placeholder-text-color: var(
      --mat-select-placeholder-text-color
    );
    --#{$name-prefix}-placeholder-transition: color
      variables.$swift-ease-out-duration
      math.div(variables.$swift-ease-out-duration, 3)
      variables.$swift-ease-out-timing-function;

    --#{$name-prefix}-arrow-size: 5px;
    --#{$name-prefix}-arrow-color--enabled: var(
      --mat-select-enabled-arrow-color
    );
    --#{$name-prefix}-arrow-color--focused: var(
      --mat-select-focused-arrow-color
    );
    --#{$name-prefix}-arrow-color--invalid: var(
      --mat-select-invalid-arrow-color
    );
    --#{$name-prefix}-arrow-color--disabled: var(
      --mat-select-disabled-arrow-color
    );

    --#{$name-prefix}-panel-background: var(
      --mat-select-panel-background-color
    );
    --#{$name-prefix}-panel-box-shadow: var(
      --mat-select-container-elevation-shadow
    );
    --#{$name-prefix}-panel-border-radius: 4px;
    --#{$name-prefix}-panel-list-wrapper-padding: 8px;
  }

  :root {
    --#{$option-prefix}-color: var(--mat-option-label-text-color);
    --#{$option-prefix}-font-family: var(--mat-option-label-text-font);
    --#{$option-prefix}-line-height: var(--mat-option-label-text-line-height);
    --#{$option-prefix}-font-size: var(--mat-option-label-text-size);
    --#{$option-prefix}-letter-spacing: var(--mat-option-label-text-tracking);
    --#{$option-prefix}-font-weight: var(--mat-option-label-text-weight);

    --#{$option-prefix}-selected-state-label-text-color: var(
      --mat-option-selected-state-label-text-color
    );
    --#{$option-prefix}-background-color--active: var(
      --mat-option-focus-state-layer-color
    );
    --#{$option-prefix}-background-color--hover: var(
      --mat-option-hover-state-layer-color
    );
    --#{$option-prefix}-background-color--selected: var(
      --mat-option-selected-state-layer-color
    );

    --#{$option-prefix}-disabled-state-opacity: 0.38;
    --#{$option-prefix}-gap: 8px;
    --#{$option-prefix}-padding: 0 16px;
  }

  @include overlay-position-styles();
}

@mixin create-default-theme() {
  :root {
    --#{$name-prefix}-trigger-text-color: inherit;
    --#{$name-prefix}-trigger-text-color--disabled: grey;
    --#{$name-prefix}-trigger-font-family: inherit;
    --#{$name-prefix}-trigger-line-height: inherit;
    --#{$name-prefix}-trigger-font-size: inherit;
    --#{$name-prefix}-trigger-font-weight: inherit;
    --#{$name-prefix}-trigger-letter-spacing: inherit;

    --#{$name-prefix}-placeholder-text-color: inherit;
    --#{$name-prefix}-placeholder-transition: color 400ms math.div(400ms, 3)
      cubic-bezier(0.25, 0.8, 0.25, 1);

    --#{$name-prefix}-arrow-size: 5px;
    --#{$name-prefix}-arrow-color--enabled: inherit;
    --#{$name-prefix}-arrow-color--focused: blue;
    --#{$name-prefix}-arrow-color--invalid: red;
    --#{$name-prefix}-arrow-color--disabled: grey;

    --#{$name-prefix}-panel-background: black;
    --#{$name-prefix}-panel-box-shadow: none;
    --#{$name-prefix}-panel-border-radius: 4px;
    --#{$name-prefix}-panel-list-wrapper-padding: 8px;
  }

  :root {
    --#{$option-prefix}-color: inherit;
    --#{$option-prefix}-font-family: inherit;
    --#{$option-prefix}-line-height: inherit;
    --#{$option-prefix}-font-size: inherit;
    --#{$option-prefix}-letter-spacing: inherit;
    --#{$option-prefix}-font-weight: inherit;

    --#{$option-prefix}-selected-state-label-text-color: blue;
    --#{$option-prefix}-background-color--active: darkgrey;
    --#{$option-prefix}-background-color--hover: grey;
    --#{$option-prefix}-background-color--selected: grey;

    --#{$option-prefix}-disabled-state-opacity: 0.5;
    --#{$option-prefix}-gap: 8px;
    --#{$option-prefix}-padding: 0 16px;
  }

  @include overlay-position-styles();
}

@mixin overlay-position-styles() {
  .#{$name-prefix} {
    &-panel {
      border-bottom-left-radius: var(--#{$name-prefix}-panel-border-radius);
      border-bottom-right-radius: var(--#{$name-prefix}-panel-border-radius);
    }

    &-overlay--above {
      .#{$name-prefix}-panel {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        border-top-left-radius: var(--#{$name-prefix}-panel-border-radius);
        border-top-right-radius: var(--#{$name-prefix}-panel-border-radius);
      }
    }
  }
}