@use '@nu-art/ts-styles' as styles;

.sync-env-page {
  width: 100%;
  height: 100%;

  .ts-input {
    width: 300px;
    background: white;
    border: 2px solid black;
    border-radius: 10px;
    font: {
      size: 14px;
    }

    &.invalid-id {
      background-color: rgba(255, 52, 52, 0.5);
      background-blend-mode: multiply;
    }

    &.valid-id {
      background-color: rgba(142, 255, 98, 0.5);
      background-blend-mode: multiply;
    }
  }

  .ts-busy-button {
    padding: 8px 16px;
    margin: 0;
    @include styles.mouseInteractiveBackground(styles.dark-blue(2), styles.dark-blue(1));

    &.ts-busy-button__disabled {
      background: styles.dark-blue(2);
      opacity: 0.5;
    }

    &.deter-users-from-this-button {
      background: #FF2222;
    }
  }

  .three-dot-loader {
    display: inline-flex;
    gap: 5px;
    translate: 0 -3px;

    & > span {
      width: 5px;
      aspect-ratio: 1/1;
      border-radius: 50%;
      background: var(--color-faded);
      animation: ThreeDotLoader 1.5s ease-out infinite;

      &:nth-child(2) {
        animation-delay: 0.5s;
      }

      &:last-child {
        animation-delay: 1s;
      }
    }
  }

  .sync-env-page__menu {
    padding: 0 16px;
    align-items: flex-end;
    gap: 10px;

    .ts-prop-renderer {
      width: unset;

      .ts-dropdown {
        width: 145px;
      }

      .ts-prop-renderer__error {
        display: none;
      }
    }

    .sync-env-page__menu__row {
      width: 100%;
      gap: 10px;
      align-items: flex-end;
    }

    .sync-env-page__operations {
      gap: 10px;
    }

    .sync-env-page__status {
      align-items: flex-end;
      gap: 4px;
      font: {
        size: 14px;
        style: italic;
      }
    }
  }

  .sync-env_modules-list-v2 {
    flex-grow: 1;
    row-gap: 5px;
    column-gap: 25px;
    margin-top: 10px;
    padding: 0 10px 10px 10px;
    flex-wrap: wrap;
    height: 0;

    .utils {
      width: 500px;
      justify-content: space-between;
      align-items: flex-end;

      .ts-checkbox {
        gap: 5px;

        .ts-checkbox__content {
          margin-inline-start: 0;
          font-size: 1rem;
        }
      }
    }

    .ts-prop-renderer {
      justify-content: space-between;
      width: 500px;

      .ts-prop-renderer__label {
        color: #121212;
        font-weight: normal;

        .header {
          gap: 5px;
        }
      }

      .collection-row {
        .backup-info {
          gap: 3px;

          .higher {
            color: darkgreen;
          }

          .lower {
            color: red;
          }

          div {
            min-width: 50px;
            text-align: right;

            &.left-row {
              text-align: center;
            }
          }
        }
      }
    }
  }
}

@keyframes ThreeDotLoader {
  0%, 50%, 100% {
    background: var(--color-faded);
  }

  25% {
    background: var(--color);
  }
}