/*
 * CloudBeaver - Cloud Database Manager
 * Copyright (C) 2020-2024 DBeaver Corp and others
 *
 * Licensed under the Apache License, Version 2.0.
 * you may not use this file except in compliance with the License.
 */
.container,
.button {
  composes: theme-ripple from global;
}

.container {
  box-sizing: border-box;
  display: inline-flex;
  padding: 0px 1px;
}

.name,
.value {
  composes: theme-typography--caption from global;
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex: 1;
  padding: 4px 0;

  & .shadowInput {
    height: 24px;
    padding: 0 36px 0 12px;
  }
}

.value,
.name {
  margin-left: 24px;
}

.name {
  flex: 0 0 auto;
  width: 276px;
}

.remove {
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  display: flex;
  opacity: 0;
}

.select {
  flex: 0 0 auto;
  align-items: center;
  display: flex;
}

.remove,
.select {
  margin: 0 2px;
}

.container:hover .remove {
  opacity: 1;
}

.shadowInput {
  composes: theme-background-surface from global;
}

.name .shadowInput,
.value .shadowInput {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
  width: 100%;
  outline: none;

  &.edited {
    font-weight: 600;
  }

  &:global([readonly]),
  &:not(:focus):not([data-focus='true']) {
    background: transparent !important;
    border: solid 2px transparent !important;
  }
}

.icon,
.iconOrImage {
  height: 16px;
  display: block;
}

.select .icon,
.select .iconOrImage {
  &.focus {
    transform: rotate(180deg);
  }
}

.button {
  background: transparent;
  outline: none;
  padding: 4px;
  cursor: pointer;
}

.button,
.propertyValueSelector {
  composes: theme-form-element-radius from global;
  overflow: hidden;
}

.error {
  composes: theme-text-error from global;
}
