// Copyright 2020 Energinet DataHub A/S
//
// Licensed under the Apache License, Version 2.0 (the "License2");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
@use "@energinet-datahub/watt/utils" as watt;

watt-slide-toggle {
  .mat-mdc-slide-toggle {
    --mat-slide-toggle-track-outline-color: var(--watt-on-light-low-emphasis);
    --mat-slide-toggle-selected-track-outline-color: var(--watt-on-light-low-emphasis);

    --mat-slide-toggle-unselected-handle-horizontal-margin: 0 8px;
    --mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0 8px;
    --mat-slide-toggle-selected-handle-horizontal-margin: 0 -8px;
    --mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0 -8px;

    --mat-slide-toggle-unselected-hover-handle-color: var(--watt-on-light-low-emphasis);
    --mat-slide-toggle-unselected-pressed-handle-color: var(--watt-on-light-low-emphasis);
    --mat-slide-toggle-unselected-pressed-handle-color: var(--watt-on-light-low-emphasis);
    --mat-slide-toggle-unselected-handle-color: var(--watt-on-light-low-emphasis);
    --mat-slide-toggle-unselected-focus-handle-color: var(--watt-on-light-low-emphasis);

    --mat-slide-toggle-selected-track-outline-width: 0px;

    &:focus-within {
      --mat-slide-toggle-track-outline-color: var(--watt-color-primary);
    }

    & * label {
      @include watt.typography-watt-text-s;
      padding-left: 8px;
    }

    .mdc-switch__track {
      --mat-slide-toggle-track-shape: 100px;
      --mat-slide-toggle-track-height: 32px;

      --mat-slide-toggle-unselected-track-color: var(--watt-color-neutral-white);
      --mat-slide-toggle-unselected-hover-track-color: var(--watt-color-neutral-white);
      --mat-slide-toggle-unselected-focus-track-color: var(--watt-color-neutral-white);
      --mat-slide-toggle-unselected-pressed-track-color: var(--watt-color-neutral-white);

      --mat-slide-toggle-selected-track-color: var(--watt-color-primary);
      --mat-slide-toggle-selected-pressed-track-color: var(--watt-color-primary);
      --mat-slide-toggle-selected-hover-track-color: var(--watt-color-primary);
      --mat-slide-toggle-selected-focus-track-color: var(--watt-color-primary);
    }

    .mdc-switch {
      --mat-slide-toggle-track-width: 52px;
      --mat-slide-toggle-handle-elevation-shadow: none;
    }

    .mdc-switch__handle {
      --mat-slide-toggle-handle-surface-color: var(--watt-on-light-low-emphasis);
      --mat-slide-toggle-handle-width: 16px;
      --mat-slide-toggle-handle-height: 16px;
      --mat-slide-toggle-handle-shape: 24px;

      --mat-slide-toggle-unselected-handle-size: 16px;
      --mat-slide-toggle-pressed-handle-size: 16px;

      --mat-slide-toggle-selected-handle-size: 16px;
      --mat-slide-toggle-selected-pressed-handle-size: 16px;
    }

    .mdc-switch__handle,
    .mdc-switch--selected {
      --mat-slide-toggle-selected-handle-color: var(--watt-color-neutral-white);
      --mat-slide-toggle-selected-hover-handle-color: var(--watt-color-neutral-white);
      --mat-slide-toggle-selected-focus-handle-color: var(--watt-color-neutral-white);
      --mat-slide-toggle-handle-surface-color: var(--watt-color-neutral-white);
    }

    .mdc-switch__handle,
    .mdc-switch--unselected:enabled:hover:not(:focus):not(:active) {
      --mat-slide-toggle-unselected-hover-handle-color: var(--watt-on-light-low-emphasis);
    }

    .mdc-switch__handle-track {
      --mat-slide-toggle-handle-width: 16px;
    }

    .mdc-switch__ripple {
      display: none;
    }
  }
}
