.teamix-pro-nocode {
  &-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;

    p {
      color: var(--color-text1-8, #848484);
    }
  }

  &-playground {
    display: flex;
    position: relative;
    border: 1px solid var(--color-line1-1, #eaeaea);

    &-component {
      position: relative;
      padding: 20px;
      flex-grow: 1;
      border-right: 1px solid var(--color-line1-1, #eaeaea);
    }

    &-configurator {
      padding: 0;
      flex-shrink: 0;
      width: 360px;
      overflow: auto;

      --tab-item-margin-lr-size-m: 8px;

      ul.next-tabs-nav {
        padding: 0 16px;
        --tab-item-text-size-m: 13px;
      }

      .next-collapse-panel-content {
        padding: 16px 16px 0 !important;
      }

      .next-table-empty {
        padding: 8px 0;
      }

      & > .next-formily-layout {
        height: 100%;
        & > form {
          height: 100%;
          & > .next-tabs {
            height: 100%;
            display: flex;
            flex-direction: column;
            & > .next-tabs-bar {
              flex-shrink: 0;
            }
            & > .next-tabs-content {
              flex-grow: 1;
              overflow: auto;
            }
          }
        }
      }

      .teamix-pro-field-icon {
        button {
          width: 100%;
        }
      }
    }

    &-tools {
      position: absolute;
      right: 20px;
      bottom: 20px;

      & > i {
        cursor: pointer;
        color: var(--color-text1-8, #848484);
        background-color: rgba(0, 0, 0, 0.06);
        padding: 8px;
        border-radius: 4px;
        &:hover {
          color: var(--color-text1-3, #333333);
        }
      }
    }
  }
}