/* Main class */
.main {
  display: flex;
}

.main.full {
  flex-direction: column;
}

.main.compact {
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.main.compact :global(.dcl.select-field),
.main.compact :global(.dcl.field) {
  min-width: unset;
}

/* Mappings class */

.mappings {
  display: flex;
}

.mappings.compact {
  min-width: 0;
  flex: 1;
}

.mappings.compact > div {
  flex: 1;
}

/* Input margin */

.compact .any,
.compact .none,
.compact .multiple {
  margin-top: 19px;
}

.readOnly .any,
.readOnly .none,
.readOnly .multiple {
  margin-top: 0 !important;
}

/* Mapping type class */

.mappingType :global(.ui.dropdown):global(> .text:not(.default) > img) {
  margin-top: 1px;
}

.mappingType.compact {
  margin-top: 17px;
}

.readOnly .mappingType {
  margin-top: 0 !important;
}

.mappingType.compact :global(.ui.selection.dropdown) {
  min-width: 10em;
}

.mappingType :global(.ui.dropdown .menu > .item > img) {
  margin-top: 1px;
}

.mappingType :global(.default.text) {
  display: flex !important;
  flex-direction: row;
  align-items: center;
}

.mappingType :global(.default.text):not(:has(> img))::before {
  content: ' ';
  background-size: contain;
  background-repeat: no-repeat;
  display: block;
  background-image: url(../../icons/map.svg);
  bottom: 4px;
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

/* Linked contract select class */

.linkedContractSelect :global(.divider.text),
.linkedContractSelect :global(.visible.menu.transition) > div {
  display: flex !important;
  align-items: center !important;
}

.linkedContractSelect :global(.divider.text) img,
.linkedContractSelect :global(.visible.menu.transition) img {
  height: 25px;
  width: 25px;
}

/* Range class */

.range {
  display: flex;
  min-width: 0;
}

.range.compact {
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.range.compact :global(.dcl.field) {
  min-width: 80px;
}

.range.full {
  flex-direction: column;
}

.range.compact :global(.dcl.field) {
  flex: 1 1 auto;
}

/* To class */
.to {
  text-transform: uppercase;
  color: var(--secondary-text);
}

/* Multiple */

.mappings :global(.dcl.text-area) {
  width: 100%;
}

/* Tooltip */

.typeLabel {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Read only */
.readOnly p:global(.message) {
  display: none;
}
