// 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;

:host {
  height: 44px; /* Magix UX number (replace with variable) */
}

label {
  display: inline-block;
  width: 100%;
  position: relative;
  text-transform: none;
  overflow: hidden;
  pointer-events: none;
}

input {
  @include watt.typography-watt-text-s;
  font-family: inherit;
  width: 100%;
  height: 44px;
  padding-left: var(--watt-space-l);
  padding-right: 12px;
  border: 1px solid var(--watt-on-light-low-emphasis);
  border-radius: 4px;
  outline: 0;
  opacity: 0;
  transition-property: opacity;
}

.wrapper {
  display: inline-flex;
  position: absolute;
  left: 100%;
  width: 100%;
  height: 100%;
  transition-property: transform;
}

.button {
  display: inline-flex;
  gap: var(--watt-space-xs);
  align-items: center;
  height: 44px;
  padding: 0 16px;
  color: var(--watt-color-primary);
  transform: translateX(-100%);
  transition-property: transform;
  pointer-events: auto;
  cursor: pointer;

  &:hover {
    color: var(--watt-color-primary-dark);
  }
}

.text {
  opacity: 1;
  transition-property: opacity;
}

.clear {
  position: absolute;
  top: 50%;
  right: var(--watt-space-s);
  padding: var(--watt-space-xs);
  border: none;
  border-radius: 4px;
  background: none;
  color: var(--watt-color-primary);
  transform: translateY(-50%);
  cursor: pointer;
  pointer-events: auto;
}

.clear:focus-visible {
  outline: 2px solid var(--watt-color-primary);
}

input:placeholder-shown ~ .clear {
  display: none;
}

input,
.wrapper,
.button,
.text {
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.75, 0, 0.25, 1);
}

input {
  transition-timing-function: cubic-bezier(0, 0.5, 0, 1);
}

input:focus {
  border: 1px solid var(--watt-color-primary);
}

input:not(:placeholder-shown),
input:focus {
  pointer-events: auto;
  opacity: 1;
  transition-timing-function: cubic-bezier(1, 0, 0.5, 0);

  & + .wrapper {
    transform: translateX(-100%);
  }

  & + .wrapper .button {
    pointer-events: none;
    transform: translateX(-6px);
  }

  & + .wrapper .text {
    opacity: 0;
  }
}
