src/components/CalibrationPopup/CalibrationPopup.scss
@import '../../constants/styles';
@import '../../constants/popup';

.CalibrationPopup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--padding-medium);

  width: 220px;

  background: var(--gray-0);

  box-shadow: 0px 0px 3px var(--gray-7);
  border-radius: 4px;

  .calibration-popup-label {
    font-weight: bold;
    margin-bottom: var(--padding-medium);
  }

  .pop-switch {
    margin-top: var(--padding-medium);

    &.ui__choice--disabled .ui__choice__label {
      color: var(--gray-5);
    }
  }

  .input-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--padding-small);
    height: 32px;

    .input-field {
      width: 94px;
      height: 32px;

      &.invalid-value {
        border-color: #ff0000;
      }

      &:focus {
        border: 1px solid var(--blue-5);
      }

      .Dropdown__wrapper {
        width: 100%;
        height: 100%;

        .Dropdown {
          height: 100%;
          width: 100% !important;
          text-align: start;
        }
      }
    }
  }
}
