.dynamic-form {
  display: flex;
  flex-direction: column;

  .dynamic-field {
    position: relative;
    .by-env {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      align-items: center;
    }

    .field label {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .dynamic-list-field-buttons {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px;
    }

    &[data-field-type="list"] {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  }

  .error-message {
    color: var(--danger-500);
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;

    .icon {
      width: 16px;
      height: 16px;
      padding: 2px;
      background-color: var(--danger-500);
      border-radius: 50%;
      margin: 5px 0;
      svg {
        width: 100%;
        height: auto;
        fill: var(--danger-contrastText);
      }
    }
  }

  .simple-list-field {
    display: flex;
    flex-direction: column;
    gap: 6px;

    .input-group {
      display: flex;
      flex-direction: row;

      input {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }

      button {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        height: 40px;
        svg {
          fill: var(--inverse-contrastText);
        }
      }
    }

    .current-value {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      flex-direction: row;
      gap: 3px;

      li {
        background-color: var(--light-600);
        color: var(--indigo-50);
        display: flex;
        flex-direction: row;
        gap: 10px;
        align-items: center;
        padding: 0 8px;
        border-radius: 0.25rem;

        small {
          line-height: 0.75rem;
          max-width: 150px;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        button {
          background-color: transparent;
          border: none;
          padding: 0;
          width: auto;
        }
      }
    }
  }

  .select-box {
    position: relative;
    .loading {
      position: absolute;
      right: 32px;
      top: 9px;
    }
  }

  .multiselect {
    position: relative;
    .loading {
      position: absolute;
      right: 32px;
      top: 9px;
    }
    > input {
      padding-right: 40px;
      caret-color: transparent;
      cursor: default;
    }
    .chevron {
      position: absolute;
      top: 9px;
      right: 9px;
      transition: transform 0.3s ease-in-out;
    }
    &.open .chevron {
      transform: rotate(180deg);
    }
    .option-box {
      max-height: 0;
      position: absolute;
      left: 0;
      right: 0;
      overflow: auto;
      transition: max-height 0.3s;
      z-index: 1;
      ul {
        display: flex;
        flex-direction: column;
        background-color: var(--light-300);
        margin: 0;
        padding: 0;
        list-style: none;
        border-radius: 6px;
      }
      li {
        label {
          display: flex;
          flex-direction: row;
          gap: 8px;
          align-items: center;
          padding: 5px 8px;
          outline: none;
          transition: background-color 0.2s;
          &:hover, &:focus {
            background-color: var(--light-500);
          }
        }
      }
      input {
        flex-shrink: 0;
      }
    }
    &.open {
      > input {
        border-color: var(--primary-500);
        box-shadow: inset 0 0 0 1px var(--primary-500);
      }
      .option-box {
        border: 1px solid var(--light-600);
        max-height: 200px;
      }
    }
  }

  .variable-field {
    display: flex;
    flex-direction: row;
    position: relative;
    > input {
      flex: 1;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    > button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      height: 40px;
      border-color: var(--light-600);
      font-weight: 300;
      font-size: 0.875rem;
      border-left: none;
      background-color: transparent;
      &:hover, &:focus {
        background-color: transparent;
        color: var(--inverse-500);
        outline: none;
      }
      svg {
        fill: var(--inverse-500);
      }
    }
    .chevron {
      transition: transform 0.3s ease-in-out;
    }
    .variable-selector {
      position: absolute;
      z-index: 1;
      left: 0;
      right: 0;
      top: 45px;
      max-height: 0;
      overflow: hidden;
      border-width: 0;
      transition: max-height 0.3s ease-in-out;
    }
    &.open {
      .variable-selector {
        overflow: auto;
        max-height: 300px;
        border-width: 1px;
      }
      .chevron {
        transform: rotate(180deg);
      }
    }
    &.variable {
      > input {
        color: var(--tertiary-400);
      }
    }
  }

  .variable-selector {
    background-color: var(--light-300);
    border: 1px solid var(--light-600);
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    .search, h5, button {
      padding: 8px 16px;
    }
    .search {
      margin: 8px 0;
    }
    h5 {
      margin: 8px 0;
    }
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    li {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid var(--light-500);
      button {
        display: flex;
        gap: 8px;
        background-color: transparent;
        border: none;
        color: unset;
        text-align: left;
        align-items: start;
        height: auto;
        cursor: pointer;
        transition: background-color 0.2s;
        &:hover {
          background-color: var(--light-500);
        }
      }
      .variable-data {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }
    }
  }

  .field-header {
    display: flex;
    flex-direction: column;
    margin-top: 16px;
    gap: 6px;
  }
}
