@use "sass:math";
@use "sass:color";

@mixin dx-editor-content-wrapper() {
  display: flex;
  flex-grow: 1;
  position: relative;
  align-items: baseline;
}

@mixin dx-state(
  $label-font-size,
  $label-offset-y,
  $label-height,
  $label-backdrop-bg
) {
  .dx-label {
    border-top-width: 0;

    span {
      transform: translate(0, -$label-offset-y);
      font-size: $label-font-size;
      margin-top: 0;
      top: 0;
      height: $label-height;
      line-height: normal;
    }

    &::before {
      background-color: $label-backdrop-bg;
    }
  }

  &.dx-textarea  {
    .dx-label {
      span {
        top: 0;
        margin-top: 0;
      }
    }
  }
}

@mixin dx-state-empty(
  $borderWidth,
  $texteditor-label-transition,
  $label-font-size,
  $label-height,
  $label-margin-top,
  $texteditor-input-top-padding
) {
  .dx-label {
    padding: 0 2px;
    border-top-width: $borderWidth;

    span {
      transition: $texteditor-label-transition;
      transform: translate(0, 0);
      font-size: $label-font-size;
      top: 50%;
      margin-top: $label-margin-top;
      height: $label-height;
      line-height: normal;
    }

    &::before {
      background-color: transparent;
    }
  }

  &.dx-textarea  {
    .dx-label {
      span {
        top: $texteditor-input-top-padding;
        margin-top: 0;
      }
    }
  }
}

@mixin dx-state-border-width($borderWidth) {
  .dx-label {
    border-top-width: 0;
    border-bottom-width: $borderWidth;
  }

  .dx-label-before {
    border-width: $borderWidth;
    border-inline-end-width: 0;
  }

  .dx-label-after {
    border-width: $borderWidth;
    border-inline-start-width: 0;
  }
}

@mixin dx-state-border-color($borderColor, $border-bottom-color) {
  .dx-label {
    border-color: $borderColor;
    border-bottom-color: $border-bottom-color;
  }

  .dx-label-before {
    border-color: $borderColor;
    border-bottom-color: $border-bottom-color;
  }

  .dx-label-after {
    border-color: $borderColor;
    border-bottom-color: $border-bottom-color;
  }
}

@mixin dx-state-border-style($borderStyle) {
  .dx-label {
    border-style: $borderStyle;
  }

  .dx-label-before {
    border-style: $borderStyle;
  }

  .dx-label-after {
    border-style: $borderStyle;
  }
}

@mixin dx-editor-outlined(
  $texteditor-input-border-radius,
  $texteditor-label-font-size,
  $label-border-width,
  $label-active-border-width,
  $label-readonly-border-style,
  $label-active-height,
  $label-empty-height,
  $label-offset-y,
  $label-offset-y-outside,
  $label-backdrop-offset-y,
  $label-before-min-width,
  $label-after-min-width,
  $label-backdrop-bg,
  $texteditor-border,
  $texteditor-border-color,
  $texteditor-border-bottom-color,
  $texteditor-disabled-color,
  $texteditor-readonly-color,
  $texteditor-hover-border-color,
  $texteditor-hover-border-bottom-color,
  $texteditor-focused-border-color,
  $texteditor-focused-border-bottom-color,
  $texteditor-invalid-faded-border-color,
  $texteditor-invalid-focused-border-color,
  $texteditor-label-transition,
  $texteditor-font-size,
  $texteditor-input-top-padding,
  $label-margin-top-diff,
  $texteditor-label-outside-font-size,
  $texteditor-label-outside-height,
) {
  .dx-editor-outlined {
    .dx-texteditor-label {
      inset: 0;
    }

    .dx-label {
      padding: 0 2px;
      border-top-width: 0;
      border-bottom-width: $label-border-width;
      border-inline-width: 0;
      border-style: solid;
      border-top-color: $texteditor-border-color;
      border-bottom-color: $texteditor-border-bottom-color;
      margin-left: -2px;
      margin-right: -2px;
      border-radius: 1px;
      clip-path: inset(-$texteditor-label-font-size 1px -1px 1px);

      span {
        position: relative;
        font-size: $texteditor-label-font-size;
        top: 0;
        margin-top: 0;
        transform: translate(0, -$label-offset-y);
        height: $label-active-height;
        line-height: normal;
      }
    }

    .dx-label-before {
      border-block-width: $label-border-width;
      border-inline-start-width: $label-border-width;
      border-inline-end-width: 0;
      border-style: solid;
      border-top-color: $texteditor-border-color;
      border-bottom-color: $texteditor-border-bottom-color;
      border-inline-start-color: $texteditor-border-color;
      border-start-start-radius: $texteditor-input-border-radius;
      border-end-start-radius: $texteditor-input-border-radius;
      min-width: $label-before-min-width;
      clip-path: inset(-1px 1px -1px -1px);
    }

    .dx-label-after {
      flex-grow: 1;
      min-width: $label-after-min-width;
      border-block-width: $label-border-width;
      border-inline-end-width: $label-border-width;
      border-inline-start-width: 0;
      border-style: solid;
      border-top-color: $texteditor-border-color;
      border-bottom-color: $texteditor-border-bottom-color;
      border-inline-end-color: $texteditor-border-color;
      border-start-end-radius: $texteditor-input-border-radius;
      border-end-end-radius: $texteditor-input-border-radius;
      clip-path: inset(-1px -1px -1px 1px);
    }

    &.dx-rtl {
      .dx-label-before {
        clip-path: inset(-1px -1px -1px 1px);
      }

      .dx-label-after {
        clip-path: inset(-1px 1px -1px -1px);
      }
    }

    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
    &.dx-texteditor-with-floating-label {
      &.dx-daterangebox {
        .dx-label {
          position: relative;

          &::before {
            content: '';
            width: 100%;
            position: absolute;
            height: 3px;
            top: -$label-backdrop-offset-y;
            margin-inline-start: -2px;
            background-color: $label-backdrop-bg;
          }
        }
      }
    }

    &.dx-texteditor-with-label,
    &.dx-texteditor-with-floating-label {
      outline: none;
      margin-top: $label-offset-y;

      &.dx-texteditor:not(.dx-daterangebox) {
        border: $texteditor-border;
        box-shadow: none;
      }

      &.dx-state-readonly {
        @include dx-state-border-style($label-readonly-border-style);
        @include dx-state-border-color($texteditor-readonly-color, $texteditor-readonly-color);
      }

      &.dx-state-disabled {
        @include dx-state-border-color($texteditor-disabled-color, $texteditor-disabled-color);
      }

      &.dx-invalid {
        @include dx-state-border-color($texteditor-invalid-faded-border-color, $texteditor-invalid-faded-border-color);

        &.dx-state-hover,
        &.dx-state-focused {
          @include dx-state-border-color($texteditor-invalid-focused-border-color, $texteditor-invalid-focused-border-color);
        }
      }

      &.dx-state-hover {
        @include dx-state-border-color($texteditor-hover-border-color, $texteditor-hover-border-bottom-color);
      }

      &.dx-state-focused {
        @include dx-state-border-color($texteditor-focused-border-color, $texteditor-focused-border-bottom-color);
        @include dx-state-border-width($label-active-border-width);
      }
    }

    &.dx-texteditor-label-outside {
      margin-top: $label-offset-y-outside;

      .dx-texteditor-label {
        user-select: auto;
      }

      .dx-label-before,
      .dx-label-after {
        clip-path: none;
      }

      .dx-label {
        margin: 0;
        clip-path: none;
        border-top-width: $label-border-width;
        border-radius: 0;
        border-start-end-radius: 1px;
        border-end-end-radius: 1px;
        margin-inline-start: 0;
        padding: 0;

        span {
          position: absolute;
          width: 100%;
          cursor: default;
          pointer-events: auto;
          font-size: $texteditor-label-outside-font-size;
          margin-top: 0;
          top: -$label-offset-y-outside;
          height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
          line-height: #{math.div($texteditor-label-outside-height, $texteditor-label-outside-font-size)}em;
        }
      }
    }

    &.dx-texteditor-with-floating-label {
      .dx-placeholder {
        display: none;
      }

      &.dx-state-focused,
      &.dx-dropdowneditor-active {
        .dx-placeholder {
          display: block;
        }
      }

      $label-empty-margin-top: math.div(-$label-empty-height, 2) + $label-margin-top-diff;

      &.dx-texteditor-empty {
        @include dx-state-empty(
          $label-border-width,
          $texteditor-label-transition,
          $texteditor-font-size,
          $label-empty-height,
          $label-empty-margin-top,
          $texteditor-input-top-padding
        );

        &.dx-state-focused,
        &.dx-dropdowneditor-active {
          @include dx-state(
            $texteditor-label-font-size,
            $label-offset-y,
            $label-active-height,
            $label-backdrop-bg
          );
        }

        &.dx-state-readonly {
          .dx-placeholder {
            display: none;
          }

          &.dx-state-focused {
            @include dx-state-empty(
              $label-active-border-width,
              $texteditor-label-transition,
              $texteditor-font-size,
              $label-empty-height,
              $label-empty-margin-top,
              $texteditor-input-top-padding
            );
          }
        }
      }
    }
  }
}

@mixin dx-editor-filled(
  $texteditor-label-transition,
  $texteditor-label-font-size,
  $texteditor-label-height,
  $texteditor-label-line-height,
  $texteditor-label-top-offset,
  $texteditor-label-outside-top-offset,
  $texteditor-font-size,
  $texteditor-empty-label-height,
  $texteditor-empty-label-line-height,
  $texteditor-filled-input-horizontal-padding,
  $texteditor-filled-input-with-label-top-padding,
  $texteditor-filled-input-with-label-bottom-padding,
  $texteditor-label-outside-font-size,
  $texteditor-label-outside-height,
) {
  .dx-editor-filled {
    .dx-texteditor-label {
      .dx-label-after,
      .dx-label-before {
        min-width: $texteditor-filled-input-horizontal-padding;
      }
    }

    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
    &.dx-texteditor-with-floating-label {
      .dx-texteditor-input,
      .dx-lookup-field,
      .dx-placeholder::before {
        padding-top: $texteditor-filled-input-with-label-top-padding;
        padding-bottom: $texteditor-filled-input-with-label-bottom-padding;
      }

      .dx-lookup-field {
        .dx-placeholder::before {
          padding: 0;
        }
      }
    }

    &.dx-texteditor-with-label,
    &.dx-texteditor-with-floating-label {
      .dx-texteditor-label {
        font-size: $texteditor-label-font-size;
        height: $texteditor-label-height;
        line-height: $texteditor-label-line-height;
        top: $texteditor-label-top-offset;
        margin-top: 0;
      }
    }

    &.dx-texteditor-label-outside {
      margin-top: $texteditor-label-outside-top-offset;

      .dx-texteditor-label {
        user-select: auto;
        font-size: $texteditor-label-outside-font-size;
        height: $texteditor-label-outside-height;
        line-height: $texteditor-label-outside-height;
        margin-top: 0;
        top: -$texteditor-label-outside-top-offset;
      }

      .dx-label {
        cursor: default;

        span {
          width: 100%;
          pointer-events: auto;
          position: absolute;
          margin-bottom: 0;
        }
      }
    }

    &.dx-texteditor-with-floating-label {
      &.dx-texteditor-empty,
      &.dx-texteditor-empty.dx-state-readonly {
        .dx-placeholder {
          display: none;
        }

        .dx-texteditor-label {
          transition: $texteditor-label-transition;
          font-size: $texteditor-font-size;
          height: $texteditor-empty-label-height;
          line-height: $texteditor-empty-label-line-height;
          top: 50%;
          margin-top: math.div(-$texteditor-empty-label-height, 2);
        }

        &.dx-textarea {
          .dx-texteditor-label {
            top: $texteditor-filled-input-with-label-top-padding;
            margin-top: 0;
          }
        }
      }

      &.dx-state-focused,
      &.dx-dropdowneditor-active {
        .dx-placeholder {
          display: block;
        }

        .dx-texteditor-label {
          height: $texteditor-label-height;
          line-height: $texteditor-label-line-height;
          font-size: $texteditor-label-font-size;
          top: $texteditor-label-top-offset;
          margin-top: 0;
        }

        &.dx-textarea {
          .dx-texteditor-label {
            top: $texteditor-label-top-offset;
            margin-top: 0;
          }
        }
      }
    }
  }
}

@mixin dx-editor-underlined(
  $texteditor-label-transition,
  $texteditor-label-font-size,
  $texteditor-label-height,
  $texteditor-label-line-height,
  $texteditor-label-top-offset,
  $texteditor-label-outside-top-offset,
  $texteditor-font-size,
  $texteditor-empty-label-height,
  $texteditor-empty-label-line-height,
  $texteditor-with-label-input-top-padding,
  $texteditor-with-label-input-bottom-padding,
  $texteditor-label-outside-font-size,
  $texteditor-label-outside-height,
) {
  .dx-editor-underlined {
    &.dx-texteditor-with-label:not(.dx-texteditor-label-outside),
    &.dx-texteditor-with-floating-label {
      .dx-texteditor-input,
      .dx-lookup-field,
      .dx-placeholder::before {
        padding-top: $texteditor-with-label-input-top-padding;
        padding-bottom: $texteditor-with-label-input-bottom-padding;
      }

      .dx-lookup-field {
        .dx-placeholder::before {
          padding: 0;
        }
      }
    }

    &.dx-texteditor-with-label,
    &.dx-texteditor-with-floating-label {
      .dx-texteditor-label {
        transform: translate(0, 0);
        height: $texteditor-label-height;
        line-height: $texteditor-label-line-height;
        top: $texteditor-label-top-offset;
        margin-top: 0;
      }
    }

    &.dx-texteditor-label-outside {
      margin-top: $texteditor-label-outside-top-offset;

      .dx-texteditor-label {
        user-select: auto;
        font-size: $texteditor-label-outside-font-size;
        height: $texteditor-label-outside-height;
        line-height: $texteditor-label-outside-height;
        top: -$texteditor-label-outside-top-offset;
        margin-top: 0;
      }

      .dx-label {
        cursor: default;

        span {
          width: 100%;
          pointer-events: auto;
          position: absolute;
          margin-bottom: 0;
        }
      }
    }

    &.dx-texteditor-with-floating-label {
      &.dx-texteditor-empty,
      &.dx-texteditor-empty.dx-state-readonly {
        .dx-placeholder {
          display: none;
        }

        .dx-texteditor-label {
          transition: $texteditor-label-transition;
          transform: translate(0, 0);
          font-size: $texteditor-font-size;
          height: $texteditor-empty-label-height;
          line-height: $texteditor-empty-label-line-height;
          top: 50%;
          margin-top: math.div(-$texteditor-empty-label-height, 2);
        }

        &.dx-textarea {
          .dx-texteditor-label {
            top: $texteditor-with-label-input-top-padding;
            margin-top: 0;
          }
        }
      }

      &.dx-state-focused,
      &.dx-dropdowneditor-active {
        .dx-placeholder {
          display: block;
        }

        .dx-texteditor-label {
          transform: translate(0, 0);
          font-size: $texteditor-label-font-size;
          height: $texteditor-label-height;
          line-height: $texteditor-label-line-height;
          top: $texteditor-label-top-offset;
          margin-top: 0;
        }

        &.dx-textarea {
          .dx-texteditor-label {
            top: $texteditor-label-top-offset;
            margin-top: 0;
          }
        }
      }
    }
  }
}

@mixin dx-editor-buttons-container(
  $generic-texteditor-button-top-padding,
  $generic-texteditor-button-bottom-padding,
  $generic-texteditor-button-icononly-top-padding,
  $generic-texteditor-button-icononly-bottom-padding,
  $generic-texteditor-button-icononly-horizontal-padding,
  $generic-texteditor-custom-button-margin,
) {
  .dx-texteditor-buttons-container {
    > .dx-button {
      margin-top: 1px;
      margin-bottom: 1px;
      margin-inline-start: $generic-texteditor-custom-button-margin;
      margin-inline-end: $generic-texteditor-custom-button-margin;

      > .dx-button-content {
        padding-top: $generic-texteditor-button-top-padding;
        padding-bottom: $generic-texteditor-button-bottom-padding;
      }

      &.dx-button-has-icon:not(.dx-button-has-text) {
        > .dx-button-content {
          padding: $generic-texteditor-button-icononly-top-padding $generic-texteditor-button-icononly-horizontal-padding $generic-texteditor-button-icononly-bottom-padding;
        }
      }
    }
  }

  .dx-editor-outlined,
  .dx-editor-filled {
    .dx-texteditor-buttons-container {
      &:first-child {
        > .dx-button {
          &:last-child {
            margin-inline-end: 0;
          }
        }
      }

      &:last-child {
        > .dx-button {
          &:first-child {
            margin-inline-start: 0;
          }
        }
      }
    }
  }

  .dx-editor-underlined {
    &.dx-texteditor-with-before-buttons {
      .dx-texteditor-buttons-container {
        > .dx-button {
          &:first-child {
            margin-left: 0;
          }

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}

@mixin dx-editor-buttons-container-material(
  $material-underlined-editor-button-height,
  $material-editor-custom-button-margin,
  $material-editor-custom-button-last-child-margin,
  $material-filled-texteditor-spin-button-horizontal-padding,
  $last-button-horizontal-padding,
  $material-button-vertical-padding,
) {
  .dx-texteditor {
    .dx-texteditor-buttons-container {
      > .dx-button,
      > .dx-clear-button-area {
        margin-inline-start: $material-editor-custom-button-margin;
        margin-inline-end: $material-editor-custom-button-margin;
      }

      &:first-child {
        > .dx-button,
        > .dx-clear-button-area {
          &:first-child {
            margin-inline-start: $material-editor-custom-button-last-child-margin;
          }

          &:last-child {
            margin-inline-end: 0;
          }
        }
      }

      &:last-child {
        > .dx-button,
        > .dx-clear-button-area {
          &:first-child {
            margin-inline-start: 0;
          }

          &:last-child {
            margin-inline-end: $material-editor-custom-button-last-child-margin;
          }
        }

        > .dx-dropdowneditor-button:last-child,
        > .dx-clear-button-area {
          margin-inline-end: $last-button-horizontal-padding;
        }

        > .dx-numberbox-spin-container:last-child {
          margin-inline-end: $material-filled-texteditor-spin-button-horizontal-padding;
        }

        > div:empty:last-child {
          display: none;
        }
      }
    }
  }

  .dx-editor-underlined {
    &.dx-texteditor-with-label,
    &.dx-texteditor-with-floating-label {
      &.dx-texteditor-with-before-buttons {
        .dx-texteditor-buttons-container {
          > .dx-button.dx-button-mode-text {
            height: $material-underlined-editor-button-height;
            margin-top: 1px;
            margin-bottom: 3px;
            margin-inline-end: $material-editor-custom-button-margin;
            margin-inline-start: $material-editor-custom-button-margin;

            .dx-button-content {
              display: flex;
              justify-content: center;
              padding-top: $material-button-vertical-padding - 1px;

              .dx-icon {
                align-self: center;
                margin-top: 1px;
              }
            }

            &.dx-button-has-text {
              .dx-button-content .dx-icon {
                margin-top: 3px;
              }
            }

            &:not(.dx-button-has-text) {
              min-width: $material-underlined-editor-button-height;

              .dx-button-content {
                padding: 2px;
              }
            }
          }

          &:first-child {
            > .dx-button {
              &:first-child {
                margin-inline-start: 0;
              }
            }
          }

          &:last-child {
            > .dx-button {
              &:last-child {
                margin-inline-end: 0;
              }
            }
          }
        }
      }
    }

    &.dx-texteditor-with-before-buttons {
      .dx-texteditor-buttons-container {
        > .dx-button.dx-button-mode-text {
          height: $material-underlined-editor-button-height;
          margin-top: 1px;
          margin-bottom: 3px;
          margin-inline-end: $material-editor-custom-button-margin;
          margin-inline-start: $material-editor-custom-button-margin;

          .dx-button-content {
            display: flex;
            justify-content: center;
            padding-top: $material-button-vertical-padding - 1px;

            .dx-icon {
              align-self: center;
              margin-top: 1px;
            }
          }

          &.dx-button-has-text {
            .dx-button-content .dx-icon {
              margin-top: 3px;
            }
          }

          &:not(.dx-button-has-text) {
            min-width: $material-underlined-editor-button-height;

            .dx-button-content {
              padding: 2px;
            }
          }
        }

        &:first-child {
          > .dx-button {
            &:first-child {
              margin-inline-start: 0;
            }
          }
        }

        &:last-child {
          > .dx-button {
            &:last-child {
              margin-inline-end: 0;
            }
          }
        }
      }
    }
  }
}