cosmos-explorer/src/Explorer/Panes/PanelComponent.less

@import "../../../less/Common/Constants";

.panelFormWrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: var(--colorNeutralForeground2);
  background-color: var(--colorNeutralBackground1);
  .panelMainContent {
    flex-grow: 1;
    padding: 0 34px;
    margin: 20px 0;
    overflow-x: hidden;

    &> :not(.collapsibleSection) {
      margin-bottom: @DefaultSpace;

      &> :not(:last-child) {
        margin-bottom: @DefaultSpace;
      }
    }

    .panelInfoIcon {
      font-size: @mediumFontSize;
      width: @mediumFontSize;
      margin: auto 0 auto @SmallSpace;
      cursor: default;
      vertical-align: middle;
      color: var(--colorNeutralForeground1);
    }

    .panelTextBold {
      font-weight: 600;
      line-height: 20px;
      color: var(--colorNeutralForeground1);
    }

    .panelTextField {
      font-size: @mediumFontSize;
      border: 1px solid var(--colorNeutralStroke1);
      color: var(--colorNeutralForeground1);
      background-color: var(--colorNeutralBackground2);
      padding: 4px 10px;
      width: @newCollectionPaneInputWidth;

      &::placeholder {
        color: var(--colorNeutralForeground3);
      }

      &:focus {
        border-color: var(--colorCompoundBrandStroke1);
        outline: none;
      }
    }

    .panelRadioBtn {
      margin: 0;
    }

    .panelRadioBtnLabel {
      font-size: @mediumFontSize;
      padding: 0 @LargeSpace 0 @SmallSpace;
      color: var(--colorNeutralForeground1);
    }

    .panelSectionSpinner {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .ms-Dropdown {
      .ms-Dropdown-title {
        background-color: var(--colorNeutralBackground2);
        border-color: var(--colorNeutralStroke1);
        color: var(--colorNeutralForeground1);
      }

      .ms-Dropdown-caretDownWrapper {
        color: var(--colorNeutralForeground1);
      }
    }

    .ms-Checkbox {
      .ms-Checkbox-label {
        color: var(--colorNeutralForeground1);
      }
    }

    .ms-TextField {
      .ms-TextField-fieldGroup {
        background-color: var(--colorNeutralBackground2);
        border-color: var(--colorNeutralStroke1);
      }

      .ms-TextField-field {
        background-color: var(--colorNeutralBackground2);
        color: var(--colorNeutralForeground1);

        &::placeholder {
          color: var(--colorNeutralForeground3);
        }
      }
    }

    .ms-Text {
      color: var(--colorNeutralForeground1);
    }
  }

  @media (max-width: 768px) {
    .panelMainContent {
      padding: 0 24px;
      margin: 0;
      overflow-x: auto;
    }
  }
}

.panelHeader {
  color: var(--colorNeutralForeground1);
  font-size: @largeFontSize;
  font-weight: 400;
}

.panelInfoErrorContainer {
  background-color: var(--colorNeutralBackground3);
  color: var(--colorNeutralForeground1);
  padding: @DefaultSpace;
  display: inline-flex;
  margin: 20px 34px 0 34px;

  i {
    font-size: @WarningErrorIconSize;
    width: @WarningErrorIconSize;
    margin-left: @SmallSpace;
  }

  .panelWarningIcon {
    color: var(--colorPaletteYellowForeground1);
  }

  .panelErrorIcon {
    color: var(--colorPaletteRedForeground1);
  }

  .panelLargeInfoIcon {
    color: var(--colorBrandForeground1);
  }

  .panelWarningErrorDetailsLinkContainer {
    display: flex;
    flex-direction: column;
    padding-left: @MediumSpace;

    .paneErrorLink {
      color: var(--colorBrandForeground1);
      cursor: pointer;
      font-size: @mediumFontSize;
    }

    .panelWarningErrorMessage {
      color: var(--colorNeutralForeground1);
    }
  }
}

.panelFooter {
  padding: 16px 34px;
  border-top: solid 1px var(--colorNeutralStroke1);
  background-color: var(--colorNeutralBackground1);
  color: var(--colorNeutralForeground1);

  & button {
    height: 30px;
  }
}

.deleteCollectionFeedback {
  margin-top: 12px;
}

.addRemoveIcon {
  margin-left: 4px !important;
}

.addRemoveIconLabel {
  margin-top: 28px;
  margin-left: 4px !important;
}

.addRemoveIcon [alt="editEntity"]:focus,
.addRemoveIconLabel [alt="editEntity"]:focus {
  border: 1px dashed var(--colorNeutralStroke1);
  outline: none;
}

.addNewParamStyle {
  margin-top: 5px;
  margin-left: 5px !important;
  cursor: pointer;
}

.panelGroupSpacing> :not(:last-child) {
  margin-bottom: @DefaultSpace;
}

.fileUpload {
  display: none !important;
}

.customFileUpload {
  padding: 25px 0px 0px 10px;
  cursor: pointer;
  display: flex;
}

.fileIcon {
  align-self: center;
}

.panelAddIconLabel {
  font-size: 20px;
  width: 20px;
  margin: 30px 0 0 10px;
  cursor: default;
}

.panelAddIcon {
  font-size: 20px;
  width: 20px;
  margin: 30px 0 0 10px;
  cursor: default;
}

.removeIcon {
  color: "var(--colorNeutralForeground1)";
}

.backImageIcon {
  margin-top: 8px;
}

[alt="back"]:focus {
  border: 1px solid var(--colorCompoundBrandStroke1);
  outline: none;
}

.addEntityDatePicker {
  max-width: 145px;
}

.addEntityTextField {
  width: 237px;
}

.addButtonEntiy {
  width: 25%;
}

.column-select-view {
  margin: 20px 0px 0px 0px;
}

.panelSeparator::before {
  background-color: var(--colorNeutralStroke1);
}

.themed-panel {
  &.ms-Panel {
    .ms-Panel-main {
      background-color: var(--colorNeutralBackground1);
    }
    
    .ms-Panel-overlay {
      background-color: var(--overlayBackground);
    }
    
    .ms-Panel-content {
      background-color: var(--colorNeutralBackground1);
    }
  }
}

:global {
  .ms-Panel-root {
    background-color: transparent;
  }

  .ms-Panel-overlay {
    background-color: var(--overlayBackground);
  }
}