@use '../mixins' as mixins;
@import '../colors';

/* stylelint-disable selector-class-pattern */
@mixin ay11-theme() {
  .mat-mdc-icon-button,
  .mat-mdc-button,
  .mat-mdc-checkbox,
  .mat-mdc-raised-button {
    &:focus-visible {
      @include mixins.rounded-outline;
    }

    .mat-ripple,
    .mdc-icon-button__ripple {
      display: none;
    }

    // TODO check if still applies
    &.cdk-keyboard-focused {
      .mat-button-focus-overlay {
        display: none;
      }
    }

    .mdc-checkbox__native-control:focus-visible {
      & ~ .mat-mdc-checkbox-ripple {
        @include mixins.rounded-outline;

        height: 22px;
        width: 22px;
        left: calc(50% - 11px);
        top: calc(50% - 10px);
        display: block;
      }

      & ~ .mdc-checkbox__background {
        opacity: 0.57;
      }
    }
  }

  .mdc-checkbox__ripple {
    display: none;
  }

  .mat-mdc-form-field-focus-overlay {
    --mat-form-field-state-layer-color: transparent;
  }

  .mdc-menu-surface.mat-mdc-autocomplete-panel:is(div),
  .mdc-menu-surface.mat-mdc-select-panel:is(div) {
    padding: 0;
  }

  .adf-content-node-selector-content-list .adf-datatable-list .adf-datatable-selected.mat-icon > svg {
    fill: var(--theme-blue-button-color);
  }

  .mat-mdc-list-base .mat-mdc-list-option {
    .mdc-list-item__content {
      @include mixins.rounded-border(transparent);
    }

    &:focus-visible {
      background-color: var(--theme-white-background);

      .mdc-list-item__content {
        @include mixins.rounded-border;
      }
    }
  }

  .adf-search-user-button.mat-mdc-button,
  .app-search-button {
    line-height: 36px;

    @include mixins.rounded-border(transparent);

    &:focus-visible {
      outline: none;

      @include mixins.rounded-border;
    }
  }

  .mat-mdc-menu-content {
    .mat-mdc-menu-item {
      .mat-ripple {
        display: none;
      }

      @include mixins.rounded-border(transparent);

      &:focus-visible {
        @include mixins.rounded-border;

        background-color: var(--theme-white-background);
      }

      &.cdk-keyboard-focused:not([disabled]) {
        background-color: var(--theme-white-background);
      }
    }
  }

  .adf-toolbar-title {
    padding: 2px;
  }

  .mat-mdc-option {
    &.cdk-keyboard-focused {
      .mat-mdc-option-ripple {
        @include mixins.rounded-outline;
      }
    }
  }

  .mat-mdc-slide-toggle .mdc-form-field {
    button.mdc-switch.mdc-switch--selected,
    button.mdc-switch.mdc-switch--unselected {
      .mdc-switch__handle {
        width: 15px;
        height: 15px;
        transform: translate(20%, 50%);
        background-color: #484a4d;
      }
    }

    .mdc-switch .mdc-switch__track {
      border-radius: 15px;
      height: 20px;
    }

    .mdc-switch__handle-track {
      top: -15px;
    }

    .mdc-switch__ripple {
      display: none;
    }
  }

  .mat-mdc-slide-toggle.mat-primary.mat-mdc-slide-toggle-checked:not(.mat-disabled) .mdc-form-field .mdc-switch {
    .mdc-switch__track::after {
      background-color: var(--theme-blue-button-color);
    }

    .mdc-switch__shadow {
      background-color: var(--theme-primary-color-default-contrast);
    }
  }

  .mat-mdc-slide-toggle.cdk-keyboard-focused .mdc-form-field .mdc-switch .mdc-switch__track {
    outline: 2px solid var(--theme-blue-button-color);
  }

  .mat-mdc-outlined-button,
  .mat-mdc-unelevated-button {
    &.cdk-keyboard-focused {
      .mat-mdc-button-ripple.mat-ripple {
        outline: 2px solid var(--theme-blue-button-color);
        inset: -4px;
      }
    }
  }

  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content {
    outline: 2px solid var(--theme-datetimepicker-cell-focus-border);
  }

  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content:not(.mat-datetimepicker-calendar-body-selected) {
    background-color: var(--theme-datetimepicker-cell-background);
  }

  .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
    background-color: var(--theme-datetimepicker-selected-date-background);
  }

  .mat-datetimepicker-calendar-body-active .mat-datetimepicker-calendar-body-cell-content.mat-datetimepicker-calendar-body-selected {
    background-color: var(--theme-about-panel-border-color);
    color: var(--theme-datetimepicker-font-color);
  }

  .mat-expansion-panel .mat-expansion-panel-header {
    box-sizing: border-box;
    border: 2px solid transparent;

    .mat-mdc-button-base.mat-mdc-button {
      outline: none;

      @include mixins.rounded-border(transparent);

      &:focus-visible {
        @include mixins.rounded-border;

        background-color: var(--theme-white-background);
      }
    }

    &.cdk-keyboard-focused:not([aria-disabled='true']) {
      background-color: var(--theme-white-background);

      @include mixins.rounded-border;
    }
  }

  .adf-error-snackbar {
    background-color: #ba1b1b;

    .mat-mdc-simple-snack-bar,
    .mat-mdc-snack-bar-action {
      color: var(--theme-white-background);
    }
  }

  .mat-mdc-button-base {
    &.adf-filter-button {
      margin-left: -2px;
    }
  }

  .adf-pagination {
    &__perpage-block,
    &__actualinfo-block {
      /* stylelint-disable-next-line no-descending-specificity */
      .mat-mdc-icon-button {
        left: 3px;

        &:focus-visible {
          outline: none;
        }

        &.cdk-keyboard-focused {
          .mat-icon {
            @include mixins.rounded-outline;
          }
        }
      }
    }
  }
}