@use "@angular/material" as mat;
// stylelint-disable declaration-no-important

@mixin sc-mat-overrides() {
  //*
  //* Buttons
  //*

  //? set border-radius via variable
  .mat-button,
  .mat-flat-button,
  .mat-stroked-button,
  .mat-raised-button {
    border-radius: $button-border-radius !important;
  }

  //? text formating
  .mat-button-base {
    text-transform: uppercase;
    letter-spacing: 1.3px;
    // letter-spacing: 0.089285714rem;
  }

  //? remove fixed width
  ::ng-deep .mat-form-field .mat-form-field-infix {
    width: 100% !important;
  }

  //? sizing
  .mat-button-inline-form.mat-button-base {
    height: 54px !important;

    &.mat-button-base {
      margin-top: 2px;
    }
  }

  //? Buttons with Icon AND Label (customization of mat-button) — .mat-button-icon-label scales the Icon to 20dp and changes spacing inside Button

  .mat-button-icon-label {
    padding: 0 16px 0 12px !important;

    .mat-button-wrapper {
      display: flex !important;
      align-items: center !important;
      gap: 8px;
    }

    .mat-icon {
      --mat-icon-size: 20;
    }
  }

  .mat-button-dropdown {
    padding: 0 8px 0 16px !important;
  }

  .mat-icon-button-dropdown.mat-mini-fab {
    border-radius: $button-border-radius !important;
    width: 36px !important;
    height: 36px !important;

    .mat-button-wrapper {
      padding: 0;
    }
  }

  //* Button Group

  .mat-button-toggle-group-appearance-standard {
    border-radius: $button-border-radius !important;
  }

  //*
  //* Form Fields
  //*

  //? set border-radius via variable

  // Fill form field
  .mat-form-field-appearance-fill {
    .mat-form-field-flex {
      border-radius: $form-field-border-radius $form-field-border-radius 0 0 !important;
      padding-left: $form-field-border-radius !important;
    }

    .mat-form-field-subscript-wrapper {
      padding-left: $form-field-border-radius !important;
    }
  }

  // Outline form field
  .mat-form-field-appearance-outline {
    .mat-form-field-outline-start {
      border-radius: $form-field-border-radius 0 0 $form-field-border-radius !important;
      min-width: $form-field-border-radius !important;
    }

    .mat-form-field-outline-end {
      border-radius: 0 $form-field-border-radius $form-field-border-radius 0 !important;
      min-width: $form-field-border-radius !important;
    }

    .mat-form-field-flex,
    .mat-form-field-subscript-wrapper {
      padding-left: calc(#{$form-field-border-radius} + 0.25em) !important;
    }
  }

  //? Removing Padding from Form-Fields (only needed if hint-text is displayed: in this case, add .mat-form-field-hint-text)

  .mat-form-field-appearance-outline .mat-form-field-wrapper {
    padding: 0;
    margin: 2px 0 0 0 !important;
  }

  .mat-form-field-hint-text .mat-form-field-wrapper {
    padding-bottom: 1.34375em;
  }

  .mat-form-field-disabled {
    cursor: not-allowed;
    * {
      cursor: not-allowed;
    }
    &.mat-form-field-appearance-outline .mat-form-field-outline-end,
    &.mat-form-field-appearance-outline .mat-form-field-outline-gap,
    &.mat-form-field-appearance-outline .mat-form-field-outline-start {
      border-width: 1px !important;
      // color: #e0e0e0;
    }
  }

  //* fixed height for form fields (except textarea and chips and form fields with appaerance "legacy")

  .mat-form-field-appearance-fill .mat-form-field-flex,
  .mat-form-field-appearance-outline .mat-form-field-flex {
    height: 57px !important;
  }

  .sc-input--textarea .mat-form-field-flex {
    height: 100% !important;
  }

  sc-chips-autocomplete .mat-form-field-appearance-fill .mat-form-field-flex,
  sc-chips-autocomplete .mat-form-field-appearance-outline .mat-form-field-flex {
    height: 100% !important;
  }

  .mat-form-field-appearance-legacy .mat-form-field-flex,
  .mat-form-field-appearance-standard .mat-form-field-flex {
    height: initial !important;
  }

  //* Form Field Text Alignment
  //*
  //* Classes can be placed on top level of component

  .input-text {
    &-left .mat-input-element {
      text-align: left !important;
    }

    &-center .mat-input-element {
      text-align: center !important;
    }

    &-right .mat-input-element {
      text-align: right !important;
    }
  }

  .label-text {
    &-left .mat-form-field-label {
      text-align: left !important;
    }

    &-center .mat-form-field-label {
      text-align: center !important;
    }

    &-right .mat-form-field-label {
      text-align: right !important;
    }
  }

  .input-label-text {
    &-left .mat-form-field-infix {
      text-align: left !important;
    }

    &-center .mat-form-field-infix {
      text-align: center !important;
    }

    &-right .mat-form-field-infix {
      text-align: right !important;
    }
  }

  //*
  //* Lists
  //*

  .mat-list-base {
    padding-bottom: 8px;
  }

  .mat-list-base[dense] {
    padding-bottom: 4px;
  }

  //*
  //* Dialog
  //*

  //? if class "sc-dialog--higher-stack-position" is somewhere inside a dialog, the container gets higher z-index
  .cdk-overlay-container,
  .cdk-global-overlay-wrapper {
    &:has(.sc-dialog--higher-stack-position) {
      z-index: 1100;
    }

    //? when dialog is open = increase z-index of floating elements like sc-select-drop-down oder mat-menu
    &:has(.sc-dialog--higher-stack-position):has(.cdk-overlay-connected-position-bounding-box)
      .cdk-overlay-connected-position-bounding-box {
      z-index: 1100;
    }
  }

  // Reset
  .sc-dialog__cdk-overlay-pane-width-reset {
    width: auto !important;
    max-width: none !important;
    min-height: auto !important;
    padding: 16px;
  }

  .mat-dialog-container,
  .mat-dialog-title,
  .mat-dialog-content,
  .mat-dialog-actions {
    margin: 0 !important;
    padding: 0 !important;
  }

  .mat-dialog-actions {
    min-height: auto !important;
  }

  // styling
  .mat-dialog-title {
    // @include mat.typography-level($config, subheading-2);
    font-family: IBM Plex Sans;
    font-size: 16px;
    line-height: 28px;
    padding: calc(#{$dialog-padding} / 2) $dialog-padding !important;
    border-bottom: 1px solid;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mat-dialog-content {
    padding: $dialog-padding !important;
    max-height: 80vh !important;
  }

  .mat-dialog-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 8px !important;
    border-top: 1px solid;

    & > button {
      flex: 0 0 auto;
    }
  }

  //*
  //* Accordion / Expansion Panel
  //*

  .mat-expansion-panel,
  .mat-accordion .mat-expansion-panel {
    border-radius: $card-border-radius;
  }

  .mat-accordion.mat-accordion--no-radius .mat-expansion-panel {
    border-radius: 0 !important;
  }

  .mat-accordion .mat-expansion-panel:not(.mat-expanded),
  .mat-accordion .mat-expansion-panel:not(.mat-expansion-panel-spacing) {
    border-radius: 0 !important;
  }

  .mat-accordion .mat-expansion-panel:first-of-type {
    border-top-right-radius: $card-border-radius !important;
    border-top-left-radius: $card-border-radius !important;
  }

  .mat-accordion .mat-expansion-panel:last-of-type {
    border-bottom-right-radius: $card-border-radius !important;
    border-bottom-left-radius: $card-border-radius !important;
  }

  //*
  //* TABS
  //*

  .mat-tab,
  .mat-tab-link {
    &-label {
      min-width: 24px !important;
      //todo: get type values via mixin
      text-transform: uppercase;
      letter-spacing: 0.082rem;
    }

    &-group:not(.mat-tab-group-dynamic-height) {
      height: 100% !important;

      .mat-tab-body-wrapper {
        height: 100% !important;

        .tab-content-wrapper {
          height: 100% !important;
        }
      }
    }
  }

  .mat-tab-group--sticky-header {
    --mat-tab-group-sticky-header-top: 0px;
    .mat-tab-header {
      position: sticky;
      top: var(--mat-tab-group-sticky-header-top);
      z-index: 100;
    }
  }

  //* put additional buttons in mat-tab-header
  //? must wrap the mat-tabs-group
  .mat-tabs-action-overlay {
    &__wrapper {
      //? must be relative for add-button beside mat-tab-header
      position: relative;
      height: 100%;

      .mat-tab-header {
        margin-right: 48px !important;
      }

      &:has(.mat-tabs-action-overlay__button + .mat-tabs-action-overlay__button) {
        .mat-tabs-action-overlay__overlay {
          display: flex;
          width: 96px;
        }

        .mat-tab-header {
          margin-right: 96px !important;
        }
      }
    }

    &__overlay {
      position: absolute;
      top: 0;
      right: 0;
      width: 48px;
      height: 49px;
      border-left: 1px solid;
      border-bottom: 1px solid;
      overflow: hidden; //? also weird
      z-index: 200;
    }

    &__button {
      width: 48px !important;
      height: 48px !important;
      border-radius: 0 !important;
    }
  }

  //*
  //* MISC
  //*

  //* TOOLTIP

  .mat-tooltip {
    white-space: pre-line !important;
  }
}

.mat-badge {
  &-content {
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  &-large {
    .mat-badge-content {
      font-size: 16px !important;
    }
  }

  &--3-digits {
    &.mat-badge-medium {
      .mat-badge-content {
        width: 32px !important;
        border-radius: 22px !important;
      }

      &.mat-badge-after {
        .mat-badge-content {
          right: -32px !important;
        }

        &.mat-badge-overlap {
          .mat-badge-content {
            right: -16px !important;
          }
        }
      }

      &.mat-badge-before {
        .mat-badge-content {
          left: -32px !important;
        }

        &.mat-badge-overlap {
          .mat-badge-content {
            left: -16px !important;
          }
        }
      }
    }

    &.mat-badge-large {
      .mat-badge-content {
        width: 40px !important;
        border-radius: 28px !important;
      }

      &.mat-badge-after {
        .mat-badge-content {
          right: -40px !important;
        }

        &.mat-badge-overlap {
          .mat-badge-content {
            right: -20px !important;
          }
        }
      }

      &.mat-badge-before {
        .mat-badge-content {
          left: -40px !important;
        }

        &.mat-badge-overlap {
          .mat-badge-content {
            left: -20px !important;
          }
        }
      }
    }

    &.mat-badge-small {
      .mat-badge-content {
        width: 24px !important;
        border-radius: 16px !important;
      }

      &.mat-badge-after {
        .mat-badge-content {
          right: -24px !important;
        }

        &.mat-badge-overlap {
          .mat-badge-content {
            right: -16px !important;
          }
        }
      }

      &.mat-badge-before {
        .mat-badge-content {
          left: -24px !important;
        }

        &.mat-badge-overlap {
          .mat-badge-content {
            left: -16px !important;
          }
        }
      }
    }
  }
}