// Copyright (c) Bentley Systems, Incorporated. All rights reserved.
// See LICENSE.md in the project root for license terms and full copyright notice.

.presentation-navigation-property-select-control {
  vertical-align: baseline;
  display: grid;
  align-items: center;
  position: relative;

  .presentation-navigation-property-select-input {
    grid-area: 1 / -1 / auto / auto;
    padding-right: var(--iui-component-height);

    > input,
    > input:focus-visible {
      width: 100%;
      height: 100%;
      border: none;
      text-overflow: ellipsis;
      overflow: hidden;
      outline: none;
      padding: 0;
    }
  }

  .presentation-navigation-property-select-input-icon {
    grid-area: 1 / -1 / auto / auto;
    height: calc(100% - 4px);
    border-radius: var(--iui-border-radius-1);
    padding-inline: calc(var(--iui-size-xs) + 1px);
    margin: 0 var(--iui-size-xs) 0 0;
    box-sizing: content-box;
    cursor: pointer;
    align-items: center;
    justify-self: end;
    display: flex;
    position: relative;

    svg {
      fill: var(--iui-color-icon);
      transition: transform var(--iui-duration-1) ease-out;
    }

    &.open {
      svg {
        transform: rotate(180deg);
      }
    }
  }
  input::placeholder {
    opacity: 1; // it is used to override mozilla firefox style for placeholder.
  }
}

.presentation-navigation-property-select-dropdown {
  background-color: var(--iui-color-background);
  border: 1px solid var(--iui-color-border-subtle);
  box-shadow: var(--iui-shadow-1);
  color: var(--iui-color-text);
  border-radius: var(--iui-border-radius-1);
  max-height: calc((var(--iui-component-height) - 1px) * 8.5);
  overflow: overlay;
}