// 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;
@use "./variables" as *;

%datepicker {
  display: flex;
  align-items: center;
  width: 100%;

  watt-button[variant="icon"] {
    margin-left: auto;
    .watt-button--icon {
      // 2px to adjust for the focus border on the button itself
      height: 42px;
    }
  }

  mat-datepicker,
  mat-date-range-picker {
    display: none;
  }

  input.mat-date-range-input-inner,
  input.mat-mdc-input-element,
  .mat-date-range-input-mirror,
  input.mask-input {
    font-family: watt.$typography-monospace-font-family;
  }

  input.mat-date-range-input-inner,
  input.mat-mdc-input-element,
  input.mask-input {
    border: none;
    caret-color: var(--watt-color-neutral-black);
    letter-spacing: -0.03em;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  input.mask-input {
    color: black;
  }

  input.mask-input {
    position: absolute;
    min-width: 100%;
    padding: 2px 1px;
  }

  input.mask-input:focus-visible {
    outline: none;
  }

  // The following style fixes alignment on smaller devices / iOS / Safari
  .mat-date-range-input-container {
    align-items: initial;
  }

  .mat-date-range-input-start-wrapper,
  .mat-date-range-input-end-wrapper {
    max-width: calc(50% - var(--watt-space-s));
    overflow: visible;
    position: relative;
  }

  .mat-date-range-input-separator {
    display: flex;
    align-items: center;
  }

  .mat-date-range-input-separator-hidden,
  .mat-date-range-input-separator {
    opacity: 0 !important;
  }

  .mat-date-range-input-inner::-webkit-input-placeholder,
  .mat-date-range-input-hide-placeholders .mat-date-range-input-inner::-webkit-input-placeholder {
    color: $placeholder-color !important;
    -webkit-text-fill-color: $placeholder-color;
  }
}
