.container {
  border-color: transparent;
  border-style: solid;
  border-width: 1px;
  border-radius: var(--Corner-radius-sm);
  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
  position: relative;
  height: 60px;

  &.rounded {
    background-color: var(--Base-Surface-Primary-light-Normal);
    padding: var(--Space-x15) var(--Space-x15) var(--Space-x15) var(--Space-x3);
    border: 1px solid var(--Border-Intense);
    border-radius: var(--Corner-radius-rounded);
    height: auto;
  }

  &:hover,
  &:has(input:active, input:focus, input:focus-within) {
    background-color: var(--Base-Background-Primary-Normal);
  }

  &:has(input:active, input:focus, input:focus-within) {
    border-color: 1px solid var(--UI-Input-Controls-Border-Focus);
  }
}

.label {
  flex: 1;
  &:has(
      ~ .inputContainer input:active,
      ~ .inputContainer input:focus,
      ~ .inputContainer input:focus-within
    )
    p {
    color: var(--UI-Text-Active);
  }

  &.red {
    color: var(--Scandic-Brand-Scandic-Red);
  }
}

.searchButtonContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--Space-x05);
}

.searchButton {
  display: flex;
  align-items: center;
  gap: var(--Space-x05);
  cursor: pointer;
}

.inputContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  width: 100%;
  height: 100%;
}

.searchInput {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;

  align-items: center;
  display: grid;

  & input[type="search"] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &.withSearchButton {
    & input[type="search"]::-webkit-search-cancel-button {
      display: none;
    }
  }
}

.clearButton {
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;

  &.clearButtonVisible {
    opacity: 1;
    pointer-events: all;
  }
}
