.gui-slider {
  .mat-mdc-slider {
    --mat-slider-handle-width: 0.75rem;
    --mat-slider-handle-height: 0.75rem;
    --mat-slider-inactive-track-height: 0.125rem;
    --mat-slider-active-track-height: 0.125rem;

    flex: 3;
    min-width: auto;
    height: calc(var(--mat-slider-handle-width) * 2);
    margin: 0 calc(var(--mat-slider-handle-width) / 2);

    +.mat-mdc-form-field {
      flex: 2;
    }

    &.mdc-slider--range {
      +.mat-mdc-form-field,
      +.mat-mdc-form-field+.mat-mdc-form-field {
        flex: 1.5;
      }
    }

    .mdc-slider__input {
      top: 0;
      height: calc(var(--mat-slider-handle-width) * 2);
    }

    .mdc-slider__thumb {
      left: calc(var(--mat-slider-handle-width) * -1);
      width: calc(var(--mat-slider-handle-width) * 2);
      height: calc(var(--mat-slider-handle-width) * 2);
      border-radius: 50%;
      overflow: hidden;
    }
  }

  .mat-mdc-form-field {
    margin-left: 0.375rem;

    [dir='rtl'] & {
      margin-left: 0;
      margin-right: 0.375rem;
    }

    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      appearance: none;
    }
  }
}
